Wat is een wireframe?

Een wireframe is de ‘blauwdruk’ van een website. Het wordt vaak gebruikt bij de bouw van grote websites, maar misschien kan het ook handig zijn voor jou. In dit artikel leg ik je uit hoe je een wireframe gebruikt.

Facebook wireframe
Wireframe van Facebook, nagemaakt door ‘webdesignbloog’

Een wireframe is een geraamte, de doorsnede van je website. Van iedere pagina binnen je website wordt zo’n wireframe gemaakt en er is op getekend waar bepaalde tekstvakken, afbeeldingen, knoppen en andere elementen van je website komen. Het is dus een platte tekening, zonder kleur.

Daarnaast kun je met wireframes uitleggen hoe de bezoeker van je website door jouw website surft. Bijvoorbeeld: waar komt de bezoeker op terecht als deze op een knop klikt? Hier lees je hieronder ook nog meer over!

Wanneer gebruik je een wireframe?

Dit antwoord is vast niet iets waar alle websitebouwers het met me eens zullen zijn. Maar ik zet wireframes alleen in bij het bouwen van grotere websites. Het is vaak ook een tijdrovende klus om alle lijnen uit te denken en sommige websites zijn zo klein, of zitten ze zo logisch in elkaar dat ik er die tijd niet aan wil besteden. Vooral omdat ik samen met de website-eigenaar een goed idee heb hoe de website eruit moet komen te zien.

Er is groot nadeel van geen wireframe maken. Je kunt niet aan klant laten zien hoe de website eruit komt te zien qua structuur. Wanneer je direct begint met bouwen op basis van een idee, dan moet je later veel technische aanpassingen doen wanneer de structuur niet goed is. Dit kost veel tijd en energie.

Hoe maak je een wireframe?

Er zijn verschillende manieren om een wireframe te maken. Te beginnen met een simpele schets op papier. Pak een ruitjespapier en teken daarop de verschillende elementen van je pagina. De header, de footer, de tekst, afbeeldingen, sociale media plugins, knoppen etc. Je gaat gewoon ieder onderdeel uittekenen op papier. Uiteraard zijn er ook verschillende computerprogramma’s die je kunt inzetten. Beginners kunnen met Powerpoint bijvoorbeeld simpel blokken trekken. Voor de professionals kan ik Adobe InDesign aanbevelen. Wees vooral NIET creatief met kleuren en afbeeldingen, daar is een wireframe NIET voor bedoeld.

Tot slot ga je de link leggen tussen de verschillende pagina’s. Bijvoorbeeld: als ik op knop X klik, ga ik naar pagina Y. Je kunt dit allemaal beschrijven, maar je hebt ook hier weer programma’s voor die je helpen. Eerder dit jaar schreef ik over een tool die helpt bij het prototypen van apps. Deze tool is ook geschikt om je wireframes in te zetten en vervolgens een prototype van je website te maken. Je kunt dit artikel lezen door hier te klikken.