Wireframes & Prototypes

background gradient for header small

Voor het bouwen van een huis is een plan nodig. Als er geen doordacht plan klaar ligt, zal dit grote gevolgen hebben in de uitvoer van de bouw. Dit geldt ook voor een website. Hoe beter het plan, hoe efficiënter je website gebouwd wordt en hoe succesvoller deze achteraf zal zijn. De bouwplannen van een website noemen we wireframes.

Wide image of wireframes & prototypes

“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. Het illustreert de opbouw van een website en het laat zien hoe alles met elkaar in verbinding staat. Wireframes bevatten weinig tot geen teksten en afbeeldingen, want in dit stadium wordt er namelijk niet gefocust op het design van je website. Wireframes hoeven er dan ook niet ‘mooi’ uit zien, mar de focus moet liggen op:

  • Structuur: hoe hangen alle pagina’s aan elkaar?
  • Lay-out: hoe kunnen we alle onderdelen op de pagina’s schikken?
  • Navigatie: wat is de menustructuur van de website?
  • Functionaliteit: welke elementen worden toegevoegd aan de website om de interactie met de doelgroep te stimuleren, zoals video’s, afbeeldingen, buttons met call-to-actions, etc.

 

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, deze tonen en beschrijven ook de interactie (IxD). Deze laatste zijn duidelijker voor klanten, aangezien deze al in de buurt komen van designwerk en klanten zich zo beter kunen voorstellen hoe de website eruit zal komen te zien.

 

Wat is een wireflow en wat heb je eraan?

Een wireflow is een combinatie van een wireframe en architectuur die op voorhand is bepaald. Daardoor zie je niet alleen de onderlinge relatie tussen pagina’s, maar ook onderlinge relaties tussen de inhoud van deze pagina’s. 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 om toe te passen tijdens meer complexe projecten en zorgen voor een duidelijk overzicht in ingewikkelde situatie.

 

Wireframes besparen tijd én kosten

Hoe klein een website ook is, het is altijd verstandig om te starten met het uittekenen van wireframes. Klanten denken vaak dat het uitwerken van wireframes extra tijd en kosten met zich meebrengt, 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 veel tijd, kosten én frustraties.

 

Het maken van prototypes

Afhankelijk van de complexiteit van een project (of op aanvraag van de klant) kan er ook een werkend prototype van de website worden gemaakt op basis van de wireframes en/of het design. Hierbij wordt gebruik gemaakt van basisfunctionaliteiten ('click and go’).

Heb je al plannen voor een nieuwe website, maar nog geen architect gevonden om ze te realiseren?
Kom dan zeker eens bij ons langs!

Van idee tot product

Heeft u reeds een brilliant idee of bent u benieuwd naar onze digitale mogelijkheden en expertise?

background_gradient_contact