Why we wireframe before we design

Almost every site we build goes through a grayscale stage first — no colour, no photography, no final typefaces. Just boxes, hierarchy, and the actual words. Clients are sometimes surprised by this. It looks unfinished, because it is.

That is the point.

Structure decided on its own terms

A layout can be wrong in ways that good visual design will happily disguise. Put a strong photograph and a confident headline on a page and it reads as convincing, even when the underlying order of information makes no sense for the person reading it.

Stripping the page back to grayscale removes that cover. What is left is the sequence: what someone sees first, what they need next, and what they are meant to do at the end. If that sequence does not work in plain boxes, it will not work in colour — it will just be harder to see that it is broken.

Cheaper to change

Moving a section in a wireframe takes minutes. Moving it after the page has been designed, photographed, and built means redoing all three. Front-loading the structural argument keeps the expensive work for decisions that are already settled.

Layout and hierarchy resolved in grayscale, so structure gets decided on its own terms.

What this looks like in practice

• Discovery — a conversation about the business, the audience, and what the site actually has to do.
• Sitemap — what pages exist and how they relate.
• Wireframes — layout and hierarchy, reviewed and agreed before anything gets styled.
• Design — only once the structure is settled.

By the time a design gets its first colour, the hard arguments have already been had. That tends to make the visual stage faster, and it makes the result easier to defend — every decision on the page is there for a reason somebody can articulate.

If you are weighing up a project and want to talk through what it needs to do, get in touch.