The usual approach is to build the visual design and then desaturate it for stakeholder review. It looks like a wireframe. It answers none of the questions a wireframe exists to answer, because every structural decision was already made in service of how the thing looked.
What is a wireframe actually for?#
To make the structural argument visible and cheap to reject. What is the most important thing on this page? What is second? What can be cut without the page failing? Those questions are far easier to answer in boxes than in a comp that already has good photography in it.
Nobody argues with a layout that already looks finished. That is the problem, not the goal.
Constraints that make wireframes work#
- Two greys and one accent, maximum.
- One type size for headings, one for body — hierarchy comes from position and mass.
- No photography, ever; a grey box with a diagonal is enough.
- Real copy length, not lorem ipsum — length is a structural fact.
That last one is the one teams skip and the one that matters most. Lorem ipsum is uniformly average length, so it hides every place where the real headline is nine words too long for the space you gave it.
