Wat is een wireframe?

Wil jij meer weten over webdesign of sta je op het punt om een nieuwe website op te zetten? Dan ben je hoogstwaarschijnlijk in aanraking gekomen met de term wireframing. Maar wat is nu precies een wireframe, hoe gebruik je het en bovenal: waarom achten professionele websitebouwers het essentieel?

Wat is een wireframe?

Alhoewel een wireframe gezien kan worden als het de fundatie van webdesign is het in de kern een simpel concept. Een wireframe is een 2 dimensionale schets waarin de de volgende zaken van een te bouwen website worden vastgelegd:

• Pagina structuur
• De layout per pagina
• Functionaliteit
• Gebruiksgemak

Er zijn verschillende manieren om een wireframe op te zetten. Afhankelijk van de fase in het ontwikkelproces kan een wireframe losjes of heel gedetailleerd zijn. Men kan een wireframe op papier schetsen, maar ook compleet uitwerken via speciale computerprogramma’s.

Wanneer gebruik je een wireframe?

Je gebruikt een wireframe voordat er daadwerkelijk begonnen wordt met het bouwen van een website. Maak je gebruik van een webdesign bureau, dan zal een wireframe in één van de eerdere gesprekken opgesteld worden. Vervolgens kunnen UX ontwikkelaars de wireframe uitwerken, zodat het vervolgens gebruikt kan worden om de website naar behoren te bouwen.

Waarom maak je gebruik van wireframing?

Er zijn verschillende redenen om wireframing toe te passen. In onze ervaring is het een essentieel onderdeel gedurende het ontwerpproces. We zouden pagina’s vol kunnen schrijven met casestudies wanneer wireframes van pas zijn gekomen, de redenen kunnen als volgt samengevat worden:

Met een wireframe leg je snel de initiële wensen vast

Eén van de grootste uitdagingen die men tegenkomt tijdens het bouwen van een website ligt direct aan het begin van het proces. Want hoe zet je nou een idee om in een daadwerkelijk functionerende website? Dit is waar een wireframe bij komt kijken. Met een initiële schetsronde kan er snel visueel worden vastgelegd hoe de website in grote lijnen moet werken. Daarnaast is het mogelijk om bepaalde layout wensen zoals indeling, afbeeldingen, en functionaliteit uit te schetsen.

Dankzij wireframing kan je snel zien hoe een website moet functioneren

Er komt veel kijken bij het maken van een website. Van webshops tot bedrijfspagina’s, men heeft bijna altijd te maken met multi page websites. Maar hoe moet dat precies werken? Welk element verwijst waar naartoe? Wat is de indeling en wat gaat de user-flow worden? Dit zijn allemaal zaken die men vast kan leggen met wireframing.

Dit is niet alleen handig voor de eigenaar, maar ook zeker voor de ontwikkelaars. Immers, het is een compleet naslagwerk die developers raad kunnen plegen tijdens het bouwen van een website of webshop.

Het geeft de te implementeren functionaliteiten aan

Iedere website is uniek. Ten minste, dat is wel de bedoeling. Zo heeft een webshop veel baat bij afbeeldingen, slimme zoekfuncties en beknopte informatie. Daartegenover staat dat fysieke bedrijven vaak een online informatiepunt nodig hebben. Denk aan verschillende landingspages met tekst, afbeeldingen of zelfs video’s. Misschien moet de site zelfs extra functies krijgen zoals een rekentool, contactsystemen, etc. Dit alles en meer kan men vastleggen in een wireframe.

Een wireframe houdt de ontwikkeling user-focused

Tijdens het bouwen van een website krijg je te maken met honderden tot duizenden kleine keuzes. Vaak ziet men na een tijdje, zonder dat ze te doorhebben, niet meer wat het doel was. Dit resulteert dan ook in websites die theoretisch alles functionaliteiten bevatten, maar in gebruik toch niet prettig zijn. Door een wireframe te gebruiken houdt men de ontwikkeling user-focused, en verliest men nooit de visie die is opgesteld.

