Skip to content
UX Atlas
WorkflowCraft conventionFoundational

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 page
  1. Definition
  2. What each fidelity answers
  3. Keeping it cheap
  4. Continue from here

What each fidelity answers

FidelityAnswersCannot answer
Paper or whiteboardDoes the sequence make sense? What is on each screen?Anything about readability, density or emotion.
Greybox wireframeIs the hierarchy right? Does the content fit?Whether it looks trustworthy, or how it reads at real sizes.
High fidelityDoes it read, does it feel right, does the type work?Whether the flow is correct. That should be settled already.
Working prototypeDoes 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.

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.