BlogsWeb DesignWat is een wireframe?

09/03/2017
https://wearecodebreakers.com/wp-content/uploads/2018/05/storytelling-agency-nijmegen-007.png

Wat is een wireframe?

Een huis bouw je volgens een plan. Als het fundament niet goed is rammelt het huis aan alle kanten. Hetzelfde geldt voor een website. Een nieuwe website bouw je ook met een plan. Hoe beter plan je hebt, hoe beter het proces verloopt en hoe toffer de website uiteindelijk zal worden. Webdevelopers gebruiken de term “wireframes”. Maar wat is een wireframe? In deze blog leg ik je uit wat het is, hoe je wireframes maakt en waarom ze worden ingezet.

Een wireframe is een visueel hulpmiddel bij het ontwikkelen van een website. Het is net een bouwtekening, alleen dan met de onderdelen van een website. Met een wireframe laat je de opbouw van een website zien en hoe pagina’s met elkaar in verbinding staan.

Een wireframe herken je aan de grove structuur en grijstinten. Het is heel basic opgezet. Er wordt geen kleur en definitieve tekst (alleen plaatsaanduiding tekst) gebruikt, want dat leidt in het begin alleen maar tot discussie. Bij een wireframe gaat het om usability en gebruiksvriendelijkheid. De focus ligt op de volgende elementen:

  • Structuur: samenhang tussen verschillende onderdelen.
  • Layout: schikking tussen onderdelen.
  • Navigatie: gaat over het menu en de linkjes.
  • Functionaliteit: elementen die interactie, gebruiksgemak en efficiëntie van website bepalen.

Hoe maak je een wireframe?

Er zijn verschillende manieren om een wireframe te maken. Wij geven de voorkeur aan pen en papier. Maar er zijn natuurlijk ook slimme programma’s die je hiervoor kunt gebruiken (zoals deze website). Welke manier je ook gebruikt, je begint altijd met een leeg vlak. Maar waar moet je beginnen? Begin bij het verhaal van de organisatie. Wat moet sowieso naar voren komen in de website? Waar zit de doelgroep op te wachten? Zij zijn uiteindelijk diegene die van de website gebruik gaan maken.

Een wireframe heeft een hoop voordelen. Zo dwingt het je niet alleen tot goed nadenken, maar bespaart het ook tijd.

  • Het dwingt je tot nadenken over de inhoud en hoe alles er in je website uit komt te zien.
  • Inzicht in functies van de website. Zoals call to actions, navigatie en links.
  • Je hebt overzicht en zo een beter beeld van de website. Je werkt naar een einddoel toe. Het frame staat al vast, dus er is weinig ruimte om fouten te maken. ‘Start with the end in mind.’
  • Het is tijdbesparend. Er is vooraf al over veel dingen nagedacht.

Het is niet de bedoeling dat je hier te enthousiast mee aan de slag gaat. Je moet niet te ver doordraven. Een wireframe kan ook beperkend werken. Want wat doe je als je tijdens het designen een super tof idee krijgt, maar het niet in je wireframe past? Dan moet je ervan kunnen afwijken. Houd het kort en simpel. Maak het niet moeilijker dan het is. Het bouwen van een website is tenslotte al moeilijk zat.

Start with the end in mind

De bedoeling van het maken van een wireframe is dat je bij het einde begint. Je denkt zo eerst na over het eindresultaat, voordat je daadwerkelijk begint met het webdesign. Het spreekt voor zich dat je nog lang niet klaar bent na het maken van een wireframe. Maar: je hebt in ieder geval de basis voor een toffe website. Nu is het tijd voor het grafisch ontwerp en moet de website gebouwd en getest worden. Wanneer je wireframes gebruikt ben je in ieder geval zeker van een goede basis. Uiteindelijk scheelt het je een hoop tijd (en dus kosten).