Wireframe
A wireframe is a low-fidelity layout of a screen that shows structure and hierarchy — where things go — without final visual design.
Wireframes are a thinking tool: they let a team agree on structure and flow before investing in polished visuals. They sit early in the path from idea to shipped product, keeping decisions cheap while they are still easy to change.
How it works
A wireframe uses boxes, lines and placeholder or real draft text to show what goes on a screen and in what order: navigation, headings, content blocks, forms and calls to action. Colour, imagery and final typography are deliberately left out, so feedback stays on structure, priority and flow rather than taste.
A set of wireframes linked together becomes a clickable prototype for testing a flow.
Example
Before designing a service page, a wireframe can settle the order of the answer, the proof, the price signal and the call to action. Moving the proof above the fold at this stage takes a minute; doing it after the page is designed and built takes a day.
Common mistakes
- Using lorem ipsum everywhere, which hides whether the real content fits.
- Adding visual polish too early, so reviewers debate colours instead of structure.
- Skipping mobile wireframes and discovering the layout problems in development.
