In one sentence: A wireframe is a plain, unstyled sketch of a web page that shows what goes where and in what order, drawn before any colors, fonts, or photographs are chosen.
A wireframe is a page with the paint scraped off. Empty boxes stand in for photographs, straight lines stand in for text, and labels say what each block is: headline, phone number, three proof lines, gallery, service area, form.
It is deliberately plain, and that is the point. Show an owner a finished-looking design and the conversation goes straight to the shade of blue. Show the same layout as gray boxes and the conversation goes to the order instead: should the reviews come before the pricing, does the service area belong above the gallery, is the form buried too far down. Those are the questions worth arguing about.
Wireframes come at every level of effort, from a pencil sketch on a legal pad to a clickable gray-box version you can tap through on a phone. The effort should match the stakes. A short brochure site can be settled on paper in an afternoon. A booking flow with a payment step is worth clicking through before it gets built, because that is where the surprises hide.
Wireframes also make missing material obvious while there is still time to find it. A box labeled "six job photos" is a reminder that six job photos have to exist. That is exactly the sort of thing that stalls a build in week five when nobody raised it in week one.
Redrawing a wireframe takes minutes. Rearranging a page that has already been built takes the design, the copy that was written to fit that design, and the photography that was cropped for it. A custom site is a real purchase, generally $3,500 to $12,000+ one-time, and the hour spent arguing over a sketch is the cheapest hour in the whole project.
Custom pieces need this most. A job board for a Philadelphia staffing agency, where the owner posts openings from her phone, has screens no template covers, so the layout has to be settled in plain boxes before anybody writes code for it.
A wireframe is also the last cheap moment for the owner to speak up. The person who answers the phone all day knows which question every caller asks first, and that question usually belongs higher on the page than anyone in a design review would have put it.
Honest tradeoff: not every page needs one. A short page with a shape everyone already agrees on can go straight to design. Wireframes earn their keep on anything with a form, a calculator, or a family of pages that has to feel consistent, which is why they come early in how we build.
The wireframe settles the layout of one page, and the hero section is usually the first block drawn on it. The plan for how pages relate to each other, rather than what sits on any single page, is information architecture. How the finished thing feels to use is user experience, and the visible controls, type, and spacing it is built from are the user interface.
No. A wireframe shows structure with no styling, so it answers what goes where. A mockup shows the real design: colors, type, photographs, spacing, so it answers what the page will look like. Most builds do the wireframe first and the mockup second, because it is far easier to redraw a box than to repaint a page.
You should see something that shows the plan before design work starts, whether it is called a wireframe, a layout sketch, or an outline. If the first thing you are shown is a finished-looking homepage, you are being asked to approve the structure and the styling at the same moment, and the structure is the part that gets expensive to change later.
How we build · Hero section · Information architecture · User experience (UX) · User interface (UI) · All glossary terms · Plain-English answers · All services
Free consultation, plain-English advice. If you don't need us, we'll say so.
Book a free consultation → Or call/text directly: (407) 694-2055Tell us a little about the business and we will come back with an honest read: what we would fix first, what it costs, and whether you need us at all. Prefer to see work before you talk numbers? Get a free homepage mockup, built for your business, yours to keep either way.
Brandon reads every one of these himself. You will hear back shortly with an honest read on what we would do first, what it costs, and whether it is worth it for you.