Wireframe: maak het zelf in 6 stappen

Je product of dienst kan nog zo geweldig zijn, maar als je webshop niet goed functioneert, verkoop je niks. En die goed functionerende, gebruiksvriendelijke webshop begint met een doordacht wireframe.

Als je iets verkoopt, wil je maar één ding: iedere klant met een big smile (oké, én een aankoop) de deur uit. In een fysieke winkel kun je hier persoonlijk invloed op uitoefenen. Maar hoe zorg je in je webshop voor blije klanten?

Online wordt de shopervaring van bezoekers voor een belangrijk deel bepaald door hoe je webshop werkt. Kun je snel en makkelijk vinden wat je zoekt? Is het in één oogopslag duidelijk waar je moet klikken, scrollen of swipen? Zit er een handige filterfunctie op je producten? Verloopt het afrekenproces soepel?

Wil jij een webshop (laten) bouwen die klanten een geweldige shopervaring biedt? Begin dan met het maken van een wireframe. Wat dat is, waarom je er eentje nodig hebt én hoe je er zelf een kunt maken, lees je in deze blog.

Wat is een wireframe?

Een wireframe is een schematisch ontwerp van je website, webshop, app of pagina. Een soort bouwtekening van de toekomstige indeling: welke pagina komt waar, waar komen de knoppen, hoe loopt de navigatie? Pas als alles een logische en gebruiksvriendelijke plek heeft, start je met bouwen.

De voordelen van een wireframe

Een wireframe maken is een must, zowel voor degene die de website wil laten bouwen als voor degene die dat uiteindelijk gaat doen. Het biedt een eenvoudig model om ideeën over te brengen, feedback te ontvangen en verwachtingen af te stemmen. Dankzij het wireframe weten alle betrokkenen precies wat ze van elkaar kunnen verwachten en waar het eindresultaat aan moet gaan voldoen. 

De belangrijkste voordelen van het maken van een wireframe voor een website of webshop zijn:

Een wireframe geeft duidelijkheid en overzicht

Voordat de bouw van start gaat, weet je precies hoeveel pagina’s er komen, hoe die zijn ingedeeld en welke functionaliteiten er allemaal zijn. Iedereen die erbij betrokken is (jijzelf, projectmanager, webdesigner, programmeur, front-end developer, SEO-specialist, etc.) werkt met dezelfde bouwtekening. Hierdoor zie je niets meer over het hoofd.

Met een wireframe bespaar je tijd en kosten

Een wireframe pas je snel en makkelijk aan. Eventuele problemen spoor je al op – en los je dus al op! – in deze fase. En dus niet pas als het ontwerp eigenlijk al klaar is of de ontwikkeling al in volle gang. Dat bespaart een hoop tijd, geld en gedoe. 

Het ontwikkelproces verloopt sneller 

Aan de hand van het wireframe weet de ontwikkelaar precies wat er moet gebeuren. Daardoor verloopt het ontwikkelproces een stuk sneller dan zonder wireframe. De ontwikkelaar kan zo ook vrij nauwkeurig inschatten wanneer de webshop, website of app wordt opgeleverd. 

Terugkerende elementen zijn herbruikbaar

Tijdens het maken van websites of applicaties krijg je vaak te maken met terugkerende elementen of functionaliteiten. Als je een sterk wireframe hebt, hoef je die niet extra te ontwerpen of te maken, je kunt ze gewoon hergebruiken. Scheelt enorm veel tijd!

Welke soorten wireframes zijn er?

Een wireframe is een wireframe, zou je denken. Toch zijn ze niet allemaal hetzelfde. De verschillen zitten ‘m, net als bij ‘gewone’ bouwtekeningen, in de mate van complexiteit. Van een snelle, simpele schets met potlood op papier tot een zeer gedetailleerd, digitaal wireframe waarin je zelfs interacties kunt bekijken. 

Globaal zijn de volgende soorten te onderscheiden:

Basis wireframe (zeer eenvoudig)

Simpele schetsen waarmee je, meestal in zwart-wit, de basisstructuur en indeling weergeeft, zonder al te veel details. Je ziet alleen vlakken, lijnen, dummy-teksten en placeholders voor afbeeldingen.

Basis wireframe met annotaties

Annotaties zijn aantekeningen die je toevoegt aan de verschillende onderdelen van het wireframe. Hierin beschrijf je wat het doel en de functie is van elk afzonderlijk item. 

User flow wireframe (gebruikersstroom)

Soms zijn annotaties niet voldoende om duidelijk te maken hoe een gebruiker logisch door de pagina’s kan navigeren. In dat geval kun je beter een wireframe maken voor de gebruikersstroom (user flow). 

Je maakt dan een visuele weergave van de stappen die een gebruiker neemt om op je website een doel te bereiken. Welke schermen krijgt de gebruiker te zien bij welke stap? Met welke knoppen navigeert iemand van het ene scherm naar het andere? Kortom, welke handelingen moet een koper in jouw webshop achtereenvolgens uitvoeren om een aankoop succesvol af te ronden? 

Interactief wireframe (high-fidelity)

Dit is een gedetailleerd uitgewerkt wireframe, dat sterk lijkt op het uiteindelijke ontwerp. Hierin kun je zelfs bepaalde basisinteracties binnen of tussen individuele wireframes ervaren, zoals swipen, klikken en tikken. Doordat je dit allemaal al in deze fase hebt gezien, beoordeeld, bijgesteld en uiteindelijk goedgekeurd, scheelt dat veel tijd bij het ontwerp en de ontwikkeling.

