Verschillende soorten wireframes
Het ene wireframe is het andere niet. Er zijn verschillende gradaties op het gebied van details en functionaliteiten. Zo maken we bij wireframes onderscheid tussen low-fidelity, high-fidelity en prototypes. We lichten de verschillende niveaus graag aan je toe.
Low-fidelity wireframe
Dit is de eenvoudigste vorm van wireframing. Er worden hier alleen vlakken, lijnen en tekstvakken met dummycontent weergegeven in zwart en wit. Een low-fidelity wireframe is zeer snel op te maken, waardoor je snel een beeld krijgt van hoe de indeling van de website- of shop er uiteindelijk uit komt te zien. Vaak worden dit soort wireframes zelfs gewoon geschetst op een vel papier, maar ze kunnen ook digitaal gemaakt worden.
High-fidelity wireframe
Bij high-fidelity wireframing wordt er al een stuk meer gebruik gemaakt van details. In zo een ontwerp wordt gewerkt met daadwerkelijke koppen, bodyteksten en teksten in buttons. Qua kleurgebruik worden hier verschillende grijstinten toegepast om meer onderscheid te kunnen maken, en soms zelfs kleur! Ook zie je in een high-fidelity wireframe vaak al logo’s en afbeeldingen.
Prototype
Als we nog een stap verder gaan komen we uit bij een prototype. Dit is een klikbaar wireframe. Je kunt hierbij tussen verschillende pagina’s klikken en op bijvoorbeeld buttons klikken die een bepaalde actie uitvoeren. In sommige gevallen worden er aan een prototype zelfs al animaties toegevoegd. Dit is dus een heel uitgebreide versie van wireframing en komt al in de buurt van een echt design.
Wat is het belang van een wireframe?
Je kunt een wireframe zien als de rode draad bij het bouwen van een website of -shop. Zonder rode draad is het lastig om gestructureerd en doelgericht te werken. In deze fase bepaal je wat het doel van je website/webshop gaat zijn en welke functionaliteiten er nodig zijn om dat doel te bereiken. De focus ligt op de User Experience (UX), zonder afleiding van designelementen. In deze fase overleg je alle wensen en test je of de flow en structuur van de website of -shop passen bij je einddoel.
Door veel tijd in deze fase te stoppen en te zorgen dat alles naar wens werkt bespaar je enorm veel tijd (en geld!) in de daadwerkelijke designfase. Ze zeggen niet voor niks ‘een goed begin is het halve werk’, want dat is bij wireframing echt zo!
Bespaar tijd en geld
Zoals al aangegeven kun je een wireframe zien als de bouwtekening van een website/webshop, net als een bouwtekening van een huis. Je begint normaal ook niet aan het bouwen van een huis zonder eerst een technische tekening te maken. Stel je begint wel direct te bouwen, dan is de kans groot dat je er halverwege (of eerder) achter komt dat je idee technisch niet mogelijk is of niet werkt zoals je eigenlijk wilt. Als resultaat moet je alles weer afbreken en opnieuw beginnen.
Zo gaat het bij het ontwerpen van een website of -shop precies hetzelfde. Als je zonder een vooraf uitgedacht plan begint met het webdesign, compleet in tekst en beeld, dan is de kans aanwezig dat bepaalde zaken niet functioneren zoals je wilt, of dat een pagina-indeling optisch niet werkt. Je dient alles weer ‘’af te breken’’ en weer helemaal opnieuw te beginnen. Zonde van de tijd (en het geld)! Maak je een wireframe – wat een schets is van de website/webshop – dan kun je nog ‘’gummen’’ en wijzigingen aanbrengen. Dit kost een heel stuk minder tijd en kun je blijven doen totdat alles helemaal tot in de puntjes klopt en werkt zoals jij wilt.
Snel en efficiënt
Tijdens het proces van wireframing vindt er veel communicatie en conceptvalidatie plaats. Er worden feedback rondes gehouden met de klant totdat beide partijen helemaal tevreden zijn met het resultaat. Pas dan begint de ontwerpfase. Deze verloopt nu een stuk sneller en efficiënter, omdat er al exact uitgetekend is waar alles moet komen te staan en welke functie de pagina’s moeten hebben.
In 6 stappen naar het perfecte wireframe
Nu we het erover eens zijn dat het maken van een wireframe een onmisbaar onderdeel is in de wereld van webdesign, is het tijd om uit te leggen hoe je een wireframe maakt. Hier is een handig stappenplan voor.
Stap 1: bepaal de doelstelling van de website of -shop
Communiceren is enorm belangrijk wanneer je een wireframe gaat maken. Ga met de klant in gesprek en achterhaal wat de wensen zijn en voor welk doel de website/webshop moet dienen. Welke functionaliteiten zijn er allemaal nodig en welke content wilt de klant kwijt? Zorg dat je al deze informatie goed op een rijtje hebt, zodat je weet waar het eindproduct uiteindelijk aan moet voldoen.
Stap 2: maak de eerste ruwe schets
Schets alle details uit in één document. Waar ongeveer komen afbeeldingen te staan, waar komt content, etc.? Door deze schets te maken kun je de klant visueel laten zien hoe hun idee er uiteindelijk uit zal komen te zien. Dit kan een schets zijn die met potlood op papier is getekend, of een ruwe digitale versie van het wireframe.
Stap 3: ontvang feedback
Heb je de ruwe schets op papier staan, dan presenteer je deze aan de klant. Wellicht dat de klant zelf een ander beeld in gedachte had en hier en daar nog wat wilt aanpassen. Dit is het moment om dat te doen! Noteer alle feedback en neem deze mee naar de volgende stap.
Stap 4: ‘’ontwerp’’ het wireframe
Voer alle feedback die je hebt gekregen op de ruwe versie, indien functioneel/technisch mogelijk, door. Je gaat het wireframe nu compleet opmaken. Afhankelijk van het type wireframe ga je in deze fase al iets gedetailleerder te werk. Dit is het moment om eventuele kleuren en logo’s toe te voegen en ervoor te zorgen dat bepaalde buttons werken.
Stap 5: testen
Neem je wireframe mee naar de klant en test of alle functionaliteiten naar wens werken. Voldoet het ontwerp aan de doelstelling en is het wireframe gebruiksvriendelijk? Loop je tegen zaken aan die nog niet optimaal functioneren of niet helemaal naar wens zijn, dan stel je dit gemakkelijk nog een keer bij.
Stap 6: groen licht
Na het doorvoeren van eventuele aanpassingen aan de hand van de testfase heb je het officiële wireframe klaar. Zodra de klant groen licht geeft op het wireframe is het tijd om te beginnen met de daadwerkelijke designfase. Het uitgetekende plan gaat nu realiteit worden.
Hulp nodig?
Heb jij behoefte aan een nieuwe website of -shop? Dan weet je nu hoe je dit serieus en efficiënt aan kunt pakken. Heb je er zelf niet de capaciteiten of de tijd voor en ben je ervan overtuigd dat de wireframe-fase essentieel is bij het ontwerpen van je nieuwe website/webshop? Dan ben je bij ons aan het juiste adres.
Wij helpen je graag op weg! Voor meer informatie over wireframing en de cases waarvoor we dit al hebben mogen doen, check je deze pagina.
