Bij het ontwikkelen van een website is het handig om niet meteen met het eindproduct te beginnen. Dit klinkt logisch, maar je website ontwikkelen gaat stapsgewijs. Het is makkelijk om meteen op aspecten van het visuele design in te gaan, omdat het leuk is om daarmee bezig te zijn. Echter is de functionaliteit van je website minstens net zo belangrijk. Een wireframe is de eerste stap voorafgaand aan het design en de ontwikkeling. Lees hieronder meer over wat een wireframe is en hoe jouw bedrijf ze kan gebruiken.

wireframe uitgetekend op papier

Wat zijn wireframes?

Tijdens het designproces van een website of applicatie kan het handig zijn om wireframes te maken. Dit zijn low-fidelity ‘bouwtekeningen’, waarin je overzichtelijk alle kernelementen die op je website moeten komen in kaart brengt. Het belangrijke aspect aan wireframes is dat de focus niet ligt op grafisch ontwerp, maar op de elementen van de user interface. Hierbij kun je denken aan navigatie, indeling en inhoud. Het is dus een hulpmiddel om een idee te krijgen van welke functies en elementen er op je website moeten staan en hoe deze met elkaar moeten interacteren.

Waarom een wireframe gebruiken?

De voornaamste redenen om wireframes te maken, is om voorafgaand aan het grafisch ontwerp en het bouwen van een website, webshop of app de verschillende (inhouds)elementen, functies en navigatie in kaart te brengen. Het dwingt alle betrokkenen direct om zaken goed uit te denken in de beginfase van het project. Hiermee leg je direct een degelijke basis voor het ontwerp van je user interface. Vervolgens kun je de wireframes met alle betrokkenen (denk aan: klant, designer, developer, eventuele proefpersonen en anderen) als discussiestuk gebruiken. Je kunt dan desgewenst feedback doorvoeren in de wireframes totdat je een definitieve versie hebt.

Wireframes worden ook regelmatig ingezet bij een vroegtijdig feedbackproces tijdens de ontwikkeling van een website. Als je in een vroeg stadium wil ontdekken of potentiële bezoekers overweg kunnen met je voorgestelde interface, kun je ze door je wireframes heen laten navigeren. Als ze daar al tegen problemen aanlopen, moet je aanpassingen maken. Zo kom je stapsgewijs tot een sterke basis voor je user interface, waar de meeste gebruikers mee overweg kunnen.

Zodra je tot een definitieve versie van je wireframes bent gekomen, kan de designer starten met het maken van een grafisch ontwerp (de high-fidelity ‘bouwtekening’). Ook de ontwikkelaars kunnen aan de slag. Je kunt stellen dat iedereen door deze oefening weet waar diegene aan toe is en waar naartoe gewerkt wordt. Het is ook veel eenvoudiger om een wireframe aan te passen in de beginfase van een project, in plaats van dat een ontwikkelaar later in het project grote technische aanpassingen moet doorvoeren. Een goede voorbereiding is het halve werk.

Hoe maak je een wireframe?

Je kunt heel simpel zelf een wireframe maken met bijvoorbeeld pen of potlood en ruitjespapier. Dit is afhankelijk van hoe ver je ideeën voor de functionaliteiten en elementen van je website al gevorderd zijn. Je kunt beginnen met ruwe schetsen van ideeën voor de opbouw van een website, en later naar uitgebreidere wireframes toewerken. Zo kun je snel wat dingen uitproberen of verschillende opties met elkaar vergelijken, zonder dat je veel tijd kwijt bent aan het daadwerkelijk bouwen van pagina’s.

Als je liever een digitale versie van je wireframe maakt, zijn er ook een heleboel online tools beschikbaar om je daarbij te helpen. Zo kun je de eerste versie van je website gemakkelijk met andere projectleden delen en deze al in een browser zien. Dat spreekt tot de verbeelding. Bovendien biedt het de optie om snelle aanpassingen te maken en zo een nieuwe versie samen te stellen. Per pagina, van bijvoorbeeld een website, schets je alle elementen en functies die erin moeten komen om zo duidelijk te maken welke onderdelen gebouwd moeten worden.

MarketEagle en wireframes.

Wij maken altijd wireframes zodra we een nieuwe website, webshop of app ontwikkelen. Wil jij ook een nieuwe website? Wij zijn benieuwd naar je wensen en doelstellingen. Neem contact met ons op voor een vrijblijvende kennismaking.