Wireframe
An outline of a screen or page that shows what it contains, in what order and how you navigate it, without the final visual design.
What it’s for
It helps decide the structure and priority of each screen before spending time on colors, type and images.
Key elements
Structure, not looks
It shows what goes where, in grays and boxes, so the conversation doesn’t drift to color.
Real content
With real or realistic text, you see sooner when something doesn’t fit or isn’t clear.
From low to high fidelity
First by hand and fast; more detail only once the structure is clear.
How it’s done
List the content and actions the screen needs.
Draw them as boxes in order of importance, including navigation.
Review them with others and adjust before moving to visual design.
Applications in design
When to use it
When you need to agree on what goes on each screen and in what order, before visual design.
Avoid
Presenting a wireframe so polished that people comment on color instead of structure.
Don’t fall for it
A wireframe doesn’t test interaction; for that, link the screens in a prototype.
Connections
Authors and works
- 2002
Jesse James Garrett
Placed it on the skeleton plane of the experience, where interface design, navigation design and information design come together.
Sources
Original sources
- Garrett, J. J. (2002). The elements of user experience: User-centered design for the web. New Riders.
Last reviewed: