Mockup

A mockup is what a page will look like, drawn before anything is built. Real typefaces, real colours, real photographs and ideally real words, arranged exactly as they will appear, with nothing that actually works. It is the stage where a design becomes something a client can react to, and the last stage where reacting is cheap.

In short

• The appearance of a page, at full fidelity, before it is built.
• It follows the wireframe, which settled the structure.
• Static: nothing clicks, which is what separates it from a prototype.
• Review it for clarity and for the phone, not for colour preferences.

Where it sits in the sequence

Design work moves from cheap decisions to expensive ones, and the stages exist so that the cheap decisions get made first.

A wireframe comes first. It answers what the page contains and in what order, deliberately without appearance, so that nobody argues about colour while the structure is still open. The mockup comes next and answers what it looks like. A prototype, when a project needs one, comes after and answers whether moving between pages makes sense.

Skipping the wireframe is the common shortcut, and it produces a specific problem. Structural objections then arrive during the mockup review, where they are expensive. They also arrive dressed as opinions about the design, because a picture of a finished page is what the reviewer was handed.

What a mockup is for

Its real function is not decoration. It is agreement.

Two people describing a website in words will imagine different websites, and they will not discover this until something exists. The mockup is the first artefact concrete enough to disagree with, which makes the disagreement useful rather than a surprise three weeks into development. It also settles the visual hierarchy in a form somebody can argue with. And it forces decisions that words let you postpone. How long the heading actually is. Which photograph is being used. What happens to the second service when the first one has a longer name.

It is worth being clear about what it does not prove. A page that looks convincing as a picture can still fail as a page. Pictures do not have loading times, do not reflow, and never contain a very long product name.

Reviewing one properly

Most mockup reviews go badly for the same reason: colour is the easiest thing to have an opinion about, so that is what gets discussed.

Better questions, in order:

• Would a stranger know what this business does? Read only what is visible before scrolling and answer honestly.
• Is the main action the most prominent thing? Not present. Most prominent.
• What does this look like on a phone? Ask for it, because most of your visitors will never see the wide version.
• Is this real text? If it is placeholder, the page has not been written, and the design is being approved against content that does not exist.
• Where does the longest version break? The longest product name, the longest heading, the customer testimonial that runs to four lines.

Colour and typeface should already be settled by your brand guidelines, which is precisely why they should not be relitigated here.

The limits of a still picture

A mockup shows one page, at one width, in one state, at one moment.

A built page has many more states than that. Buttons have a hover appearance and a pressed one and a focused one. Forms have errors. Lists have an empty version for the day before anything has been added to them. Images sometimes fail to load. None of these appear in a still picture, and all of them are places where a site can look unfinished after launch despite the mockup having been approved.

This is the argument for a small set of mockups rather than a large one. Draw the page types, agree them, and spend the remaining attention on the states and the widths that a picture was never going to show you.

Words you will hear

• Fidelity. How finished something looks. Wireframes are low, mockups are high.
• Comp. An older word for the same artefact, short for composite.
• Prototype. A clickable version, used to test the journey rather than the appearance.
• Design system. The agreed set of components and styles, which is what lets later pages of a website skip the mockup stage.
• Lorem ipsum. Placeholder text, and a signal that the page has not been written yet.
• Redline. Annotations giving spacing and sizes so a developer can build it accurately.
• Product mockup. A different use of the same word, meaning a design shown in a realistic setting such as a logo on a shopfront.