Post Image

What Is a Mockup: The Final Layer of UI Design

Jerry Cao
By Jerry Cao on 3rd February, 2016 Updated on 18th June, 2018

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.

image01

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.

Join the world's best designers who use UXPin.

Sign up for a free trial.

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.  
  • 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). 

image03

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.

Mockup Apps

Tools created specifically for digital product design, like our app UXPin or Sketch, build upon existing experience with classic tools like Photoshop.

image00

Photo credit: Creating Quick Wireframes & Mockups

Code

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.

Join the world's best designers who use UXPin.

Sign up for a free trial.

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.

Additional Advice

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.

You also get the Guide to Wireframing and The Ultimate Guide to Prototypes for a total of 350 pages. The advice draws from real examples from companies like Google Venture, Apple, and others.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Jerry Cao

by Jerry Cao

Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you