Mockup
A picture of what it will look like, but you cannot click it.
Definition
A static, visually complete representation of an interface.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
A picture of what it will look like, but you cannot click it.
Example
A full-colour screen design used for visual review before prototyping the interaction.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Wireframe
TermA low-fidelity layout showing what goes where and what matters most.
Key difference
A wireframe argues about structure and priority, deliberately without visual design. A mockup shows the finished surface. Reviewing a wireframe for colour, or a mockup for hierarchy, wastes both.
Use Mockup when
- Structure is settled and the surface is being decided.
- The review is about type, colour, spacing and states.
- It will be handed to someone to build.
Use Wireframe when
- The argument is about content, order and grouping.
- You want cheap changes and honest criticism.
- Visual polish would stop people questioning the structure.
Local chart
TERM·040 · Region X · Grid D5
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.