Mockup
A static, high-fidelity representation of a screen showing final visual design — real colour, type, imagery and content — but without interactivity.
Deliverables & ArtifactsA mockup sits between a wireframe, which shows structure in grey boxes, and a prototype, which shows behaviour. It is the artefact for reviewing visual decisions: whether the hierarchy reads, whether the brand is applied correctly, whether the density is right. Because it is static, it cannot answer questions about flow.
The most common mistake is reviewing mockups with placeholder content. Lorem ipsum and evenly sized names hide every real problem — the six-word button label, the empty state, the customer whose company name is fifty characters. A mockup with realistic worst-case content is a genuinely useful review; one with tidy fake data mostly produces false confidence.
In practice
A dashboard was approved from mockups with four-character metric labels. Before: live data arrived with labels up to twenty-eight characters and every card broke. After redoing mockups with the longest real labels pulled from the database, the layout survived launch. The catch — the honest version looked worse in the investor deck.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a mockup and a prototype?
Interactivity. A mockup is a still image of the finished look; a prototype responds to input so you can test whether a flow works. You review a mockup and you test a prototype.
Should mockups use real content?
Yes, and specifically the awkward real content — longest names, empty lists, failed states, biggest numbers. Placeholder text makes every layout look like it works and defers the problems to engineering.
Related terms
All terms- WireframingSketching the structure of a screen — what goes where, at what priority — deliberately without colour, type or imagery.
- PrototypingBuilding a simulated version of a product or flow — from paper to clickable to coded — in order to test an idea before committing to it.
- Visual DesignThe craft of composition, colour, typography and imagery — how an interface or asset looks, and what that appearance communicates.
- UI DesignThe design of what a user sees and operates — layout, type, colour, iconography and the visual states of every control.
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us