Wireframes & Prototypes

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.

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 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.

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.

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.