Wireframes & Prototypes

de schematische voorstelling van de structuur van je website

Een huis bouw je op basis van een plan. Een IKEA-kast ook. Het overslaan van het plan kan dan ook grote gevolgen hebben. Bepaalde elementen in een huis worden vergeten of er blijven vijzen van de IKEA-kast over en niemand die weet waar ze horen. Een nieuwe website bouw je ook best aan de hand van een plan, want hoe beter het plan, hoe efficiënter je website gebouwd wordt en hoe succesvoller ze achteraf zal zijn. De bouwplannen van een website noemen we wireframes.

Great web design without functionality is like a sports car with no engine!

Paul Cookson

Wat zijn wireframes?

Een wireframe is een eenvoudige schematische voorstelling van de structuur van je website, illustreert de opbouw van je website en hoe alles met elkaar verbonden zal zijn. Wireframes bevatten weinig of geen teksten en afbeeldingen. In dit stadium wordt er namelijk nog niet gefocust op het design van je website. Wireframes moeten er dan ook niet ‘mooi’ uit zien. De focus bij wireframes ligt op:

  • Structuur: hoe hangen alle pagina’s aan elkaar?
  • Lay-out: hoe kunnen we alle onderdelen op de pagina’s schikken?

  • Navigatie: hoe bouwen we de menustructuur van je website op?

  • Functionaliteit: welke elementen voegen we toe aan de website om de interactie met de doelgroep te stimuleren, zoals video’s, call-to-actions …?

Pas als iedereen het eens is over de wireframes kan er gestart worden met het inkleuren ervan, namelijk het opmaken van het design. Daarna gaan we over tot het effectief bouwen van de website, waarbij de wireframes gebruikt worden als bouwplan voor onze ontwikkelaars.

High fidelity wireframe
High fidelity wireframe

‘Low-fidelity’ versus ‘high-fidelity’ wireframes

Bij het opmaken van wireframes spreken we doorgaans over ‘low-fidelity’ en ‘high-fidelity’ wireframes. Onder ‘low-fidelity’ wireframes verstaan we de basisstructuur, meestal gewoon geschetst op papier en voorzien van commentaar en opmerkingen van verschillende interne profielen. De ‘high-fidelity’ wireframes daarentegen zijn voorzien van meer detail, tonen en beschrijven ook interactie (IxD) en zijn laagdrempeliger wanneer ze worden voorgelegd aan de klant, aangezien ze dichter aanleunen tegen een design en klanten zo beter kunnen voorstellen hoe de website er nadien zal uitzien.

Wireframes Duo

Wat met wireflows?

Wireframes in combinatie met de op voorhand bepaalde architectuur noemen we wireflows (wireframe + flow). Op een wireflow zie je, naast de wireframes, ook de onderlinge relatie tussen de verschillende scherminhouden. Ook de interacties (wie-wat-hoe-waar) worden duidelijk op zo'n diagram. Verder is iedere wireframe voorzien van een identificatie, waarmee we verwijzen naar een bepaald deel in de zowel functionele analyse als technische analyse. Wireflows zijn heel handig in de meer complexe projecten en zorgen voor een duidelijk overzicht in een kluwen van data.

Wireflow

Wireframes besparen tijd én kosten

Hoe klein een website ook is, onze ervaring leert ons dat het altijd verstandig is om te starten met het uittekenen van wireframes. Klanten denken vaak dat wireframes extra kosten en tijd met zich meebrengen, maar niets is minder waar. Het uittekenen van wireframes verplicht alle betrokken partijen om voorafgaand aan het design en de ontwikkeling heel goed na te denken over hoe de website structureel in elkaar moet zitten. Uiteindelijk bespaart dit dus heel wat tijd, kosten én frustraties, doordat er tijdens het uitwerken van de website niet constant aanpassingen nodig zijn. Bovendien krijgen we vaak sneller alle neuzen in dezelfde richting dankzij de wireframe fase en is het een leuke en nuttige start van een geslaagde samenwerking.

Prototypes

Afhankelijk van de complexiteit van een project (of op vraag van de klant) kan er indien nodig ook een werkend prototype van een website gemaakt worden. Door middel van basisfunctionaliteiten ('click and go’) wordt op basis van de wireframes of het design een prototype gemaakt.

Ook plannen voor een nieuwe website, maar nog geen architect gevonden om ze te realiseren? Kom dan zeker eens langs!