Voordat een huis gebouwd wordt, ligt er een plattegrond. Voordat een website ontworpen wordt, hoort er net zo goed een plan te liggen. Dat plan zijn de wireframe en het prototype: eerst tekenen we de kale structuur uit, daarna maken we die klikbaar zodat je er doorheen kunt lopen. Pas als die basis klopt, gaat er kleur, beeld en definitieve tekst overheen. In deze gids leg ik uit wat wireframes en prototypes precies zijn, waarom ze zoveel tijd en geld besparen en hoe ze dure misverstanden voorkomen voordat er ook maar iets gebouwd is.

Wat zijn wireframes en prototypes?

Een wireframe is een schets van een pagina waarin alleen de indeling vastligt. Je ziet waar de titel staat, waar de tekst komt, waar de knoppen zitten en in welke volgorde alles op het scherm verschijnt. Geen kleuren, geen mooie foto's, geen definitieve teksten: bewust kaal, zodat de aandacht volledig naar de opbouw gaat.

Een prototype is de volgende stap. Daarin worden de wireframes aan elkaar geknoopt tot iets klikbaars. Je kunt op een knop drukken en naar de volgende pagina springen, het menu uitklappen, een formulier doorlopen. Het is nog geen werkende site, maar je beleeft wel hoe het straks aanvoelt om er doorheen te bewegen.

Waarom eerst de structuur en niet de kleur

Het is verleidelijk om meteen naar het mooie te willen: kleuren, beeld, een sfeer. Maar als de indeling niet klopt, helpt geen enkele kleur je daaruit. Door eerst de kale structuur uit te tekenen, beoordeel je puur of de juiste dingen op de juiste plek staan, zonder dat een fraaie foto je oordeel kleurt.

Het scheelt bovendien enorm veel werk. Iets verschuiven in een wireframe is een kwestie van minuten. Datzelfde verschuiven in een afgewerkt ontwerp of een gebouwde site kost een veelvoud aan tijd. Wie vroeg nadenkt over de opbouw, voorkomt dat er later dure rondes nodig zijn. De keuzes die je hier maakt, onderbouw je het best vanuit doel en doelgroep, zoals ik beschrijf in de gids over UX-design.

Wat een wireframe je oplevert

De wireframe-fase legt de fundering. Daar gebeurt een aantal dingen dat de rest van het traject makkelijker maakt:

Doordat alles kaal is, gaat het gesprek over wat ertoe doet: klopt de indeling, ontbreekt er iets, staat het in de juiste volgorde? Dat is precies de discussie die je in deze fase wilt voeren en niet pas als de site al staat.

Wat een prototype daaraan toevoegt

Een statische schets vertelt veel, maar niet alles. Pas als je ergens op kunt klikken, voel je of de navigatie logisch is. Het prototype maakt dat mogelijk.

Je loopt de route echt door

In plaats van je voor te stellen hoe iemand van de homepage naar het contactformulier komt, klik je het gewoon na. Hapert het ergens, dan merk je dat meteen. Hoe je die route van eerste klik naar aanvraag opbouwt, lees je in de gids over conversiegericht ontwerp.

Je test op het juiste apparaat

Een prototype bekijk je net zo goed op je telefoon. Zo zie je of de opbouw ook op een klein scherm klopt, iets wat op papier makkelijk over het hoofd wordt gezien. Meer daarover staat in de gids over responsive design.

Iedereen ziet hetzelfde voor zich

Een prototype haalt de aannames weg. Jij, ik en eventuele collega's kijken naar precies dezelfde klikbare versie, in plaats van naar een beschrijving die ieder anders invult.

Een misverstand kost in een wireframe vijf minuten. In een gebouwde site kost het een week.

Hoe je dure misverstanden voorkomt

De grootste kostenpost in een webproject is niet het bouwen, maar het opnieuw bouwen. Een pagina die af is en toch verkeerd blijkt, moet uit elkaar gehaald worden. Juist dat voorkomen wireframes en prototypes.

Verwachtingen kloppen vooraf

Doordat je vroeg ziet hoe de site is opgebouwd, komt er bij de oplevering geen verrassing. Wat je in het prototype goedkeurde, herken je terug in het eindresultaat.

Feedback komt op het juiste moment

Wijzigingen voorstellen op een schets is normaal en goedkoop. Datzelfde voorstellen op een gebouwde site is duur en frustrerend. Door vroeg te toetsen, geef je je feedback op het moment dat aanpassen nog moeiteloos gaat.

De inhoud sluit aan op de vorm

Omdat de wireframe laat zien hoeveel ruimte tekst en beeld krijgen, weet je precies wat je moet aanleveren. Geen losse teksten die nergens passen, geen lege blokken die je nog moet vullen.

Zelf doen of uitbesteden?

Een eerste schets maken kun je prima zelf, al is het maar met pen en papier. Teken per pagina ruwweg waar wat komt en je dwingt jezelf al na te denken over volgorde en hoofdboodschap. Voor een eenvoudige site brengt dat je een heel eind.

Wordt je website een serieus onderdeel van je bedrijf, dan loont het om de wireframes en het prototype door iemand te laten maken die gewend is vanuit de bezoeker te denken. Niet omdat je het zelf niet kunt schetsen, maar omdat de waarde zit in het stellen van de juiste vragen voordat er gebouwd wordt. Wil je weten wat dat voor jouw site betekent? Bekijk dan de webdesign op maat of leg me je vraag voor via de contactpagina.

Veelgestelde vragen

Een wireframe is een statische schets van de indeling: waar staat wat op de pagina, zonder kleur of definitieve tekst. Een prototype gaat een stap verder en is klikbaar, zodat je echt door de site kunt lopen en voelt hoe de navigatie werkt. Het wireframe legt de structuur vast, het prototype laat zien hoe die structuur in beweging aanvoelt.

Ook bij een kleine site loont het om eerst de indeling te bepalen. Een enkele schets per paginatype voorkomt al dat je tijdens het ontwerpen over de basis gaat twijfelen. Voor een paar pagina's hoeft dat geen dik document te zijn, maar de afweging vooraf bespaart altijd tijd achteraf.

Juist daarom werk ik er graag mee. Omdat er geen kleur en geen fraaie beelden afleiden, beoordeel je in een wireframe puur of de volgorde en de opbouw kloppen. Dat is precies waar de meeste misverstanden zitten, en die haal je er zo vroeg uit, voor ze duur worden.

Meestal kom je met een of twee rondes een heel eind. We bespreken de eerste schets, jij geeft aan wat schuurt en ik pas het aan. Omdat aanpassen in deze fase snel gaat, is dit het moment om kritisch te zijn. Ik werk met een projectprijs op maat, zodat dit overleg geen verrassing op de rekening wordt.

Verder in de kennisbank: UX-design: een site die prettig werkt · Informatiearchitectuur: je site logisch indelen · Webdesign: de complete gids