Wireframe

A low-fidelity skeleton of a screen focused on structure, not visuals.

Enter to send

A wireframe is a stripped-back layout that shows where content, controls, and navigation go — without colour, imagery, or final styling. It lets teams agree on structure and priority fast and cheaply, before investing in high-fidelity design.

Wireframes range from rough sketches to tidy greyscale layouts. Their job is to answer 'what goes where and why', leaving 'how it looks' to later stages.

Key characteristics

Deliberately low-fidelity — greys, boxes and placeholder text — to focus on structure not style.
Cheap and fast to change, so ideas can be tested before expensive visual design.
Ranges from rough sketches (low-fi) to detailed greyscale layouts (mid-fi).
Communicates layout, hierarchy and content priority to stakeholders early.

Example

Before designing a pricing page, a wireframe blocks out three plan columns, a feature table and a FAQ — letting the team agree on structure before colour, type and imagery are decided.

Frequently asked questions

What is the difference between a wireframe and a prototype?

A wireframe is a static layout blueprint focused on structure. A prototype is interactive and simulates real behaviour — clicking, navigating, transitions — so flows can be tested.

Should wireframes use real content?

Realistic content beats lorem ipsum where possible, because real labels and copy lengths reveal layout problems that placeholder text hides.