Mockup
A mockup is a high-fidelity, static visual of a screen that shows how the finished product will look (real colors, typography, spacing, imagery, and branding) but is not interactive. It’s the middle of the fidelity spectrum: more detailed than a Wireframe, but not yet clickable like a Prototype.
Mockups are what stakeholders usually react to emotionally (“that looks great / off-brand”), because for the first time the screen looks real.
Also known as
mock · mock-up · hi-fi / high-fidelity design · visual comp · “comp” (short for composition, a print-design carryover)
Don't confuse with: the fidelity spectrum
- Wireframe: structure only, low detail, no styling, static.
- Mockup: full visual design, high detail, styled, still static. (this article)
- Prototype: interactive/clickable.
Mnemonic: wireframe = skeleton, mockup = skin, prototype = it moves.
The single most useful distinction: a mockup shows what it looks like; a prototype shows how it behaves. A mockup you can’t click.
In plain English
A picture of the finished screen: looks real, but nothing happens when you tap it.
What one looks like
The same landing page as the wireframe, now with the “skin” applied: real color, typography, a brand button, and imagery in place of the grey boxes. Still just a picture, though, nothing here clicks.
Where it fits
Mockups come after wireframes in the design phase: once the layout is agreed, visual designers apply the look and feel. They’re often assembled from a design system (a reusable library of styled components). Common tool: Figma.
See also
- Wireframe · Prototype: the rest of the fidelity spectrum
- Software development life cycle
References
- Wikipedia, Mockup. https://en.wikipedia.org/wiki/Mockup