Why we wireframe in grey

There is a predictable moment in a redesign where somebody says they love the new direction, and what they mean is that they love the photograph in the hero. Nothing about the structure has been agreed. The project proceeds anyway, and the structural problems surface in build, where they are expensive.

Colour is a very effective anaesthetic

A polished visual makes a bad hierarchy feel resolved. Reviewers stop asking whether the second section should exist and start discussing whether the accent is too warm. Both conversations are worth having, but only one of them is load bearing, and it has to come first.

Greyscale removes the anaesthetic. When a wireframe is grey boxes and real sentences, the only thing left to react to is the argument the page is making.

Real copy, not placeholder text

Wireframing in grey only works if the words are real. Latin filler hides the two problems you most need to find: that the headline does not fit in two lines, and that nobody knows what the third section is for.

We write the actual copy at wireframe stage, or as close to actual as we can get. It is slower for a week and considerably faster afterwards.

What we are looking for

Three questions, in order. Does the page answer the question the visitor arrived with, in the first screen? Is there exactly one obvious next action? Could a section be deleted without the page losing anything?

That last one is the useful one. A wireframe review that does not remove something has usually not been a review.

Then the visual stage is quick

Once structure is settled, surface design moves fast, because every decision has a reason to point at. The hierarchy already exists; type, colour and imagery are making it visible rather than inventing it.

Clients occasionally find the grey stage frustrating, and we understand why. It is worth saying at the outset that it is deliberate, and that the pretty version arrives sooner because of it.