On this page
Grey blocks, no colours
A wireframe settles what goes on a page before anyone picks colours, fonts or photos. The headline, the copy, the form, the button and the place for photos are all there, but nothing is finished. Think of it as the floor plan of a page: you decide on rooms and doors before anyone picks tiles.
The plainness is deliberate. Nobody argues about a shade of blue, so the conversation stays on what decides whether a page works: can visitors find the button, does the price sit above or below the case studies, is a question missing from the form. That makes the wireframe the cheapest moment in a website project to change your mind.
A word from 3D graphics
Wireframe started in computer graphics, where it means a 3D model drawn only as lines and the points where they meet. Cambridge Dictionary still lists that meaning first, followed by the web meaning: a basic plan of a website showing what information goes on it and how it is arranged, without colour or detail.
The web meaning grew with the discipline of user experience. On 30 March 2000 Jesse James Garrett published a diagram of the elements of user experience, followed in 2002 by the book The Elements of User Experience. He splits a site into five planes: strategy, scope, structure, skeleton and surface. The skeleton is the placement of buttons, tabs, photos and blocks of text, which is exactly what a wireframe draws; the surface, colour and imagery, comes later. Tools followed. Balsamiq, founded in 2008, makes deliberately sketchy wireframes, and Figma, where most designers work today, ships templates for them.
A quote page, six decisions
Heat pump installation in Utrecht and around
- Grant paperwork included
- Quote within 3 working days
- Own crew, no subcontractors
Request a quote
- Name
- Postcode
- Type of home
- Photo of your boiler (optional)
Recent jobs nearby
- Headline with service and areaThe words the visitor searched with, up front, no slogan.
- Three reasons, not tenWhat makes a quote from you different, at a glance.
- Four fieldsOnly what the quote really needs. Every extra field costs enquiries.
- The button says what happensGet your quote, not Submit.
- Call in the headerOn a phone, the fastest way to a conversation.
- Grey boxes for imagesPhotos of real jobs go here. Which ones, you decide later.
No colour, no photos, no typeface: only what goes where and why. Moving a block here takes a minute.
Sketch, design or clickable model
The three words get mixed up, yet each is a step with its own question. The wireframe settles what is on the page, the mockup how it looks, the prototype how it behaves when you click.
| Form | What it shows | Level of detail | Clickable | Typical tool | The question it answers |
|---|---|---|---|---|---|
| Wireframe | Layout and order | Grey blocks, real headlines | No | Paper, Balsamiq, Figma | Is everything there, in the right place? |
| Mockup | The look | Colour, type, photos | No | Figma | Does it fit the brand and appeal? |
| Prototype | The behaviour | From sketch to nearly real | Yes | Figma, paper with a test user | Do visitors get where they need to go? |
| Finished site | Everything, with real content | Complete | Yes, and built | Code or a CMS | Does it bring in enquiries? |
A wireframe is not a sitemap and not a proof of concept. The site structure lists which pages exist; the wireframe says what sits on one of them. A proof of concept tests whether something can be built at all, which a wireframe never proves.
Low fidelity and high fidelity
A low-fidelity wireframe is a sketch: on paper, on a whiteboard or as grey boxes in a tool. You make ten in an hour and throw nine away. A high-fidelity wireframe carries the real headlines and copy, true proportions and sometimes the design grid. It takes longer, but a client reads it without a walkthrough. For a small marketing site a sketch per page type is usually enough; for a web application with forms and steps, work in higher fidelity or draw a wireflow: wireframes of every screen with arrows that show where each click leads.
Tools and what they cost
Pen and paper do for the first round. To share and collect comments, Figma is free on its Starter plan; a designer who lives in it pays 16 dollars a month for a full seat on Professional, billed annually. Balsamiq costs 16 dollars a month per editor on an annual plan, with a 14-day free trial. The tool decides little. A good wireframe starts from what the visitor is looking for, their search intent, and from what you want them to do next.
Review before design starts
- The headline says what the page offers and to whom, in the words people search with.
- On a phone, the first screen shows what you do and how to get in touch.
- Every block has a reason. If you cannot name it, cut the block.
- The form asks only what you need to reply, and the button says what happens next.
- Every page has a next step: call, request a quote, read on.
- Real copy sits in the places that decide, the headline and the button, not dummy Latin filler.
- Someone new to the project finds where to request a quote within ten seconds.
A few hours of drawing, weeks of rebuilding saved
Nielsen Norman Group, the usability research firm, puts it bluntly: ripping up code is very expensive, ripping up a prototype is not, especially if it is a piece of paper. A worked example makes that concrete. Say your agency bills 75 euros an hour and, after launch, you want the quote form moved from the bottom of the page to the top, with two fields fewer. On a wireframe that is fifteen minutes. In a finished design it takes a few hours, because images and copy shift with it. On a built site, checked on desktop and mobile and tested again, it soon takes half a day or more: 300 euros or more for a decision you could have made in a quarter of an hour. Hourly rates differ a lot across Europe; our guide to web developer hourly rates compares Belgium with five markets.
The wireframes themselves are cheap by comparison. Sketching one service page takes one to two hours; for a site with six to eight page types, plan one to two days including a feedback round. The return: a quote that holds, because the builder knows what to build, and a timeline without surprises. How long a full project runs is covered in how long it takes to build a website.
Where it sits in a website project
The wireframe comes after the brief and before the design. First you write down what the site must do, for whom and with which pages; our website brief template lists the questions that also set the price. Then comes a wireframe per page type: home, service, case study, contact. Only when those are agreed does design start, and then the build.
The same applies to a single campaign page: a landing page with one goal still needs its sketch. And it applies to software. A minimum viable product also starts with a handful of screens on paper, often in a requirements document next to them.
What clients ask about the sketch
Do I need to approve a wireframe as a client?
Yes, and it is the best moment to be critical. Check that everything a visitor looks for is there and that the order makes sense. Colours and photos come later, in the design; comments on them at wireframe stage cost time without solving anything.
How many wireframes does a website need?
One per page type, not one per page. A site with twenty services needs one service page wireframe, not twenty. Usually that means five to eight: home, service, case study, about, contact, and where needed a blog post or a calculator.
Can I make a wireframe myself?
Certainly. Take a sheet of A4 per page and draw from top to bottom what has to be there, with the real headline. Put it next to two competitor sites. An agency will turn it into a clean version, but your sketch says more about your customers than a designer's first draft.
What is a wireframe in Figma?
The same thing, drawn in Figma: grey frames, placeholder text and simple shapes, often from a wireframe kit. The advantage is that the client can comment on the file and the designer can later build the mockup on top of it.