Wireframing
Sketching the structure of a screen — what goes where, at what priority — deliberately without colour, type or imagery.
Process & MethodsA wireframe answers layout and hierarchy questions: what is on this screen, what is primary, how is it grouped, what happens below the fold. Stripping out visual design is the point. Feedback on a grey-box layout is about structure, whereas the same layout in full colour reliably produces feedback about the colour.
Wireframes are cheap and disposable, which makes them the right place to be wrong. They come after user flows have established the sequence and before mockups commit to a visual direction. Skipping them tends to mean structural problems get discovered once someone has spent two days on a polished screen and is reluctant to throw it away.
In practice
A pricing page was wireframed three ways in an afternoon and reviewed on a call. Before: the team had spent a week iterating one high-fidelity version. After picking a structure from grey boxes first, the polished version took a day and needed no structural rework. The catch — stakeholders found the wireframes hard to judge and needed reminding what they were for.
Learn more
You may ask
Frequently Asked Questions
Should wireframes be low or high fidelity?
Low, on purpose. Grey boxes and placeholder labels keep the conversation on structure. Once you add real type and colour you have a mockup, and the feedback changes accordingly.
Can we skip wireframes?
On a small change with an established pattern, yes. On a new screen or a new flow, skipping them usually moves the structural argument to a point where somebody has already invested in a visual direction.
Related terms
All terms- MockupA static, high-fidelity representation of a screen showing final visual design — real colour, type, imagery and content — but without interactivity.
- PrototypingBuilding a simulated version of a product or flow — from paper to clickable to coded — in order to test an idea before committing to it.
- User FlowA diagram of the path a user takes through an interface to finish one task, including every decision point, branch and error state.
- Information ArchitectureThe structure of a product's content and navigation — how things are grouped, labelled and related so people can find what they need.
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us