The Final Layer of UI Design

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.

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.

By Jerry Cao

Types of Mockups

 

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.

Mockup Apps

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

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.