{{text}}
Share
A wireframe is a grayscale diagram that settles the structure of a web page before any design decision: which blocks, in which order, with what hierarchy and what calls to action. It is an architect's plan, not a picture of the finished site.
It is also the highest-return stage of a web project, and the one most often skipped. Fixing the order of blocks on a wireframe takes ten minutes. Fixing it once the site is built takes a week and a budget conversation.
What a wireframe is, and what it is not
Nielsen Norman Group defines a wireframe as a document showing page-level design and layout ideas, used mainly for products made of several distinct pages. The definition is deliberately dry: a wireframe answers questions of structure, not of style.
In practice a wireframe settles four things:
- the order of blocks on the page and what is visible without scrolling;
- the heading hierarchy, and therefore the information hierarchy;
- the position and number of calls to action;
- the volume of content each block will have to hold.
And it settles none of this: colours, final typography, photography, animation, micro-interactions. Everything that belongs to art direction comes later, on the mockup.
The most common confusion involves a third artefact, the prototype. Here is how the roles actually divide.
| Deliverable | What it shows | What it lets you decide | When |
|---|---|---|---|
| Zoning | Named rectangles, no content | How the main zones of the page divide up | Kickoff workshop |
| Wireframe | Structure, hierarchy, approximate copy, in gray | Block order, headings, calls to action | Before design |
| Mockup | The final visual rendering, static | Art direction, components, states | After wireframe sign-off |
| Prototype | Screens linked together, clickable | Journeys, transitions, error cases | Before development |
The three fidelity levels, and how to choose
Fidelity measures how closely something resembles the final product. Nielsen Norman Group breaks it into three independent dimensions: interactivity, visuals, and content with navigation. So you can have a wireframe that is rich in content and deliberately poor in visuals, which is exactly the point.
Low fidelity
Paper, whiteboard, or gray blocks. Draw fast, throw away fast. This is the level to stay at while the structure is still open, for two reasons Nielsen Norman Group documents: changes can be made during the test itself, and participants criticise a visibly unfinished document more freely. Their line sums it up: ripping up code is very expensive, ripping up a prototype is not, especially if it is just a piece of paper.
Medium fidelity
The professional standard. Clean gray blocks, real headings, real copy lengths, a proper grid, no brand colour. This is the level a client can approve without mistaking the subject, because there is nothing pretty to comment on.
High fidelity
Close to a mockup, sometimes clickable. Useful when you are testing a specific component, a conversion funnel or a sequence of screens. The risk is well known: an over-polished wireframe triggers comments about colour and pushes structure into the background.
What a usable wireframe must contain
A wireframe that serves no purpose is a wireframe without content. This is the checklist we run before treating a template as ready for approval.
- Real headings. No placeholder text on H1 and H2. A real heading immediately reveals whether the block stands up.
- Real lengths. If the paragraph will run to 400 characters, it runs to 400 characters in the wireframe. A block sized for three lines that receives twelve breaks the page.
- One primary call to action per screen. The others are secondary and must look it.
- Empty and error states. An empty result list, a rejected form, an empty cart. This is where projects derail in development.
- The mobile version. Not an afterthought: block order often changes, and that is a decision, not a consequence.
- Outgoing internal links. Which pages this template points to, and from which block.
That last point is the one design teams forget most often, and the one that weighs most on search performance once the site is live.
Tools in 2026
The tool matters far less than the discipline, but the real costs are worth knowing. Prices taken from official pricing pages in September 2026.
| Tool | Cost | Who it suits |
|---|---|---|
| Paper and marker | Zero | The exploration phase, without exception |
| Figma | Free up to 3 projects and 2 members, then 12 dollars per editor per month billed annually or 15 dollars monthly on Professional, and 45 dollars annually on Organization | The standard for product teams and agencies |
| Webflow directly | Included in the site plan | Simple structures, where the wireframe becomes the site |
One note on Figma: billing is per editor, not per viewer. Client-side reviewers do not need a paid licence, which changes the budget on a project with several stakeholders.
When the wireframe becomes the site directly, it pays to have a Webflow expert set the class structure at this stage: what gets created here stays, and a sloppy class tree built at wireframe stage is paid for over the whole life of the site.
Our five-step method
This is the sequence we run on redesign projects, and it explains why we rarely need more than one round on the mockup.
- Frame the objective page by page. One page, one measurable objective. If nobody knows what the page must produce, the wireframe has nothing to structure.
- Inventory the existing content. What is kept, what is rewritten, what disappears. A wireframe drawn before the content inventory is a bet.
- Define templates, not pages. Six to eight is enough for most B2B sites. The logic is the one behind atomic design: compose pages from reusable blocks.
- Wireframe at medium fidelity, desktop and mobile. With real headings and real lengths.
- Get sign-off from the commercial decision maker. Structure approved before a single design file is opened.
On the Qobra redesign, this upstream approval is what kept the schedule: the template structure was settled before art direction started, so nothing came back as a blocker during build.
The mistakes that cost the most
Skipping the stage. The original sin. You jump straight to the mockup, the conversation slides towards aesthetics, and structure never really gets decided. It then gets decided during development, by default, by whoever is building.
Using placeholder text. Lorem ipsum gets blocks approved that will not survive real copy. It is the most common cause of pages that fall apart at the last minute.
Drawing pages instead of templates. Forty wireframes for forty pages means taking the same decision forty times from scratch, and a site with no consistency.
Forgetting mobile. A block order designed only for wide screens translates badly, and it shows in conversion rates.
Leaving no room for SEO content. A landing page built from three two-line blocks cannot rank. Content volume is a structural decision, and it is taken at wireframe stage.
Wireframes and search: the direct link
Four decisions taken at wireframe stage govern how the page performs in search, and none of them is easy to undo later.
Heading hierarchy first. One H1, H2s that genuinely divide the subject rather than decorate two-line blocks. Then the position of the main content: if it arrives after four reassurance blocks, it sits deep in the document. Then the planned volume of copy, which determines whether the page can actually treat its subject. Finally the outgoing internal links, meaning which pages this template points to and from where.
That is why we have the wireframes reviewed by whoever owns search before sign-off, not at launch. On a website redesign, it is the only moment when fixing those four points costs nothing.
What skipping it actually costs
The arithmetic is simple. A structural change approved at wireframe stage costs minutes. The same change after the mockup costs a round of art direction. After build, it costs development, a new QA pass, and sometimes a URL redirect. Set against the budgets we break down in our article on website pricing, the comparison is obvious: the wireframe is the cheapest line on the quote and the one that protects every other line.
If your objective is conversion rather than simply going live, this is even more true. The optimisation tests described in our CRO guide almost all concern structural decisions: block order, call-to-action placement, form length. Better to get them right the first time.
Frequently asked questions about wireframes
What is the difference between a wireframe and a mockup?
A wireframe settles structure and information hierarchy in grayscale, with no brand styling. A mockup applies the art direction on top of that structure: colours, typography, imagery, final spacing. You sign off on one before starting the other, otherwise the debate about a button colour hides the real question, which is the order of the blocks. More in our guide to website mockups.
Do you need a wireframe for every page?
No. You wireframe templates, not pages. A 40-page site usually comes down to six to eight templates: home, service page, conversion landing page, article index, article, contact, case study, legal page. Every page inherits from one of them.
Which fidelity level should you start with?
Low fidelity, almost always. Nielsen Norman Group notes that a low-fidelity prototype can be changed during the test itself, and that participants criticise it more freely because they can see it is unfinished. High fidelity earns its place when you are testing a specific component or a sequence of screens.
How long does a wireframe take?
For a B2B marketing site of six to eight templates, budget two to four working days once content and objectives are known. The real calendar time goes into approval rounds, not into drawing.
Can you wireframe directly in Webflow?
Yes, and it is sometimes the right call when the structure is simple and the team is small, since the wireframe becomes the site. The downside is that you start styling too early. Our practice is to wireframe outside the production tool, then build in Webflow once the structure is frozen.
Does a wireframe matter for SEO?
Indirectly, but a great deal. Heading hierarchy, the position of the main content, the amount of copy each block can actually hold and the outgoing internal links are all decided at wireframe stage. A page designed with no room for text becomes a thin page, and no later optimisation fixes that.
Who should approve the wireframe?
The person who owns the commercial objective of the page, not only the design team. If the sales director discovers the structure at mockup stage, you go backwards with the art direction already in place, which costs twice as much.
Should a wireframe contain real copy?
Yes for headings and key messages, at least in draft form. Lorem ipsum hides length problems and gets blocks approved that will never exist as drawn. Writing the real headings is the best stress test a structure can get.
Synqro is a Webflow Premium Partner agency in Paris. Planning a redesign and want the structure to serve search from day one? Our team works in exactly that order, from wireframe to launch. See our Webflow SEO service or tell us about your project.
Synqro's latest achievement
