Wireframe for hierarchy before style

Ask an AI agent for a homepage and you get a styled one: a color, a font, a gradient, a stock photo. Then the review turns into an argument about the gradient, and nobody notices the prices are buried at the bottom.

So solve the structure first, on purpose, before any style exists. Here's the same homepage in gray, with the bakery's real copy. Style gets in the way of these decisions. A gray page keeps everyone looking at the order.

Keep it deliberately unresolved. Grayscale, the system font, no brand color, and boxes labeled with what each image will show. The copy, though, is real, because hierarchy depends on what the words say and how long they are. Lorem ipsum hides both. Sketch on paper, draw boxes, or have an agent build a rough structural page, as long as it lives somewhere separate from the production site.

Now number everything in the order you want it read. Number one is the dominant element. For the bakery, that's the photo of the morning queue, then the headline under it, then the button, then today's bread, then the visit details.

Then test it. Step back from the screen, or blur it, and see what your eye lands on first, then second. Here's a draft where the bread list is set big and dark. Blur it, and the list lands first. The numbers didn't hold. Make the list quieter and squint again. The photo wins, then the headline. Better still, show it to someone for five seconds and ask what the page is about.

If you'd rather have an agent build the rough page, tell it what to leave unresolved, as plainly as this. Without those lines it will reach for a color and a typeface, because that's what a finished-looking page has. Pointing it at the manuscript keeps the real copy in. Pointing it at a separate folder keeps the sketch out of the site, so nobody can mistake it for the start of the build.

Reading order isn't only visual. A screen reader follows the order the page is written in the code, and WCAG asks that the reading sequence can be worked out correctly wherever order affects meaning. So the code says the same order, and at phone width the slots stack in that order too. Decide it here and the build can follow it.

The wireframe's done when each page type has one dominant element, every slot from the content model is placed and numbered, the copy is real, and someone who isn't you reads it in the order you meant. Then style has something to serve.

Decide what the eye hits first and what it reads next while the page is still gray. Style comes after, and it has to keep that order.