Wat is een wireframe?
Voordat een aannemer bouwt, is er een bouwtekening. Bij een website is dat de wireframe. Het is een tekening van de pagina met alleen de indeling: hier komt het menu, hier de kop, hier drie blokken met diensten, hier de knop. Alles in grijs en zwart, zonder opmaak. Het woord komt van wire (draad) en frame (raamwerk): een skelet van lijnen.
Juist door de opmaak weg te laten, gaat het gesprek over wat ertoe doet: wat staat er op de pagina, in welke volgorde, en wat moet de bezoeker doen.
Waarom begint een websitebouwer met een wireframe?
- Structuur voor stijl. Een mooie pagina met een verkeerde opbouw levert niets op. Eerst de opbouw goed, dan pas het ontwerp.
- Snel aan te passen. Een blok verplaatsen in een schets kost een minuut. In een uitgewerkt ontwerp kost het een uur, in een gebouwde pagina een dagdeel.
- Iedereen kijkt naar hetzelfde. Opdrachtgever, ontwerper en bouwer bespreken dezelfde tekening, zodat er later geen verrassingen zijn over wat waar komt.
- De tekst krijgt een plek. Uit de wireframe blijkt hoeveel tekst er per blok nodig is, zodat het schrijven gericht kan gebeuren.
Wat staat er in een wireframe?
- De indeling van de pagina: kolommen, blokken, volgorde.
- De plek van de tekst, vaak nog als “kop komt hier” of als voorbeeldtekst.
- De plek van foto’s als grijze vlakken met een kruis.
- De knoppen en formulieren: waar vraagt de pagina om actie?
- Vaak een aparte versie voor de telefoon, omdat de indeling daar anders is: alles onder elkaar in plaats van naast elkaar.
Drie niveaus
- Schets op papier of op een whiteboard: het snelst, ideaal voor een eerste gesprek.
- Digitale wireframe in een programma als Figma: netjes, deelbaar, met echte verhoudingen.
- Klikbare wireframe: u kunt door de pagina’s klikken alsof het een website is, nog steeds zonder opmaak. Handig om de route van de bezoeker te testen.
Wat heeft u eraan als opdrachtgever?
U ziet vroeg of de pagina vertelt wat u wilt vertellen, en of de belangrijkste dingen bovenaan staan. Mist er een blok met reviews? Staat de prijs te ver naar beneden? Is de knop “offerte aanvragen” wel te vinden? Dat ziet u in een wireframe eerder dan in een gepolijst ontwerp, waar kleuren en foto’s de aandacht trekken.
Vraag bij een offerte voor een website of er een wireframe-stap in zit. Een bouwer die meteen begint met ontwerpen of bouwen, maakt de dure aanpassingen later.
Een voorbeeld
Voor de dienstenpagina van een installatiebedrijf toonde de wireframe bovenaan de kop met de belofte, daaronder drie blokken (cv-ketel, warmtepomp, onderhoud), dan een blok met reviews, dan de veelgestelde vragen en onderaan het formulier. In het gesprek bleek dat klanten vooral op storingen zoeken. Het blok “storing melden” verhuisde naar boven, met een belknop. Dat kostte in de wireframe vijf minuten.
Let op: een wireframe is bewust lelijk. Beoordeel hem niet op uiterlijk maar op inhoud en volgorde. Het ontwerp met uw huisstijl komt daarna. Wie in de wireframe-fase over kleuren begint, praat over het verkeerde onderwerp.
Veelgestelde vragen
Wat is het verschil tussen een wireframe, een mockup en een prototype?
Een wireframe is de indeling zonder opmaak. Een mockup is het uitgewerkte ontwerp met kleuren en foto’s, maar nog niet klikbaar. Een prototype is klikbaar en gedraagt zich als een website, maar is nog niet gebouwd.
Moet ik voor elke pagina een wireframe laten maken?
Voor elk soort pagina: de homepage, een dienstenpagina, een blog, de contactpagina. Pagina’s van hetzelfde type delen de wireframe.
Dutch
English