Wat is een wireframe? [Inclusief parktijkvoorbeelden]

Het ontwerpen en ontwikkelen van een website is een gefaseerd proces. Iedere fase wordt gebruikt om beslissingen te nemen en brengt ons dichterbij het eindresultaat. Wireframes zijn hierin een belangrijk onderdeel. Maar wat is een wireframe nou precies? En waarom gebruiken we het? Dat leggen we uit in dit artikel. Als bonus sluiten we af met echte voorbeelden van wireframes.

Wat is een wireframe?

Een wireframe is een schematische weergave van een webpagina, of het scherm van een applicatie of mobiele app. Het vergelijkt zich het beste met een bouwtekening of blauwdruk van een gebouw door een architect. Hierop kun je precies zien waar wat komt te staan, maar nog niet hoe het er uit komt te zien.

Waarom wordt een wireframe gebruikt?

Webdesigners gebruiken wireframes om de lay-out en functionaliteiten van een pagina te ontwerpen. Het geeft de designer de ruimte om na te denken over de basisstructuur van de website, zonder zich te laten afleiden door grafische elementen. Zo kan hij/zij nadenken hoe de gebruiker door de website beweegt, hoe de content en elementen worden geplaatst en welke interacties de gebruiker zal hebben.

Voordelen van wireframes

Wireframes hebben een aantal voordelen. Dit zijn de belangrijkste:

1. Wireframes zijn snel en eenvoudig te maken. Het kan zo simpel als een schets met pen en papier.
2. Wireframes besparen tijd en geld in het webdesignproces.
3. Wireframes verbeteren de gebruikerservaring van de website.
4. Wireframes communiceren vroegtijdig hoe de website er uit gaat zien.

Welke soorten wireframes zijn er?

Er worden verschillende termen gebruikt als het om wireframes gaat, zoals mockups, prototypes, low-fidelity en high-fidelity. Hier leggen we uit wat het verschil is.

Verschil tussen low-fidelity en high-fidelity wireframes

Fidelity zegt iets over de mate van detail van de wireframes. Low-fidelity is meer abstract. High-fidelity is juist heel concreet. Hieronder zie je een voorbeeld van dezelfde website uitgewerkt in low- en high-fidelity.

Wat zijn mockups en hoe verschillen ze van wireframes?

Een mockup is een vroegtijdig ontwerp van een webpagina, meestal gebaseerd op aannames, met als doel om de opdrachtgever een gevoel te geven van de mogelijkheden en de competentie van de designer. Het is een verkoopmiddel. Wel kan het later de basis vormen van het ontwerptraject. Mockups en wireframes vervullen dus een andere rol.

Wat zijn prototypes?

Een prototype is een minimale versie van een website of app met als doel om te testen met de gebruikers. Zo kunnen productteams toetsen of de interface begrepen wordt door de doelgroep. Prototypes kunnen ook low-fidelity of high-fidelity zijn. Wanneer een wireframe interactief wordt gemaakt – door bijvoorbeeld onderdelen klikbaar te maken – kan het gebruikt worden als prototype.

Hoe maak je een wireframe?

Wat wireframen zo mooi maakt is dat iedereen het kan. Er is geen goed of fout. Tijd om aan de slag te gaan met de wireframes.

Wat zijn de stappen om een wireframe te maken?

Stap 1: Een sitemap tekenen

Begin altijd met een sitemap te tekenen. Een sitemap is een boomdiagram met daarop alle pagina’s van de website. Zo weet je welke pagina’s een wireframe nodig hebben.

Stap 2: Het doel van de pagina beschrijven

Met welke intentie komt de bezoeker op de webpagina terecht? En wat wil je dat de bezoeker op de pagina kan bereiken? Het is goed om dit duidelijk te hebben zodat je met intentie kunt wireframen.

Stap 3: Een overzicht van de content maken

Maak een overzicht van de teksten, afbeeldingen, video’s en functionaliteiten die je kwijt wilt op de pagina.

Stap 4: Schetsen met pen en papier

Start met pen en papier. En begin grof. De details komen later wel. Het gaat er om dat je een goed idee krijgt van de layout van de pagina.

Stap 5: Gedetailleerde uitwerking met ontwerpsoftware

Nu kun je meer gedetailleerd te werk gaan. Trek de schetsen van stap 4 over in ontwerpsoftware zoals Figma of Adobe XD en verdeel de elementen

Wat zijn de beste software voor wireframes?

Er zijn een hele hoop soorten en smaken software voor het maken van wireframes. Dit zijn onze favorieten:

Relume

Relume laat het maken van wireframes voelen als valsspelen. Relume is een online editor met daarachter een bibliotheek van standaardcomponenten die je kunt gebruiken om snel wireframes te maken. Waar het pas echt interessant wordt is hun AI-functie. Geef een korte omschrijving van je bedrijf en kies hoeveel pagina’s je wil. Relume AI zal een sitemap voor je genereren. Deze kun je naar wens aanpassen of finetunen. Wanneer je daarna op ‘genereren’ klikt wordt er automatisch wireframes van de pagina’s gemaakt.

Voordelen:

+ Snel klaar met de bibliotheek van standaardcomponenten

+ Nog sneller klaar door AI

+ Te exporteren naar Figma

Nadelen:

– Je bent niet zelf aan het ontwerpen. Dat zorgt voor generieke oplossingen voor misschien specifieke problemen.

Figma

Figma is de beste webdesign software van dit moment en leent zich ook prima voor het maken van wireframes. Enige ervaring met het werken met ontwerpsoftware is wel vereist. Figma koppelt makkelijk met andere software. Zo kun je de wifeframes die je met Relume hebt gemaakt exporteren naar Figma om ze daar aan te passen.

Voordelen:

+ High-fidelity wireframes

+ Makkelijk door te zetten naar grafische vormgeving

+ Integratie met andere tools

+ Gratis

Nadelen:

– Ervaring met ontwerpsoftware vereist

Balsamiq

Balsamiq is een low-fidelity wireframe tool dat makkelijk in gebruik is. Met de bibliotheek aan elementen klik je snel een wireframe in elkaar. Ideaal voor wanneer je snel iets nodig hebt om te communiceren naar teamleden of developers.

Voordelen:

+ Low-fidelity wireframes

+ Lage instap, waardoor ideaal voor beginners

+ Snel

Nadelen:

– Geen mogelijkheid voor high-fidelity wireframes

Tips voor het maken van een effectieve wireframes

Ga je zelf aan de slag met wireframes? Hier nog een aantal praktische tips:

1. Ga niet te vroeg de detail in. Begin met pen en papier.
2. Maak het jezelf makkelijk. Gebruik een kant-en-klaar wireframe kit zoals Platforma of Relume.
3. Besteed niet teveel tijd aan het maken van een wireframe. Het een middel om het designproces te vergemakkelijken en beland uiteindelijk in de prullenbak.

Bonus: Voorbeelden van echte wireframes

Bij ons webdesignbureau Upside gebruiken regelmatig wireframes als basis van het grafisch ontwerp. Hieronder zie je hoe wireframes zijn omgezet naar het grafisch ontwerp.