Most UX designers make a variety of deliverables on a project. They make ones that communicate user research. And they make ones that communicate user experience design. But wireframes & mockups are the most powerful deliverables UX designers can make.

They are the most important deliverables for the following reasons:

They’re easy for clients to understand.

They communicate vision and expectations.

They inform the user interface.

They are the most actionable.

They create the most change & impact.

They allow for easy discussion & collaboration.

They track the progress you’re making.

It’s a waste when designers spend so much time and effort focusing on other deliverables. You should spend most of your time on wireframes and mockups.

It’s useful to do user research, but not user research deliverables. At the end of the day, only a few people will give your user research deliverables much attention. No real change or impact happens because they are not actionable. In other words, they don’t offer a practical solution to the problem.

If you want to solve a design problem and communicate the solution, wireframes and mockups are the way to go. They set a vision, inspire change and clarify understanding. No other deliverable does that as effective.

Wireframes

Wireframes are like blueprints in architecture. The purpose is to communicate the order, structure, layout, navigation and organization of content. It’s not to communicate visual design aspects such as imagery, color, and typography. For that reason, they are often done in black and white. The emphasis of wireframes is more on content than form. Designers always do these before mockups.

Mockups

Mockups communicate the visual design aspects that wireframes don’t. These include imagery, color, and typography. They give you a sense of what the design will look like pixel-for-pixel before it’s brought to life. The emphasis of mockups is more on form than content. When the mockups are complete, they go to code and development 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. Evolving a design from wireframe to mockup is a beautiful sight to see. It’s not just a sign that you’re progressing on a project, it’s a sign that you’re progressing as a UX designer.

Toolkits