What is a Mockup?

The wireframe is a skeleton. The prototype shows the behavior. The model is the skin.

This article explains why mockups are just as important as wireframes and prototypes, and how to choose the right method.

What is a mockup?

Medium to high fidelity mockups generally reflect color schemes, layouts, typography, iconography, navigation images, and design options for the overall mood of the product.

In addition to giving you time to answer important visual questions, mockups have several other benefits.

Intuitive for Stakeholders:

High fidelity requires mockups to require less context than low fidelity documents such as wireframes. Stakeholders can see the final product more easily.

Realistic perspective:

Making all the visual decisions is one thing, but making sure everything works together realistically is another. The replica helps reveal problems that are less visible on paper (for example, color conflicts and small types of crimes that are ignored).

Initial revisions:

Unless the mockup itself is coded, it is easier to do revisions to the mockup than later coding stages.

In the design process, mockups occur at the end of the low-fidelity phase and at the beginning of the high-fidelity phase. This can mean different methods. For example, a mockup can be created immediately after the wireframe or postponed until testing of the low-fidelity prototype is complete.

However, we also recommend testing when migrating from low fidelity to high fidelity. Big picture concepts such as navigation and flow are difficult to change with high fidelity and should be repeated before jumping into the hi-fi mockup.

Consider the following tips, as described in the free mockup guide.

Narrow down the concept: The reason mockups come after wireframe is that you need to eliminate other holistic options first. If you are unsure of the navigation structure, do not create mockups for both versions. Please decide which one first.

Get to know your competitors’ products – Before deciding on your own images, see what your competitors are up to. However, do not copy them. Look for areas for improvement or the user interface pattern that users want in all products of this type. A simple heuristic review will help you quantify your observations.

Next, let’s look at the specific areas in which the mockups work.

Model structure

Simply put, the structure of a UI mockup should be the same as the page structure it represents. In summary, during the mockup phase, you should consider the following:

Content layout:

How content is displayed, such as F or Z patterns, cards, and text. You should also consider the size of each content and the amount of content you want to fit on the screen at the same time.

Contrast:

Use the Color Contrast tool to test the readability of the text against the background. You can also use color contrast to increase the visibility of behavioral phrases and other elements.

Use of color:

Colors evoke a variety of emotions, the effects of which change depending on the surrounding colors. For more information, see the free e-book Web User Interface Design for the Human Eye (Volume 1).

Typography:

Mockups allow you to examine typography sizes, fonts, styles, and spacing, not to mention structural usage for consistency, such as the style of captions. Mark Boulton offers general advice on typography.

Spacing:

Negative spaces are not empty spaces to fill, it is a powerful design element. The correct amount of sky improves user understanding and readability and acts as a powerful tool in the visual hierarchy. The more negative space around an element, the more striking it is.

Navigation Images – Now that your information architecture needs to be complete, you need to consider what it looks like. For example, if you have a drop-down menu or drawer, you can dive into details like color, spacing, typography, and order.

Two Types of mockups

Mockup tools can be divided into three different types: graphic design software, mockup apps, and coded mockups, each with its own strengths and weaknesses.

Graphic design software

Due to its visual approach, some designers prefer to create mockups with their more familiar graphic design software. Software like Photoshop is designed to create pixel perfect images.

The downside is that these programs cannot add interactions to the mockups (so I decided to integrate them with Photoshop and Sketch).

Another drawback is that you need to know how to use the software. This is often tricky because it is designed not only for creating mockups, but also for more visual manipulation. Graphic design software can be overkill unless the mockup requires the highest fidelity possible.

Mockup app

Tools created specifically for digital product design, such as the UX Pin and Sketch applications, build on the existing experience of traditional tools such as Photoshop.