Wireframing
Work out structure and priority while changes are still cheap, and stop before the fidelity starts answering questions you have not asked.
Definition
Wireframing explores layout, hierarchy and content structure without committing to visual design. Its purpose is speed of iteration, which means it stops being useful the moment it starts taking as long as the real thing.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Exploring structure for a new screen or flow.
- Comparing several layouts quickly.
- Before committing a component library to a layout decision.
- The structure of a page is disputed and the conversation keeps sliding into visual design.
Common mistakes
- Placeholder text hiding a real content problem.
- Wireframes polished until they cost as much as the final design.
- Only the full state drawn.
- Polishing a wireframe until it reads as a design, at which point it stops attracting structural criticism.
What each fidelity answers
| Fidelity | Answers | Cannot answer |
|---|---|---|
| Paper or whiteboard | Does the sequence make sense? What is on each screen? | Anything about readability, density or emotion. |
| Greybox wireframe | Is the hierarchy right? Does the content fit? | Whether it looks trustworthy, or how it reads at real sizes. |
| High fidelity | Does it read, does it feel right, does the type work? | Whether the flow is correct. That should be settled already. |
| Working prototype | Does the interaction feel right under real data? | Whether people can complete the task at scale. |
Keeping it cheap
Do
- Use realistic content lengths, including the longest name and the empty case.
- Wireframe the empty, loading and error versions of a screen, not just the full one.
- Sketch several layouts before refining any of them.
- Move to higher fidelity as soon as the structural questions are settled.
Do not
- Do not use lorem ipsum. Content length is one of the things you are testing.
- Do not spend time on alignment that a real component will handle.
- Do not present wireframes to stakeholders who read grey boxes as an unfinished visual design. Say what they are for first.
- Do not skip straight to high fidelity because the tool makes it easy. The cost is the reluctance to throw work away.
Getting the structure settled
- 1
Write the content before drawing the boxes
The real headline, the real label, the longest plausible value. Layout that fits invented content is a layout for invented content.
- 2
Rank the page before arranging it
List what is on the page in order of importance. If two things tie for first, the page has two purposes and probably should not.
- 3
Draw the narrow width first
A single column forces the ranking to be honest. Widening it later is easier than rescuing a layout designed at desktop width.
- 4
Do several, quickly
One wireframe is a proposal that invites approval. Three are a comparison that invites a decision.
- 5
Stop when the argument moves to styling
That is the signal that structure is agreed and the wireframe has done its job.
In practice
- i.
Greyscale as a hierarchy test
Why it stays greyIf the most important element on the page is not obvious without colour, it is being carried by colour alone, which fails for a portion of readers and in every printed or low-contrast context.
Local chart
FLOW·010 · Region IV · Grid H2
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.
Related concept
Connected closely enough to change how you apply this.
- Empty StatesPAT·010 · Pattern
- Visual HierarchyFND·001 · UI foundation
- Design CritiqueFLOW·001 · Workflow
- IdeationFLOW·008 · Workflow
- Prototyping FidelityFLOW·005 · Workflow
- User FlowsFLOW·009 · Workflow