Zo maak je zelf een wireframe in 6 stappen

Ben jij van plan je eigen wireframe te maken voor je webshop? Kies dan eerst je tools. Wil je een basiswireframe, dan heb je aan papier en een potlood genoeg, al is een gum misschien ook handig. 

Pak je het liever iets gedetailleerder aan, dan kun je bijvoorbeeld gebruikmaken van Microsoft PowerPoint, Figma, Adobe InDesign, Framer of Lucidchart. 

Stap 1: Bepaal je doel

Wat wil je met je webshop of website bereiken? Wil je informeren, verkopen of leads verzamelen? Met een helder doel voor ogen bepaal je makkelijker hoe de structuur moet worden. Je belangrijkste uitgangspunt: elke bezoeker moet de weg op je website feilloos weten te vinden. 

Stap 2: Doe onderzoek

Voer marktonderzoek en een concurrentieanalyse uit. Om een succesvolle webshop te lanceren, is het belangrijk dat je weet wat er speelt. Wat zijn de trends? Wie zijn je belangrijkste concurrenten? Hoe ziet hun webshop eruit? Verzamel use cases, marktonderzoekgegevens en kopersprofielen. Zorg dat je alle informatie goed documenteert, zodat je die op elk gewenst moment tijdens het ontwerpproces erbij kunt halen. 

Stap 3: Maak een flowchart

Breng schematisch in kaart hoe een bezoeker zich door jouw webshop beweegt, vanaf het moment van binnenkomst tot en met het moment van afrekenen. 

Geef ruwweg antwoord op de volgende vragen: 

• Op welk punt komen gebruikers je webshop binnen?
• Welke handelingen moet de gebruiker uitvoeren? Waar moeten ze op klikken? En waar komen ze daarna terecht? 
• Op welk punt verlaten de gebruikers je webshop weer?

Breng dit traject gedetailleerd in kaart in een flowchart. Zo kun je bij het ontwerp geen cruciale elementen vergeten. Denk bijvoorbeeld aan een prijsfilter, een winkelmandje of een betaalfunctie. Als je één van die belangrijke onderdelen vergeet, raakt een bezoeker makkelijk de weg kwijt in je webshop. En dat is funest voor je omzet én voor je reputatie.

Zorg dat de gebruikersflow logisch is. Houd rekening met alles waar een gebruiker tijdens het navigeren behoefte aan zou kunnen hebben, zoals een artikel verwijderen uit het winkelmandje, een product zoeken op productnaam of productreviews lezen.

Tip: Geen idee hoe je zo’n flowchart moet maken? Maak bijvoorbeeld gebruik van dit sjabloon. 

Stap 4: Schets de basisindeling

Maak met simpele blokken een basisstructuur voor je webshop. Begin met de hoofdelementen, zoals navigatie, content en call to actions. Wat moet waar komen? 

Ook nu geldt: denk altijd vanuit de eindgebruiker van je webshop. Wat moet die zien bij het openen van een pagina? Wat is een logische vervolgstap? 

In dit stadium hoef je je nog niet druk te maken over grafische aspecten, zoals kleuren en lettertypes. 

Stap 5: Voeg details toe

Nu je de basisindeling hebt staan, kun je starten met het toevoegen van details. Begin met het invullen van de precieze locaties voor elementen zoals knoppen, formulieren en menu’s. Voeg dummy-tekst (zoals ‘Lorem ipsum’) toe om plekken waar tekst moet komen te staan. 

Denk goed na over waar tekstvakken, afbeeldingen, navigatiebalken en knoppen moeten komen. Zorg dat knoppen duidelijk zichtbaar zijn en dat de belangrijkste handelingen snel en makkelijk vindbaar zijn. 

Stap 6: Test en optimaliseer

Laat collega’s of klanten naar je wireframe kijken en vraag om feedback. Zien zij verbeterpunten? Breng waar nodig verbeteringen aan. Hoe meer feedback, hoe beter het eindresultaat. 

Aan de slag met je wireframe

Het maken van een wireframe kost even wat tijd en moeite. Maar die is het meer dan waard. Want nu je wireframe klaar is, kun je meteen verder met het realiseren van je – gebruiksvriendelijke – webshop! 

Veelgestelde vragen over wireframes

Wat is een wireframe?

Een wireframe is een schematisch raamwerk van een webshop, website, app of pagina, dat je maakt voorafgaand aan het ontwerp en de bouw. Je kunt het vergelijken met een bouwtekening. De focus ligt op de structuur, er zijn nog geen kleuren of afbeeldingen. 

Wat zijn de voordelen van een wireframe?

Een wireframe maken biedt veel voordelen, zowel voor de toekomstige eigenaar van de webshop als voor de ontwikkelaar die deze gaat realiseren: het creëert duidelijkheid en overzicht, je bespaart er tijd en kosten mee, het ontwikkelproces verloopt veel sneller en helder en een sterk wireframe is herbruikbaar.

Welke soorten wireframes zijn er?

Globaal onderscheiden we de volgende soorten: een basis wireframe, een basis wireframe met annotaties, een user flow wireframe (gebruikersstroom) en een interactief wireframe (high-fidelity). 

Met welke tools kun je een wireframe maken?

Het eenvoudigste wireframe maak je gewoon met potlood en papier. Voor complexere wireframes kun je je ook laten ondersteunen door een handige tool, zoals Microsoft Powerpoint, Figma, Adobe InDesign, Framer of Lucidchart.