by anthony on 08/17/10 at 8:16 pm
In user experience design, there are a variety of deliverables that a typical UX designer generates. They can include personas, process flows, site maps, concept maps, heuristic evaluations, user scenarios, content inventories, and etc. While these deliverables are fashionable in their own way, there is one set of deliverables that outshine the rest. They are WIREFRAMES & MOCKUPS.
These deliverables are the most important deliverables of all deliverables for the following reasons:
- They are easy for clients to understand.
- They realistically communicate vision and expectations.
- They directly relate to actual design.
- They are the most actionable.
- They create the most change & impact.
- They allow for easy discussion & collaboration
- They track the progress being made.
I’m always baffled when people spend so much time and effort focusing on the other deliverables that make little to no impact. Designers spend hours perfecting them, but at the end of the day when you’re finally done a few people will give your work a glance and move on with their lives. No real change or impact happens. Deliverables aren’t something to look at and put on a shelf. Their purpose is to inspire change and action. If you want to solve a design problem and communicate the solution effectively and efficiently, 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 great designer should know how to create both. Seeing a design evolve from wireframes to mockups is surely a great pleasure for any designer. I know it is for me.