We realiseren veel websites en webshops en voor de meeste projecten ontwikkelen we deze middelen op maat. Om deze projecten goed aan te pakken geloven wij in het werken via verschillende fasen: plan van aanpak, wireframe, grafisch ontwerp, codering en de live-gang.
We duiken in dit artikel in op de tweede fase van dit traject: het wireframe. Lees wat dit is en om welke 4 redenen wij dit toepassen.
Wat is een wireframe?
Zoals architecten een blauwdruk maken, maken wij een wireframe. Het is een simpele schetsmatige lay-out van de website in zwarte lijnen, ondersteunt met grijstinten. In een wireframe worden grafische keuzes als lettertypes, kleuren en logo’s zoveel mogelijk vermeden. Je bepaalt dus puur in hoofdlijnen hoe elke pagina van de website opgebouwd moet worden.
1. Forceert je na te denken over gebruiksvriendelijkheid en functionaliteiten
In het Plan van Aanpak hebben we in samenwerking met de klant doelen vastgesteld waarvoor de we website gaan ontwikkelen. Ook zijn we in gesprek geweest met de doelgroep. Dit gezamenlijk bepaalt mede de volledige lay-out van de website.
Omdat je puur met zwarte lijnen en grijze vlakken mag werken wordt je geforceerd om over een aantal zaken na te denken: de gebruiksvriendelijkheid van de website, conversie-paden, namen van hyperlinks en plaatsing van navigatie. Allemaal met de eerdere gestelde doelen in het achterhoofd. Zo ontstaat er een hele sterke focus op de kern van de website en daarmee is dit misschien wel de belangrijkste redenen om een wireframe te maken.
2. Een wireframe maken scheelt tijd op de lange-termijn
Het maken van een wireframe is een extra stap in het proces en lijkt daarmee op het eerste gezicht juist meer tijd te kosten, maar op lange termijn scheelt het juist enorm veel tijd. Dit zit zo: een grafisch ontwerp maken is tijdrovend, omdat elk detail moet kloppen. Als na het maken van zo’n tijdrovend grafisch ontwerp blijkt dat betrokkenen (of dat nou de projectmanager, de klant, of de developer) totaal iets anders voor ogen hadden zijn alle gemaakte uren voor niks geweest. Een wireframe kost aanzienlijk minder tijd, dus is zeer geschikt om snel te kunnen peilen of alles neuzen dezelfde kant opstaan.
3. Het creëert een hiërarchie in je content
Een wireframe forceert je ook om prioriteiten te stellen binnen de content op je website. Welke pagina’s komen in het hoofdmenu? En welke pagina’s kunnen naar een submenu of zelfs naar de voeter? Ook bepaal je in een wireframe op welke plekken je bepaalde content wil.
Daarnaast zorgt het voor hiërarchie binnen elke pagina. Elke pagina staat bewust op de site om mee te werken aan het doel van de website. Daarmee heeft elke pagina weer zijn eigen doel binnen dit grotere geheel. Zo heeft een contactpagina een ander doel dan de homepage en hebben beide pagina’s daarom ook een hele andere opbouw en hiërarchie nodig.
4. Het levert gerichtere feedback op van de doelgroep en van betrokkenen
Als je direct een grafisch ontwerp zou presenteren, verzand je als snel in discussies over bijvoorbeeld kleuren, fonts en fotokeuze. Deze feedback is erg waardevol, maar je wil óók feedback op functionele keuzes. Door zowel een wireframe als een grafisch ontwerp te maken trek je deze discussies los van elkaar.
Je hoort het al, genoeg (goede) redenen dus om gebruik te gaan maken van wireframes. Kriebelen jouw handen al om met wireframes aan de slag te gaan? Die van ons stoppen nooit met kriebelen. Mochten we je ergens mee kunnen helpen, dan mag je altijd contact met ons opnemen. Succes!