by anthony on 08/17/10 at 8:16 pm
There are a variety of deliverables that most UX designers make before developing a website. There are ones that communicate user research such as personas, process flows, heuristic evaluations and user scenarios. But there are also ones that communicate the user experience design. Wireframes & mockups are the most powerful deliverables for a UX designer.
They are the most important deliverables for the following reasons:
- They are easy for clients to understand.
- They realistically communicate vision and expectations.
- They directly relate to the design.
- They are the most actionable.
- They create the most change & impact.
- They allow for easy discussion & collaboration
- They track the progress being made.
It’s a waste when designers spend so much time and effort focusing on the other deliverables that make little impact. You should spend most of your time on wireframes and mockups. Designers spend hours perfecting other deliverables, but at the end of the day only a few people will give your work much attention. No real change or impact happens because they are not actionable.
If you want to solve a design problem and communicate the solution, then wireframes and mockups are the way to go. They inspire change, stimulate the imagination, clarify understanding and give people something real to look forward to. No other deliverable does that as effectively. The power of wireframes and mockups should never be overlooked no matter how trendy the other deliverables are.
Wireframes are like blueprints in architecture. The purpose is to communicate the order, structure, layout, navigation and organization of content, and not the visual aspects of the design such as imagery, color and typography. For that reason, they are often done in black and white. The emphasis of wireframes are more on content than form. These are normally done before mockups.
Mockups communicate the visual aspects of the design that wireframes don’t. These include imagery, color and typography. When completed, you usually get a sense of what the design will look like pixel-for-pixel before it’s brought to life with programming and development. The emphasis of mockups are more on form than content. When the mockups are complete, they usually go to development for the necessary programming to bring them to life.
Form + Content = Design
Design is the synthesis of form and content. Wireframes bring together the content, while mockups bring together the form. Together they are the potent package of design. Every designer should know how to create both. Seeing a design evolve from wireframes to mockups is not just a sign that you’re progressing on the project, but that you’re progressing as a designer.