Mockup

A mockup shows the finished appearance of an interface: real colour, typography, spacing, imagery and content, without interactivity. It sits between a wireframe, which is deliberately unfinished, and a prototype, which behaves.

What it is good for

Settling visual questions. Hierarchy, density, tone, whether the brand works at this size, whether the type scale holds with real content. These are hard to judge from a wireframe and easy to judge from a mockup.

It is also what most stakeholders mean when they ask to see the design, which is worth knowing because presenting a wireframe to that question reliably produces disappointment.

Its limits

A mockup cannot show behaviour, and behaviour is where most product problems live. It shows one state of one screen, usually the state with ideal content: the right name length, three items rather than nought or four hundred, no errors.

This is the origin of a familiar handover problem. A design approved as a mockup has not been asked what happens when the list is empty or the title is 90 characters long.

In practice

Mockups earn their cost when paired with the awkward states. One mockup of the happy path plus three of empty, error and overflow says far more about whether a design works than five of the happy path.