Wat is een wireframe voor een website? Zo maak je er een

Een wireframe is een eenvoudige schets van een webpagina die laat zien waar alle onderdelen komen, zonder kleuren, lettertypen of foto's. Je maakt het vóór het design en de bouw, zodat structuur, inhoud en functies vastliggen voordat er tijd in het ontwerp gaat zitten.

Wat staat er in een wireframe?

Een wireframe is het skelet van een webpagina. Grijze blokken staan voor afbeeldingen, strepen voor tekst en kaders voor knoppen. Het ziet er bewust kaal uit, want het gaat om de opbouw.

In een wireframe leg je vast:

• waar knoppen en links naartoe leiden;
• de indeling per pagina: kop, tekstblokken, beeld en formulieren;
• de functies, zoals een zoekbalk, filters, een boekingsmodule of een rekentool;
• de route die een bezoeker aflegt naar contact of een aankoop.

Juist door het design weg te laten, gaat het gesprek over de inhoud. Niemand discussieert over de kleur van een knop als die knop nog grijs is. De enige vraag is: staat hij op de goede plek?

Wireframe, mockup of prototype: wat is het verschil?

Deze drie termen worden vaak door elkaar gebruikt. Ze horen bij verschillende fases van het ontwerpproces:

• Wireframe: de structuur. Zwart-wit, schematisch en gericht op indeling en functie.
• Mockup: het visuele ontwerp, met huisstijl, kleuren, echte foto's en lettertypen. Zo ziet de pagina er straks uit, maar je kunt er nog niet op klikken.
• Prototype: een klikbare versie. Je navigeert door de pagina's alsof het een echte website is, zodat je de gebruikerservaring test voordat er gebouwd wordt.

In de praktijk lopen ze in elkaar over. Een hi-fi wireframe lijkt al veel op een mockup, en in Figma maak je van elk ontwerp met een paar klikken een prototype.

Waarom een wireframe je websitetraject sneller maakt

Een wireframe voelt soms als een extra stap. Het is een vaste fase in elk websitetraject, direct na het bepalen van je doel en je doelgroep. In mijn ervaring bespaart het juist tijd, om deze redenen.

Je legt je wensen snel en concreet vast

Een idee in je hoofd is lastig over te brengen. Een schets niet. Met een eerste schetsronde zie je meteen hoe de website in grote lijnen werkt: welke pagina's er zijn, wat er bovenaan staat en waar de knoppen komen.

Iedereen werkt vanuit hetzelfde plan

Het wireframe is het naslagwerk voor jou, de designer en de developer. Welk element verwijst waarheen? Wat gebeurt er na het invullen van een formulier? Wie twijfelt, kijkt in het wireframe in plaats van een nieuwe mailwisseling te beginnen.

De bezoeker blijft centraal staan

Tijdens een websitetraject neem je honderden kleine beslissingen. Voor je het weet, bevat de website alle functies die iemand ooit noemde, maar werkt hij niet prettig. Een wireframe dwingt je om per pagina te kiezen wat de bezoeker nodig heeft. Een heldere structuur is bovendien een van de beste manieren om te voorkomen dat websitebezoekers afhaken.

Aanpassen kost minuten in plaats van uren

Bijna geen website wordt precies zoals het eerste idee. Pagina's worden samengevoegd, functies komen erbij. In een wireframe verschuif je een blok in een minuut. Is de website al gebouwd, dan kost dezelfde wijziging veel meer tijd en geld.

Lo-fi en hi-fi wireframes

Wireframes zijn er in twee smaken: low fidelity (lo-fi) en high fidelity (hi-fi). Het verschil zit in de hoeveelheid detail en in het moment waarop je ze gebruikt.

Lo-fi wireframe: de ruwe schets

Een lo-fi wireframe is de eerste, grove schets. Vaak met pen en papier of op een whiteboard, of digitaal met simpele blokken. Je legt in grote lijnen vast wat er op elke pagina komt. Ideaal voor het begin, als er nog veel kan veranderen.

