23 november 2018

Heb ik wireframes nodig?

#InHetKort

Waarom wireframes belangrijk zijn in het designproces

Wireframes zijn een snelle en efficiënte manier om de structuur van je website te bepalen en mogelijke functionaliteit problemen op te sporen. Daarnaast zijn je wireframes een goedkoop hulpmiddel om samen met de klant door de website te gaan alvorens je aan het echte design begint.

Wireframes in a book

Wat zijn wireframes?

Wireframes zijn het skelet van jouw website. Deze wireframes zullen je helpen met de structuur van de website, de functionaliteiten te bepalen en hoe de gebruikers door jouw website zullen gaan. Deze structuur is bij grotere/complexere websites dus van levensbelang. Als de structuur niet goed zit zullen er fouten in de website sluipen en deze zullen vroeg of laat naar boven komen en zal het meer tijd (en geld) kosten om deze op te lossen.

Moeten wireframes op papier gemaakt worden?

Neen, heel veel designers gebruiken pen en papier voor hun wireframes maar er bestaan ook al tal van (gratis) webtools om je wireframes te maken. Bij Popkorn gebruiken we beide gevallen, zijn deze wireframes enkel voor intern gebruik en voor de eigen structuur van de website uit te tekenen wordt meestal pen en papier gebruikt. Worden deze wireframes samen met de klant doorlopen dan zullen deze voor de duidelijkheid via een online tool gemaakt worden. Enkele goede wireframe tools zijn: wireframe cc & Axure (betalend)

Postit on a wall

#LetsGetStarted

Waar moet je op letten tijdens het maken van wireframes

Het is zeer belangrijk dat je wireframes simpel en duidelijk zijn. Het doel van de wireframes is om te tonen hoe de elementen op jouw website zouden komen en hoe de navigatie werkt. Te veel kleur of te complexe zaken zouden kunnen afleiden waardoor belangrijke functionaliteiten niet gecontroleerd worden. Gebruik deze tips tijdens het maken van wireframes:

  • Gebruik enkel zwart, grijs en wit.
  • Gebruik een standaard lettertype. (Zorg wel dat de hiërarchie tussen titels en tekst duidelijk blijft door het gebruik van grote en kleine fonts).
  • Gebruik geen afbeeldingen maar een simpele rechthoek met een kruis door om aan te duiden dat hier een afbeelding zal inkomen.

Conclusie: Waarom zou ik wireframes gebruiken?

Meteen aan het ontwerp beginnen is toch sneller (lees: goedkoper)? Door deze stap over te slaan zal het volledige proces vaak trager gaan. De tijd die je gebruikt voor het maken van de wireframes, bespaar je weer uit tijdens het ontwerp. Je hebt namelijk je klant al beter leren kennen en hebt al nagedacht wat de website juist moet doen en waarvoor deze gebruikt zal worden. Daarnaast zal het ook mogelijke functionaliteit problemen op sporen zodat je die er kan uithalen alvorens deze in productie gaan. Een volledig ontworpen pagina aanpassen zal je meer tijd en geld kosten dan in deze fase, laat staan wat het je zal kosten en wat voor frustraties het de gebruikers zal geven wanneer de website al live staat.

Foto Popkorn Team

Hulp nodig bij je wireframes?

Robin heeft al heel wat ervaring in wireframes en ux van een website, hij helpt je graag verder.

Meer over Robin Contacteer ons