A mockup is a picture of a product. It has no scroll, no keyboard, no slow network, no content that ran long. Every one of those arrives later, and by then the person who drew the picture has usually moved on.
The mockup lies in four specific ways
- Length — the client name is eight characters in the mockup and thirty-two in the database
- Motion — a static frame cannot show you that a transition is 200ms too slow
- Between sizes — three artboards say nothing about the 400px of width where the layout actually breaks
- State — empty, loading, error and disabled almost never get drawn, and they are most of the product
None of these are drafting mistakes. They are things the medium cannot represent, which is why more careful mockups do not fix them.
What we do instead
We still draw. Direction, type, colour and layout are settled in a design file, because that is the fastest place to be wrong cheaply. But the moment a route is chosen, it moves into the browser and the design file stops being the source of truth.
From the second week of a build, every review is a URL. The client sees the real thing on their own laptop, at their own window size, with their own content in it. Feedback arrives as this feels slow and this wraps badly on my screen, which are the notes worth having.
If the engineers only see the work after it is approved, you have not designed a product — you have specified one and hoped.
What it asks of the team
Designers need to read the markup even if they never write it. Engineers need to be in the review, not downstream of it. And the studio has to accept that the file which looked perfect on Tuesday is not the deliverable — the build is.
The measurable part
On our last four product engagements the change was consistent: the number of visual defects raised after handover fell to a handful, because the state where a defect would have appeared had already been looked at in a browser by the two people who would otherwise argue about it.
The mockup is still useful. It is just not the deliverable, and treating it as one is what puts a year of drift between the design and the product.
.svg)
