Wireframe
A rough sketch of what goes where.
Definition
A low-fidelity representation of layout and content priority, deliberately excluding visual styling.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
A rough sketch of what goes where.
Example
Grey boxes and placeholder text used to agree structure before anyone argues about colour.
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.
Mockup
TermA high-fidelity static rendering of the intended visual design.
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 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.
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.
Local chart
TERM·039 · Region X · Grid C6
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.
Deeper reading
The full entry behind this definition.
- CompositionFND·014 · UI foundation
- Prototyping FidelityFLOW·005 · Workflow
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.