Wireframe

A wireframe is a low-detail layout of a page that shows structure and hierarchy — what goes where and in what order — before any visual design. It settles the plan cheaply, before colour and type raise the cost of change.

A wireframe is a deliberately plain layout of a page — boxes, labels, and placeholder text — that works out structure and hierarchy before anyone picks a colour or a typeface. It answers the cheap-to-change questions first: what’s on the page, what order it’s in, and what the visitor should notice and do.

Skipping this step is where projects get expensive. Rearranging a wireframe takes minutes; rearranging a fully designed, built page takes days. By settling the plan while it’s still just structure, the visual design phase can focus on making a resolved layout beautiful rather than discovering, late, that the page was organised wrong.

It sits early in our website process, right after discovery. See where it fits in how we build a website.

Quick recall

What is a wireframe? A low-detail page layout showing structure and hierarchy before visual design.

Why wireframe first? Changing structure is cheap on a wireframe and expensive on a built page.

What does it decide? What’s on the page, its order, and what the visitor should notice and do.