De Wireframe Bijbel: alles wat je moet weten over wireframes

Ook ik, als webdesigner in Antwerpen, ben een fanatieke gebruiker van wireframes. Waarom wireframes de perfecte manier zijn om tot een betere (en goedkopere) website te komen? Ik geef 3 overtuigende redenen:

1. Wireframes zijn de bouwtekening van de site. Nog voordat overgegaan wordt tot het bepalen van kleuren, foto’s en lettertypes zullen de wireframes in grove lijnen de verschillende functies van een website tonen. Mocht jij als klant wijzigingen willen aanbrengen in deze lay-out, dan is dit door de designer makkelijk en snel te doen. (Wil je in een latere fase de lay-out van de site veranderen, dan komt daarbij veel meer werk kijken, wat het proces duurder maakt.)
2. Een wireframe maakt inzichtelijk hoe de gebruiker door de website zal gaan om uiteindelijk tot een conversie te komen. Een wireframe is dus een interactie-ontwerp. De wireframes zijn een praatplaatje waarmee de website-eigenaar en de designer de gebruiksvriendelijkheid van de toekomstige site kunnen verfijnen.
3. Een wireframe maakt het voor jou als klant makkelijker te begrijpen wat de designer met bepaalde termen bedoelt. Woorden als ‘Google Maps-integratie’ en ‘productfilters’ zijn sneller te bevatten wanneer je ze ziet in plaats van alleen hoort.

Overtuigd van het belang van wireframes? Dan duiken we rap dieper in de materie. Maak een grote kan koffie en volg mij op een digitale reis door deze diepgaande Wireframe Bijbel.  

Hoe zien wireframes eruit?

Wireframes zien er doorgaans uit als blokvormige schetsen in grijstinten. Wanneer ik zelf wireframes maak, doe ik dat in het programma Balsamiq. Wireframes in Balsamiq hebben wel iets weg van handgetekende schetsen: Zoals je uit de bovenstaande afbeelding (en mijn eerdere uitleg) begrijpt, is het doel van wireframes niet om ‘mooi’ te zijn. Het enige wat een wireframe moet doen, is duidelijk maken welke functie waar komt en hoe de sitegebruiker die functies gebruikt om tot een conversie te komen.  

Laat wireframes praten: het voordeel van teksten

Wil je tot een echt goede site komen, schrijf dan eerst de teksten van je site voordat je de wireframes maakt. Wanneer je dit doet handel je naar het principe dat de vorm de inhoud moet volgen, en niet de inhoud de vorm. Ga maar na: jij en de designer besteden veel tijd aan het perfectioneren van de wireframes. Vervolgens spenderen jullie nog meer tijd (en geld) aan een prachtig ontwerp. Hoe zonde zou het zijn wanneer je er vervolgens achterkomt dat de teksten die je in de site wilt hebben helemaal niet goed passen? Er is in het ontwerp te weinig plek voorzien voor productomschrijvingen, of juist te veel plek op de contactpagina. Om het beste resultaat te krijgen volgt de vorm de functie. En de functie wordt mede bepaald door de teksten, want teksten sporen klanten aan tot een conversie. Ik vraag de klant daarom om eerst de teksten te schrijven. En indien hij dat aan een professionele copywriter wil overlaten, dan doet mijn collega Vincent het schrijfwerk. Het resultaat is een wireframe waar de uiteindelijke teksten perfect in passen, zoals deze schetsen van schoonmaakuitzendbureau 365CleanIt laten zien: Terwijl mijn collega de teksten schreef voor deze site heeft hij bovendien nagedacht over de vindbaarheid van de site. In de teksten heeft hij SEO-zoekwoorden verwerkt, die ik in een latere fase (bij het daadwerkelijke bouwen van de pagina’s) in URL’s en afbeeldingstitels kon laten terugkomen. Zo zorgen we ervoor dat de websites die we maken hoger in Google komen dan die van jouw concurrent.  

Lees ook het artikel:

8 ontwerpfouten op websites waarmee je omzet verliest

 

Wireframes maken als ux-oefening

Ook wanneer je geen webdesigner bent, maar (ik raad maar iets) een ondernemer of marketingmedewerker, is het een leerzame oefening om af en toe wireframes te maken voor jouw website. Als oplettende ondernemer bemerk je ongetwijfeld af en toe minpunten van jouw site. Ook zal je af en toe opmerkingen krijgen van klanten. (‘Ik kan de contactgegevens niet vinden.’) Dit soort feedback is perfecte voeding om de gebruikerservaring (vaak ook de user experience of UX genoemd) te verbeteren. En hoe kan je dat beter doen door wireframes te maken die je later aan een webdesigner kunt voorleggen?  

Hoe maak je wireframes?

Wireframes maak je in grafische software. Ik noemde reeds het programma Balsamiq, maar er zijn meer opties.