A field guide to the website design process — sitemaps, wireframes, content freezes, and the moment it finally looks like a real site.
Your designer sends a link to review wireframes. You click it, and what loads looks like a black-and-white outline of a website: boxes, gray rectangles where images should be, dummy text standing in for real copy. No color anywhere. Your first thought is usually some version of: is this… it?
It’s not a bug. It’s the point. A wireframe is a blueprint, not a preview — and mixing up the two is the single most common reason website feedback goes sideways.
To make sense of it, along with the handful of other terms that show up during a website design process, we use the metaphor of building a house: a sitemap is the floor plan, a wireframe is the blueprint, and a visual comp is picking out your paint and tile. Here’s each one, in order.
What is a sitemap?
Think of a sitemap as the floor plan seen from above — you know there’s a kitchen, there’s just no fridge in it yet. Information Architecture (IA) is how information gets organized, structured, and labeled across your whole site, and a sitemap is IA’s first visible output: every page, laid out on one page, so the full hierarchy is visible at a glance.
If you’re reviewing a sitemap and a page is missing, or living in the wrong spot, that’s the moment to say something. Not after you’ve approved it and moved into copywriting and wireframes.
When should you actually write the website copy?
Content-first, not design-first. The copy that guides a visitor toward buying, subscribing, or reaching out should shape the layout — not get squeezed into a layout that was built without it. There’s natural back-and-forth between the copy and the wireframes, but a solid draft gives a designer something real to organize the page around, instead of guessing with placeholder text and hoping it fits later. Once that draft exists, it gets built directly into the wireframes.
What a wireframe actually is
If the sitemap is the floor plan, the wireframe is the blueprint: the actual layout of content on a page, kept deliberately low-fidelity so nobody starts arguing about button colors before the structure is even right.
When you’re reviewing one, think like a visitor, not a stakeholder. You can’t click through most wireframes, but you can still trace the path: where’s the call to action, and what’s the obvious next step from here? This is also the best moment to plan for accessibility and ADA compliance — it’s far easier to build inclusively from the start than to retrofit a finished site later.
For most clients, this is the first time content shows up in actual context — not as a paragraph in a shared doc, but sitting inside the page it’s meant to live on. That’s exactly why it matters: the copy and the layout have to work together to move someone toward action, and that starts with actually knowing who they are and what you want them to do.
What’s a content freeze (and why it’s not optional)
Once wireframes are approved, expect a content freeze: no more tinkering with the copy. That’s the direct consequence of content-first design — if the words keep changing after a layout’s been built around them, the whole project stalls. Minor corrections are still fair game once you hit QA, after design and development, but the real content needs to be locked before anyone starts on visual comps. Otherwise you’re aiming at a target that keeps moving.
What’s a visual comp? (some people just call it a mockup)
Same house, next stage: this is where you’re confirming paint colors, tile, and carpet before the crew starts pouring the foundation. The site finally looks real — every design element and every word of content sitting in place. It’s also the last real chance to give feedback before development, when the site actually gets built and comes to life.
This is also where personal taste has to lose to audience fit. You might love a neon, high-contrast look. If the audience you’re actually building for skews older, buttoned-up, and risk-averse, that’s the wrong bet — no matter how good it looks on your monitor.
Quick answers
Is a wireframe the same as a mockup? No. A wireframe is the black-and-white blueprint — layout only. A mockup (or visual comp) is the fully designed, full-color version that comes after.
Is a wireframe the same as a prototype? Close, but not quite. Most wireframes are static — you can look, but you can’t click through them. A prototype is the interactive version, usually built after wireframes are approved.
What’s the difference between a wireframe and a sitemap? A sitemap shows how all your pages relate to each other, site-wide. A wireframe shows what’s actually on one specific page.
On-time, on-budget website projects almost always come down to one thing: how feedback gets given at each of these stages. Our Website Survival Kit has the do’s and don’ts we hand every client, plus checklists for each phase above.
Ready to actually build the thing? Let’s talk.
