Content rich text sectionsContent Large Image 04
Design

What is wireframing?

An introduction to wireframing and its principles. Learn from the best in the industry with tips, tools and practices from those in the know.

Olivia Rhye

Olivia Rhye

20 Jan 2027

A wireframe is an argument about hierarchy, made cheaply enough that you can be wrong twice before lunch. Everything else it appears to be — layout, spacing, copy — is a side effect.


Introduction

Wireframes exist because the alternative is arguing about a finished screen. Once a design has colour and photography in it, feedback drifts towards taste, and the structural question you actually needed answered goes unasked.

Strip those out and the conversation changes. People stop saying they dislike the blue and start saying they cannot find the thing they came for, which is the only feedback worth having at this stage.

Image from the Proper brand library

Keep the fidelity low enough that nobody mistakes it for a decision. Grey boxes and real words beat lorem ipsum and rounded corners every time, because the words are what people will actually read.

If a wireframe takes more than an hour, it has stopped being a wireframe and started being a design you are now emotionally attached to.

Olivia Rhye, Product Designer

Write the real copy first, even if it is wrong. Layout follows language far more reliably than language follows layout, and a heading you cannot write is usually a section you do not need.

Then test the smallest thing: give someone the wireframe and a task, and watch where they hesitate. Two people is enough to find the problems that matter at this fidelity.

Software and tools

Any tool works. Paper works. What matters is that the artefact is quick to throw away, because a wireframe you are reluctant to delete has already failed at its job.

If your team shares a component library, borrow only its spacing scale at this stage. Reaching for finished components pulls you into visual decisions you have not earned yet.

Other resources

Three habits carry most of the weight when you are starting out:

  1. Sketch three layouts before you refine one.
  2. Use real content, in the real quantity you expect to have.
  3. Show it to someone who was not in the room when you made it.
Image from the Proper brand library

None of this is unique to interface design. The same shape works for API design and org charts, because the constraint is identical: make the structure visible before it becomes expensive.

Start rough, get it wrong quickly, and keep the version that answered the question rather than the one that looked best.

Conclusion

A wireframe is a question, not a deliverable. If it does not have a question attached, it is decoration with the colour removed.

Teams that treat it that way move faster, because the arguments happen while the work is still cheap to change rather than the week before launch.

Write the question, sketch the smallest thing that answers it, and throw away everything that did not.

DesignResearch