Wireframing

Wat is een wireframe?

Een wireframe is kortgezegd een website schets. Je kunt wireframes zien als ‘kale’ prototypes van toekomstige webpagina’s. Hoe ‘kaal’ zo’n prototype is, is echter afhankelijk van jouw wensen en van de wireframer. Als een website schets al veel details bevat, dan zeggen we ook wel dat deze ‘high fidelity’ is. Bij weinig details is er sprake van ‘low fidelity’. Met ‘fidelity’ wordt dus bedoeld hoe realistisch de schets al het eindproduct laat zien.

Een wireframe bevat meestal geen kleuren. Het is vooral de bedoeling dat duidelijk gemaakt wordt welke elementen op welke plekken komen te staan. Wat die elementen dan precies zijn, moet ook verduidelijkt worden. Zonder verdere context moet begrepen kunnen worden wat bijvoorbeeld een button is. Afbeeldingen worden meestal aangegeven met een blok waar een kruis in staat en in video’s staat dan ook nog een play-button. Er wordt al rekening gehouden met de belangrijkste visual design principes:

• Alignment;
• Proximity;
• Repetition;
• Contrast.

De voordelen van een website schets

Door website schetsen uit te werken, kan al vóór de uiteindelijke productie van een website een goed beeld gevormd worden daarvan. Op dit punt kan feedback nog makkelijk verwerkt worden. Het is belangrijk om deze feedback snel te verwerken en op korte termijn met nieuwe wireframes terug te komen om rapid prototyping goed in de praktijk te brengen.

Designen is ook makkelijker als er al gewireframed is. De designer kan zich op die manier puur bezighouden met het uiterlijk van pagina’s en hoeft minder na te denken over de posities van elementen en andere zaken die al in de wireframes bepaald zijn. Met een website schets is als het ware het skelet alvast uitgewerkt om de layout weer te kunnen geven. Het kan natuurlijk altijd zo zijn dat een designer vanuit esthetisch oogpunt wijzigingen aanbrengt in de opbouw van de pagina. Zolang dit in overleg met de wireframer gebeurt, is dat natuurlijk geen probleem.