Op deze pagina
Grijze blokken, geen kleuren
Een wireframe beslist wat er op een pagina komt voor iemand kleuren, lettertypes of foto's kiest. De kop, de tekst, het formulier, de knop en de plaats van de foto's: alles staat erop, maar niets is af. Het is de bouwtekening van een pagina.
Dat er niets moois aan is, is de bedoeling. Niemand vindt het blauw te fel of de foto te donker, dus gaat het gesprek over wat telt: vindt de bezoeker de knop, staat de prijs boven of onder de realisaties, mist er een vraag in het formulier. Een wireframe is daarom het goedkoopste moment in een websitetraject om van gedacht te veranderen.
Een woord uit de 3D-wereld
Het Engelse woord betekent letterlijk draadmodel. Het komt uit de computergrafiek, waar een wireframe een 3D-model is dat alleen uit lijnen en hun knooppunten bestaat. Cambridge Dictionary geeft die betekenis nog altijd eerst, en daarnaast de betekenis uit het webvak: een basisplan van een website dat toont welke informatie erop komt en hoe ze geschikt is, zonder kleur of details.
Die tweede betekenis groeide mee met het vak van gebruikservaring, UX. Op 30 maart 2000 publiceerde Jesse James Garrett een diagram met de elementen van gebruikservaring, in 2002 gevolgd door het boek The Elements of User Experience. Hij deelt een site op in vijf lagen: strategie, scope, structuur, skelet en oppervlak. Het skelet is de plaatsing van knoppen, tabs, foto's en tekstblokken, precies wat een wireframe tekent. Het oppervlak, kleur en beeld, komt pas daarna. Tools volgden: Balsamiq, opgericht in 2008, maakt bewust schetsachtige wireframes, en in Figma, waar de meeste ontwerpers vandaag werken, zijn er sjablonen voor.
Een offertepagina, zes keuzes
Warmtepomp laten plaatsen in Aalst en omgeving
- Premie mee aangevraagd
- Offerte binnen 3 werkdagen
- Eigen ploeg, geen onderaannemers
Offerte aanvragen
- Naam
- Postcode
- Type woning
- Foto van je ketel (mag later)
Realisaties in de buurt
- Kop met dienst en regioDe woorden waarmee de bezoeker zocht, vooraan en zonder slogan.
- Drie redenen, geen tienWat een offerte bij jou anders maakt, in een oogopslag.
- Vier veldenAlleen wat de offerte echt nodig heeft. Elk extra veld kost aanvragen.
- De knop zegt wat er gebeurtVraag je offerte, niet Verzenden.
- Bellen in de kopOp een gsm de snelste weg naar een gesprek.
- Grijze vakken voor beeldHier komen foto's van echte werven. Welke, beslis je later.
Geen kleur, geen foto's, geen lettertype: alleen wat waar staat en waarom. Een blok verschuiven kost hier een minuut.
Schets, ontwerp of klikbaar model
De drie woorden worden door elkaar gebruikt, maar ze zijn drie stappen met elk een eigen vraag. De wireframe beslist wat er staat, de mockup hoe het eruitziet, het prototype hoe het werkt als je klikt.
| Vorm | Wat het toont | Detail | Klikbaar | Typische tool | De vraag die het beantwoordt |
|---|---|---|---|---|---|
| Wireframe | Opbouw en volgorde | Grijze blokken, echte koppen | Nee | Papier, Balsamiq, Figma | Staat alles erop, op de juiste plek? |
| Mockup | Het uiterlijk | Kleur, lettertype, foto's | Nee | Figma | Past het bij je merk en spreekt het aan? |
| Prototype | De werking | Van schets tot bijna echt | Ja | Figma, papier met een testpersoon | Raakt een bezoeker waar hij moet zijn? |
| Afgewerkte site | Alles, met echte inhoud | Volledig | Ja, en gebouwd | Code of een CMS | Levert het aanvragen op? |
Een wireframe is geen sitemap en geen proof of concept. De sitestructuur zegt welke pagina's er zijn; de wireframe zegt wat er op een pagina staat. Een proof of concept test of iets technisch kan, iets wat een wireframe nooit bewijst.
Low fidelity en high fidelity
Een low-fidelity wireframe is een schets: op papier, op een whiteboard of met grijze vakken in een tool. Je maakt er tien in een uur en gooit er negen weg. Een high-fidelity wireframe heeft de echte koppen en teksten, de juiste verhoudingen en soms al het raster van het ontwerp. Hij kost meer tijd, maar een klant leest hem zonder uitleg. Voor een kleine site volstaat vaak een schets per soort pagina; voor een webapplicatie met formulieren en stappen werk je beter in hoge resolutie, of maak je een wireflow: wireframes van elk scherm, met pijlen die tonen waar een klik naartoe leidt.
Waarmee je een wireframe maakt
Papier en een stift zijn genoeg voor de eerste versie. Wil je delen en commentaar verzamelen, dan is Figma gratis in het Starter-plan; een vaste ontwerper betaalt 16 dollar per maand voor een volle plaats in Professional, bij jaarlijkse betaling. Balsamiq kost 16 dollar per maand per editor met een jaarabonnement en laat je 14 dagen gratis proberen. De tool beslist weinig: een goede wireframe begint bij wat de bezoeker zoekt, zijn zoekintentie, en bij wat jij wil dat hij doet.
Nalopen voor het ontwerp start
- De kop zegt wat de pagina aanbiedt en voor wie, in de woorden waarmee mensen zoeken.
- Op een gsm staat het belangrijkste in het eerste scherm: wat je doet en hoe je contact opneemt.
- Elk blok heeft een reden. Kan je er geen geven, schrap het.
- Het formulier vraagt alleen wat je nodig hebt om te antwoorden, en de knop zegt wat er gebeurt.
- Elke pagina heeft een volgende stap: bellen, een offerte vragen, verder lezen.
- Er staat echte tekst op de plaatsen die beslissen, de kop en de knop, geen nep-Latijn als opvulling.
- Iemand die het project niet kent, vindt in tien seconden waar hij een offerte vraagt.
Een paar uur tekenen, weken herbouwen bespaard
Nielsen Norman Group, het onderzoeksbureau voor gebruiksvriendelijkheid, vat het zo samen: code weggooien is duur, een schets op papier weggooien niet. Een rekenvoorbeeld maakt dat concreet. Stel: je laat een site maken aan 75 euro per uur en wil na de oplevering het offerteformulier van onderaan de pagina naar boven, met twee velden minder. Op een wireframe is dat een kwartier. In een afgewerkt ontwerp zit je aan een paar uur, omdat beeld en tekst mee moeten schuiven. In een gebouwde site, op desktop en gsm, nagekeken en opnieuw getest, al snel een halve dag of meer: 300 euro of meer voor een keuze die je ook in een kwartier had kunnen maken.
De wireframes zelf kosten weinig in verhouding. Een dienstpagina schetsen duurt een tot twee uur; voor een site met zes tot acht soorten pagina's reken je een tot twee dagen, inclusief een ronde feedback. Wat het oplevert: een offerte die klopt, omdat de bouwer weet wat hij bouwt, en een doorlooptijd zonder verrassingen. Hoe lang een traject in totaal duurt, lees je in hoe lang het duurt om een website te laten maken; wat de prijs bepaalt, in wat een website kost.
Waar hij in een websitetraject past
De wireframe komt na de briefing en voor het ontwerp. Eerst schrijf je op wat de site moet doen, voor wie en met welke pagina's; onze website briefing template zet de vragen klaar die ook de prijs bepalen. Dan volgt per soort pagina een wireframe: de homepage, een dienstpagina, een realisatie, het contact. Pas als die vastliggen, komt het ontwerp, en daarna de bouw.
Vergelijk je offertes, kijk dan of er een wireframe of een vergelijkbare stap in zit; de gids over offertes vergelijken zegt waar je nog op let. Bouw je een pagina voor een campagne, dan geldt hetzelfde in het klein: een landingspagina met een doel heeft evengoed een schets nodig. Software werkt volgens hetzelfde principe: ook een MVP begint bij een paar schermen op papier.
Wat klanten ons over de schets vragen
Moet ik als klant een wireframe goedkeuren?
Ja, en dat is het beste moment om kritisch te zijn. Kijk of alles erop staat wat een bezoeker zoekt en of de volgorde klopt. Over kleuren en foto's beslis je later, bij het ontwerp; een opmerking daarover op een wireframe kost tijd zonder iets op te lossen.
Hoeveel wireframes heeft een website nodig?
Een per soort pagina, niet per pagina. Een site met twintig diensten heeft een wireframe voor een dienstpagina nodig, niet twintig. Meestal gaat het om vijf tot acht: homepage, dienst, realisatie of case, over ons, contact, en waar nodig een blog of een rekentool.
Kan ik zelf een wireframe maken?
Zeker. Neem een A4 per pagina en teken van boven naar onder wat er moet staan, met de echte kop erbij. Leg het naast de sites van twee concurrenten. Een bureau maakt er daarna een nette versie van, maar jouw schets zegt meer over je klanten dan een eerste versie van een ontwerper.
Is een wireframe nodig voor een kleine site?
Een schets wel, een uitgewerkte wireframe niet altijd. Voor een one-pager volstaat een kwartier op papier met de volgorde van de blokken. Zelfs dan voorkomt het dat je na de bouw nog alles moet verschuiven.