Wireframes are the skeleton. Prototypes demonstrate the behavior. Mockups are the skin.
In this article, we’ll explain why mockups are just as important as wireframes and prototypes, and how to choose the right method.
What is a Mockup?
Typically mid to high fidelity, mockups reflect the design choices for color schemes, layouts, typography, iconography, the visuals of navigation, and the overall atmosphere of the product.
In addition to setting aside time to answer the important visual questions, mockups have several other benefits:
- Intuitive to stakeholders — Thanks to their higher fidelity, mockups require less context than lo-fi documents like wireframes. Stakeholders can more easily see the final product.
- Realistic perspective — It’s one thing to have all your visual decisions made, but it’s another to see them all working together in a way close to the real thing. Mockups can help reveal problems that aren’t so apparent on paper (for example, color clashes, or smaller type crimes going unnoticed).
- Early revisions — It’s easier to make revisions in a mockup than in the later coding stages (as long as the mockup itself isn’t coded).
In the design process, mockups come at the end of the lo-fi phase and the beginning of the hi-fi phase. This could mean different things for different methods — for example, a mockup could be made immediately after wireframing, or could be postponed until after some lo-fi prototype testing.
We also recommend testing when transitioning from lo-fi to hi-fi, however. Big picture concepts like navigation and flow are harder to change in high fidelity, and so should be iterated before you dive into a hi-fi mockup.
Photo credit: Sketch App
As explained in the free Guide to Mockups, keep these tips in mind:
- Narrow your concepts — The reason mockups come after wireframing is that you first need to eliminate other big picture options. If you’re unclear about the navigation structure, don’t make mockups for both versions — decide one first.
- Examine competitor products — Before deciding your own visuals, take a look at what your competitors are doing. Don’t copy them, though — look for areas that you can improve upon, or UI patterns that users would want on all products of this type. A quick heuristic review can help quantify your observations.
Next, we’ll look at what specific fields the mockup tackles.
Terms of Service apply.
Anatomy of a Mockup
In the simplest terms, the anatomy of a UI mockup should be identical to the makeup of the page it represents. That means during the mockup phase, you should consider:
- Content Layout — How the content is displayed, such as F-pattern or Z-pattern, cards or text. You should also consider the size of each piece of content, and how many you want to fit on the screen at a time.
- Contrast — Use a color contrast tool to test the legibility of your text against your background. You can also use color contrast to increase the visibility of some elements like calls-to-action.
- Color Usage — Colors evoke different emotions, and their effects change based on surrounding colors. You can check out the free ebook Web UI Design for the Human Eye (Vol.1) for more detail.
- Typography — Mockups let you explore your typography size, font, style, and spacing, not to mention structural usage for consistency, like how to stylize captions. Mark Boulton gives some general typography advice.
- Spacing — Negative space is not empty space to be filled — it is a powerful design element. An appropriate amount of emptiness improves user comprehension and legibility, and acts as a powerful tool in visual hierarchy. The more negative space around an element, the more the eye is drawn to it.
- Navigation Visuals — By now the information architecture should already be finished, so you just need to consider how it will look. For example, if you have a pull-down menu or drawer, you can now dive into details like color, spacing, typography, and order.
3 Types of Mockups
We can divide mockups tools into three different types — graphic design software, mockup apps, and coded mockups — each with their own advantages and disadvantages.
Graphic Design Software
Because of the emphasis on visuals, some designers prefer to build mockups in the graphic design software they’re most familiar with. Software like Photoshop is built to create pixel-perfect images.
The downside is that these programs don’t allow you to add interactions to your mockups (which is why we decided to integrate with Photoshop and Sketch).
Photo credit: Turning Photoshop Mockups Into Interactive Prototypes
The other downside is that you need to know how to use the software, which is usually complex since it’s designed for more visual manipulation than just creating mockups. Unless your mockups require the highest fidelity possible, graphic design software can be overkill.
Photo credit: Creating Quick Wireframes & Mockups
Coded mockups are an efficient way to save time and resources provided you’re technically confident. There’s also no surprises later on — if a visual element cannot be created in code, it is simply fixed right then and there.
Unless you’re extremely proficient, you’ll likely be able to explore more concepts in a specialized tool than in code.
Terms of Service apply.
Collaborating with Developers on Mockups
UI mockups are one of the most important documents for developers because it’s where they determine how to create the visuals, or even if they’re possible. Here are some tips to help smooth the collaboration and handoffp rocess:
- Explain pieces using atomic design — Brad Frost’s Atomic Design breaks everything into small components, so you can better communicate your ideas.
- Point out interactive and animated elements — Because mockups are static, motion and interactivity aren’t always evident at a glance. Specifically point them out so you can know as early as possible if there will be any difficulty in the back-end.
- Understand development basics — Web design is not a silo. Knowing the basics of the other departments — not just development, but also marketing, sales, research, etc. — just creates a better project. If you know a bit about what they developers do, you can have more productive conversations about what’s in the mockup.
For more collaboration tips, check out the free pocket guide Building UI Mockups Developers Won’t Hate.
For a more thorough treatment of mockups — as well as wireframes and prototypes — download the free UX Design Builder’s Bundle.
The bundle contains our popular Guide to Mockups, a complete ebook full of best practices for UI mockups.
Terms of Service apply.