Het is een snelle en effectieve manier om aanpassingen te maken

Bijna geen enkele website komt eruit te zien zoals het initieel ontworpen is. Misschien bedenkt men tijdens het bouwen nieuwe functionaliteiten of voegt men bepaalde pagina’s samen. Dit soort veranderingen en wensen kunnen snel onoverzichtelijk worden door vele calls, mails en meetings. Door het opgestelde wireframe te updaten met nieuwe wensen kan er heel snel en effectief worden nagedacht over de daadwerkelijke doelen en hoe dit vormgegeven moet worden.

Lo-fi en hi-fi wireframes

Zoals we eerder al hebben benoemd zijn er verschillende manieren om een wireframe op te stellen. In de praktijk kunnen we deze manieren onderverdelen in twee termen:

• Low fidelity (Lo-fi) wireframes
• High fidelity (Hi-fi) wireframes

Het verschil zit niet alleen in de uitwerking, maar ook het moment waarin het type wireframe gebruikt wordt.

Wat is een lo-fi wireframe?

Een lo-fi wireframe is vaak de initiele (ruwe) schets van een site. Hierin wordt vaak in letterlijke grote lijnen vastgelegd hoe een site eruit moet komen te zien en welke functies het moet krijgen. Ze worden vaak met de hand getekend, maar kunnen ook digitaal gemaakt worden.

Wat is een hi-fi wireframe?

Een hi-fi wireframe wordt opgesteld zodra er een goed beeld is van wat het eindresultaat moet worden. Een high fidelity wireframe wordt altijd digitaal gemaakt met behulp van speciale programma’s. Het gaat vaak om layouts die op de pixel nauwkeurig zijn, waar schaal, layout en kleur een exacte template vormen voor wat de site uiteindelijk moet worden. In de fase waar men een hi-fi wireframe gebruikt worden bijna nooit meer grote veranderingen gedaan aan de vormgeving en functionaliteit van de site. Ontwikkelaars gebruiken dit bestand als naslagwerk om de site zo precies mogelijk te maken.

Wireframes voor verschillende platforms

Als we denken aan wireframing, dan denken we eigenlijk altijd aan een desktop omgeving. Tegenwoordig is het echter ook belangrijk (en misschien nog wel belangrijker) om smartphone gebruiker mee te nemen met een eigen wireframe. Een goede website heeft immers responsive webdesign. Mobiele gebruikers gaan uiteindelijk anders om met een website dan een desktop gebruiker. Het beeldscherm is lang in plaats van breed, ze scrollen meer en klikken minder.

Welke tools gebruik je om wireframes te maken 

Zelf een wireframe maken hoeft niet moeilijk te zijn. Een lo-fi wireframe kan je simpelweg met de hand uittekenen op een aantal A4’tjes. Wil je wat meer detail weergeven en digitaal heel precies een wireframe maken? Dan zijn hier een aantal programma’s voor:

Invision

Wie op zoek is naar een makkelijk wireframing programma kan goed beginnen met Invision. Alhoewel het niet veel functionaliteiten heeft kan je er heel makkelijk ieder resultaat mee maken. Het is bovenal heel gebruiksvriendelijk voor beginners.

Axure

Wie wat meer uit zijn wireframe wil halen kan dit absoluut uit Axure halen. Het heeft meer functionaliteiten dan Invision maar heeft ook een grotere learning curve. Wij raden het niet aan voor website eigenaren, maar ben je een webdeveloper dan kan je veel leren van Axure.

Adobe XD

Adobe XD wordt gezien als een van de grootste wireframe programma’s en begeeft zich tussen lo-fi en hi-fi wireframing in. Je kan heel eenvoudig visueel indrukwekkende wireframes opstellen. Deze wireframes zijn niet perse pixelperfect, maar vormen een heel duidelijk beeld van het resultaat. Dit is in sommige gevallen meer dan genoeg om een website compleet te ontwikkelen.