Wireframe

Je zit in een gesprek met een webdesigner en die vraagt: "Zullen we starten met een wireframe?" Je knikt, want je wilt niet onwetend klinken. Maar eigenlijk weet je niet precies wat er dan op tafel gaat komen. Een wireframe is de kale schets van een webpagina: blokken die afbeeldingen voorstellen, lijnen die tekst aanduiden, rechthoeken voor knoppen. Geen kleuren, geen logo, geen mooie foto's. Puur structuur.

De plattegrond van je website

Stel je voor dat een architect direct begint met het plaatsen van bakstenen, zonder eerst een plattegrond te tekenen. Dan mag je hopen dat de voordeur ergens logisch uitkomt. Bij webdesign werkt het precies zo: je bepaalt eerst de indeling, dan pas het uiterlijk.

Een wireframe beantwoordt vragen als: wat ziet een bezoeker als eerste? Waar staat de call-to-action? Hoe lang is de introductietekst? In welke volgorde staan de secties? Kleuren en lettertypes doen er in deze fase niet toe. Die leiden alleen maar af van de echte vragen: werkt de structuur en klopt de logica?

Om een wireframe te maken, hoef je geen designer te zijn. Pen en papier zijn genoeg voor de eerste versie. Pas later, als de indeling staat, ga je naar tools als Figma of Adobe XD voor een gedetailleerder ontwerp.

Wat er misgaat als je de wireframestap overslaat

Veel opdrachtgevers willen direct de mooie plaatjes zien. Begrijpelijk, maar gevaarlijk. Als je de structuur pas beoordeelt als het visuele ontwerp al klaar is, betaal je voor aanpassingen die je eerder gratis had kunnen maken.

Een blok verplaatsen in een wireframe kost vijf seconden. Datzelfde blok verplaatsen in een uitgewerkt ontwerp kost een designer een uur. En als die keuze ook al in de code zit, mag een developer opnieuw aan de slag. Hoe later in het proces je structurele fouten ontdekt, hoe duurder ze worden.

Zonder wireframe loop je ook een ander risico: de discussie gaat over de verkeerde dingen. In plaats van "staat de navigatie op de juiste plek?" gaat het gesprek ineens over de kleur van de knop. Dat is tijdverspilling. Een wireframe dwingt iedereen om eerst over structuur te praten.

Bij een website laten maken is een wireframefase dan ook geen luxe. Het is het fundament waarop de rest wordt gebouwd.

Low-fi, high-fi en alles daartussenin

Niet elke wireframe is even gedetailleerd. Je onderscheidt twee varianten:

• Low-fidelity: ruwe blokken, handgeschetst of in een simpele tool. Grijs op wit, geen details. Ideaal in de vroege fase als het concept nog niet vaststaat. Je kunt in vijf minuten vijf versies maken en de beste kiezen.
• High-fidelity: meer detail, realistische teksten, exacte maten en soms klikbare prototypes. Hiermee kun je de gebruikservaring al redelijk simuleren voor er ook maar een regel code is geschreven.

In de praktijk begin je bijna altijd low-fidelity en werk je toe naar high-fidelity naarmate de richting is goedgekeurd. Voor een eenvoudige landingspagina is een low-fi schets vaak al voldoende. Voor een webshop laten maken met meerdere flows (product, winkelwagen, checkout) is high-fidelity bijna altijd de moeite waard.

Populaire tools: Figma (veruit de meest gebruikte), Balsamiq (speciaal voor low-fi schetsen), Adobe XD, of simpelweg een whiteboard.

Klein schetsje, groot verschil

Een wireframe kost weinig tijd en spaart je veel discussies, aanpassingen en geld. Het is het moment in het project waarop je het meeste invloed hebt voor de minste kosten. Gebruik het.

Bij Laanify beginnen we elk websitetraject met wireframes. Zo zijn we het eens over de indeling voor we aan het ontwerp beginnen, en heb je als opdrachtgever een concreet beeld van wat er gebouwd wordt. Benieuwd hoe dat eruitziet? Lees meer over ons webdesign-proces of neem contact op.

Veelgestelde vragen

Moet ik als opdrachtgever iets weten over wireframes?

Je hoeft het technisch niet te snappen, maar je moet er wel feedback op kunnen geven. Een wireframe leest als een plattegrond: je ziet waar de kamers zitten. Kijk of de volgorde logisch aanvoelt voor jouw bezoeker en of de belangrijkste informatie op de juiste plek staat. Meer hoeft dat niet te zijn.

Hoe verschilt een wireframe van een prototype?

Een wireframe is een statische schets: je kijkt ernaar maar klikt niet. Een prototype is klikbaar, je kunt er als eindgebruiker doorheen navigeren. Wireframes komen eerst. Als de structuur is goedgekeurd, kan een designer een klikbaar prototype bouwen om de gebruikservaring te testen voor de bouw begint.

Is een wireframe hetzelfde als een mockup?

Nee. Een wireframe toont structuur zonder visuele stijl. Een mockup ziet er al uit als de echte site, met kleuren, lettertypes en afbeeldingen, maar is nog niet klikbaar. De volgorde is: wireframe, mockup, prototype, bouw.

Zijn wireframes ook nuttig bij een CMS ?

Ja, ook als je werkt met een CMS als WordPress of een headless oplossing. Een wireframe bepaalt welke contentblokken je nodig hebt, welke velden in het cms moeten komen en hoe de paginastructuur eruitziet. Zonder wireframe bouwen content-editors soms pagina's die het ontwerp breken.

Wat kost een wireframefase?

Dat hangt af van het aantal pagina's en de complexiteit. Voor een eenvoudige website zitten wireframes standaard in het traject. Voor grotere projecten met meerdere flows kan een aparte wireframefase worden begroot. Wil je weten wat een website laten maken kost ? Lees ons blogartikel voor een eerlijk overzicht.