Wireframing
Wireframing means sketching a deliberately plain layout of a screen to settle structure and flow before any visual design is applied.
Boxes, lines and placeholder text show where things sit, with no colour or styling. The plainness is deliberate, because it keeps the conversation on whether the layout makes sense rather than on which typeface to use.
Types
- Low fidelity. Boxes and lines, made in minutes and discarded without regret. Their value is exploring several structures instead of committing to the first.
- Mid fidelity. Real labels, approximate content, actual navigation. Detailed enough to communicate a specific direction. Most reviews happen here.
- High fidelity. Detailed and sometimes clickable, close to a mockup but still without final visual design. Appropriate once the structure is genuinely settled.
When to use it
Wireframe while the structure is still an open question, and stop once it is not.
There is a second benefit that is easy to miss. Rough artefacts get honest criticism. A polished mockup invites approval, because it looks finished and disagreeing with it feels like criticising someone's craft. A sketch invites people to say what is actually wrong.
Wireframes can also be usability tested. Paper is enough to reveal navigation and labelling problems long before anything is built.
Common mistakes
- Using placeholder text. Lorem ipsum hides the problems wireframes exist to reveal. Real headlines run long, real product names break layouts, and real empty states appear.
- Skipping straight to high fidelity. Working in colour anchors you to the first arrangement that looked good, which is rarely the best one available.
- Treating it as a deliverable. A wireframe is a thinking tool. If it is being polished for presentation, it has stopped doing its job.
Key takeaways
- Stay low fidelity while the structure is still in question.
- Sketches get honest feedback. Polished comps get polite approval.
- Use real content. Placeholder text hides the problems you are looking for.
- Wireframes can be tested with users before anything is built.
Learn this
Lessons and exercises mapped to this concept.
Common questions
- What is the difference between a wireframe, a mockup and a prototype?
- A wireframe shows structure, meaning what goes where, with no styling. A mockup shows the finished visual design but does not move. A prototype is interactive and is the only one that can test whether a flow actually works. Teams often skip to mockups, which means structural problems surface after the visual work is already paid for.
- Can I skip wireframing when working alone?
- You can, and it is usually a false economy. Wireframing is not a communication ritual. It is a cheap way to hold several structural options side by side before committing, and working straight in high fidelity tends to lock you into the first layout you made look good.
- Should wireframes include real content?
- Yes, or something close to it. Placeholder text hides exactly what wireframes exist to reveal, because real headlines run longer than expected and real data breaks tidy layouts. A structure that only works with neat filler does not work.