Hi-fi wireframe: het gedetailleerde ontwerp

Een hi-fi wireframe maak je zodra duidelijk is wat het eindresultaat moet worden. Afmetingen en afstanden kloppen tot op de pixel, en vaak staan de echte teksten er al in. Grote veranderingen in vorm of functie doe je in deze fase bijna niet meer. De developer gebruikt het als blauwdruk.

Hoe nauwkeuriger het ontwerp, hoe soepeler de bouw. Bij North Orleans kreeg ik een volledig uitgewerkt design aangeleverd, dat ik pixel perfect in WordPress nabouwde. Omdat alles vooraf vastlag, was er tijdens de bouw geen ruimte voor misverstanden.

Zo maak je een wireframe in 6 stappen

Zelf een wireframe maken is niet moeilijk. Zo pak je het aan:

1. Bepaal het doel per pagina. Wat moet een bezoeker hier doen? Bellen, kopen of een formulier invullen?
2. Maak een lijst van de inhoud. Welke informatie heeft de bezoeker nodig om die stap te zetten? Denk aan uitleg, prijzen, reviews en veelgestelde vragen.
3. Zet de inhoud in volgorde van belang. Bovenaan staat wat je doet en voor wie, met de belangrijkste knop direct in beeld. Meer hierover lees je in hoe je een websitebezoeker overtuigt.
4. Begin bij mobiel. Mobiele bezoekers scrollen meer en hebben minder ruimte, dus op een smal scherm moet je kiezen. Wat daar past, krijg je op desktop ook makkelijk kwijt.
5. Schets de navigatie. Teken het menu, de footer en de routes tussen de pagina's. Gebruik woorden die je bezoekers herkennen.
6. Test en verbeter. Laat een paar mensen uit je doelgroep het wireframe zien en vraag waar ze zouden klikken. Twijfelen ze, pas het dan aan.

Welke tools gebruik je om een wireframe te maken?

Voor een lo-fi wireframe heb je genoeg aan pen en papier. Wil je het digitaal en precies doen, dan zijn dit de tools die ik nu het meest zie.

Figma

Figma is de standaard voor webdesign. Het draait in je browser, je werkt met meerdere mensen tegelijk in één bestand en van je ontwerp maak je eenvoudig een klikbaar prototype. Er is een gratis versie om mee te beginnen. Voor de eerste ruwe schetsen is er FigJam, het online whiteboard van Figma.

Balsamiq

Balsamiq is speciaal gemaakt voor lo-fi wireframes. Alles ziet er bewust uit als een schets, zodat niemand wordt afgeleid door het design. Heel geschikt als je als website-eigenaar zelf je ideeën wilt uittekenen.

Miro

Miro is een online whiteboard met kant-en-klare elementen voor wireframes. Handig als je de structuur samen met je team wilt bedenken, bijvoorbeeld in een sessie waarin je eerst de sitemap uittekent.

Axure RP

Axure RP is voor wie verder wil gaan: complexe prototypes met formulieren, voorwaarden en dynamische inhoud. Krachtig, maar met een flinke leercurve. Voor de meeste website-eigenaren is het te veel van het goede.

Kom je in oudere artikelen InVision of Adobe XD tegen? Die waren jarenlang populair, maar InVision is eind 2024 gestopt en Adobe ontwikkelt XD niet meer verder. Voor een nieuw project kies je dus beter een van de tools hierboven.

Conclusie: eerst schetsen, dan bouwen

Een wireframe is een simpele schets met een groot effect. Je legt structuur, inhoud en functies vast voordat er tijd in design en bouw gaat zitten. Dat voorkomt discussies, dubbel werk en een website die mooi is maar niet werkt.

Begin lo-fi, werk toe naar hi-fi en vergeet de mobiele versie niet. Wil je zien waar het wireframe past in het grotere geheel? Lees dan hoe een websitetraject stap voor stap verloopt.