Wireframe
A wireframe is a deliberately plain layout of a page showing what goes where and in what order, before any visual design is applied. It's how a team agrees on structure and priority while changes are still cheap.
In practice
The plainness is the point. Grey boxes and placeholder labels keep the conversation on what a page has to accomplish, rather than on colour and typography. A stakeholder shown a finished-looking design will comment on the shade of blue. Shown a wireframe, they'll notice that the page never says what the company actually does.
What a wireframe settles is order and emphasis, which is most of what determines whether a page works. Which message lands above the fold, whether proof appears before or after the pitch, where the call to action sits and how often it repeats. These are hard to renegotiate once a page is built, and nearly costless to change while it's still boxes.
It sits between information architecture, which is how the whole site is organised, and visual design, which is how a page looks. Architecture decides the pages exist and how they relate; wireframes decide what's on each one; design decides how it feels. Skipping the middle step is why some projects produce a good-looking site that still fails to answer a buyer's first question.
For an established B2B company the wireframe stage is where the most valuable argument happens, and it's worth having properly. Deciding that certifications, the quote path, and a plain statement of what you make belong in the first screen is a structural decision. Our own homepage research found most B2B homepages never mention a certification and have no visible quote path, and both of those are omissions made at this stage rather than later.
A practical way to use one: show the wireframe to somebody who doesn't work at your company, give them five seconds, then ask what you do, who you do it for, and what they'd click next. If the plain version can't answer that, a polished version won't either.
Common questions
What is a wireframe used for?
Agreeing what goes on a page and in what order, before visual design starts. It keeps early feedback focused on structure and priority, when changes are still inexpensive.
What is the difference between a wireframe and a mockup?
A wireframe is intentionally plain and shows structure. A mockup shows the finished visual design with real styling, imagery and typography. Wireframes come first because they're faster to change.
Do you need wireframes for a website redesign?
For anything beyond a cosmetic refresh, they pay for themselves. Restructuring page content is where most of the value in a redesign comes from, and wireframes are where those decisions get made and agreed cheaply.