Wireframe

What it means

A wireframe is a schematic of a page or screen: what sits where, what matters more and which steps the user takes. Colours, photographs and final copy are deliberately absent.

That keeps the discussion on structure rather than the shade of a button. Changing a wireframe costs an hour; changing a built screen costs days.

A wireframe is not a visual design, a prototype or an MVP. A visual design shows how the screen will look, a prototype can be clicked through, and an MVP actually works for its first users. The wireframe comes before all three: it answers only what should be on the screen and in what order.

How it works in practice

For a bespoke system the wireframes walk through a user’s ordinary working day first. That reveals what they actually need and what was merely a wish from the first meeting.

For a landing page the wireframe fixes the order of the arguments and the place of the call to action. Only then is it worth writing final copy and designing.

For an order form at least two wireframes are drawn, one for mobile and one for desktop. On a phone the columns stack, and what sat side by side on a desktop is suddenly several scrolls apart. Only once it is clear what belongs at the top of the small screen is it worth working out the responsive design in detail.

What to watch out for

Skipping the wireframe and going straight to design looks faster but costs more. The client approves a look before anyone knows what the screen must do, and the changes arrive during testing.

The wireframes show only the ideal state: a full list, a correctly filled form, a successful payment. The empty list, the error message and the wait for a response are missing, and the developer invents them, each one differently. The result is inconsistent UX and fixes that get paid for only after launch.