Wil je een webshop beginnen?

Wireframe: de bouwtekening voor je website maak je in 6 stappen

wireframe

Dit is een gastblog van Pleun Renes, copywriter bij Impact Media Concepts. Bij dit media- & marketingbureau hebben ze alle kennis en creativiteit in huis om webshops beter te laten converteren. In deze blog doen ze uit de doeken hoe een sterk wireframe daar aan bijdraagt. 

Om jouw producten of diensten écht te verkopen heb je natuurlijk een sterke webshop of app nodig. Die realiseer je niet van de één op de andere dag. Hiervoor moeten verschillende stappen doorlopen worden. Eén van de belangrijkste stappen is het maken van een wireframe. Wat is dit precies? Wat zijn de voordelen ervan? En hoe maak je een sterk wireframe? 


Start je eigen webshop met Shopify! Probeer ons platform 14 dagen geheel vrijblijvend – je zit nergens aan vast.


Inhoudsopgave

Wat is een wireframe?

Kom jij uit het digitale design-vak? Dan heb je ongetwijfeld al eens van wireframes gehoord. Maar voor wie dit niet het geval is, leg ik de definitie graag uit.

Een wireframe is een schematisch raamwerk van een website, app of pagina. Kortom, het is de bouwtekening van jouw website of app waarbij de focus ligt op inhoud en niet op grafisch aspect. 

Het doel van een wireframe is om alle elementen en functionaliteiten een logische en gebruiksvriendelijke plek te geven zonder daarbij afgeleid te worden door visuele aspecten. Je ziet in een wireframe dan ook geen kleuren, illustraties en typografische stijl terug. Doordat er gemakkelijk met de verschillende elementen verschoven kan worden kom je uiteindelijk tot de meest bruikbare opstelling van content op jouw pagina's.  

wat is een wireframe

De belangrijkste voordelen van een wireframe

Het maken van een wireframe biedt veel voordelen voor zowel de klant als de ontwikkelaar die het geheel uiteindelijk gaat realiseren.  

Overzicht creëren 

Of je nu een grote of kleine website gaat bouwen, het maken van een wireframe is altijd verstandig. Een wireframe geeft je namelijk een duidelijk overzicht van de hoeveelheid webpagina's en hoe deze zich tot elkaar verhouden. Alle betrokkenen (klant, projectmanager, programmeur, front-end developer, zoekmachinespecialist etc.) kunnen aan de hand van een wireframe zien of alle doelen en functionaliteiten toegepast worden. Hierdoor kun je niets meer over het hoofd zien. Dat bespaart natuurlijk een hoop tijd.  

De ontwikkelaar heeft alle functionaliteiten helder 

Aan de hand van een wireframe is het voor de ontwikkelaar duidelijk wat er moet gebeuren. Hierdoor kan hij een schatting maken van wanneer de klant de website of applicatie kan verwachten. Omdat de ontwikkelaar al precies weet wat er moet gebeuren, verloopt het gehele proces een stuk sneller. 

Een wireframe is snel en gemakkelijk aan te passen 

Het aanpassen van een wireframe gaat sneller dan het aanpassen van een compleet uitgewerkt visueel design. Een wireframe is eenvoudig opgezet waardoor deze in een vroeg stadium gemakkelijk aangepast kan worden. Verderop in het proces zouden deze aanpassingen veel meer tijd en geld kosten. Steek daarom iets meer tijd in het opzetten van je wireframe 

Een sterk wireframe is herbruikbaar 

Tijdens het maken van websites of applicaties krijg je regelmatig te maken met terugkerende elementen of functionaliteiten. Met een wireframe kun je deze onderdelen eenvoudig hergebruiken. Dit scheelt enorm veel tijd. Je hoeft bepaalde dingen hierdoor namelijk niet vaker te ontwerpen of te maken. 

wireframe maken

De vier verschillende soorten wireframes

Over het algemeen kennen we vier verschillende soorten wireframes. Dit begint met de meest eenvoudige wireframes (zwart-wit of blauwdruk) en eindigt bij de meest complexe varianten. Deze complexe wireframes zijn enorm gedetailleerd waardoor je zelfs interacties kunt ervaren.  

1. Een basiswireframe 

Deze variant wordt ook wel eens het low-fidelity prototype genoemd. Het is een zeer eenvoudig schema voor een pagina dat meestal in zwart-wit wordt weergegeven. Bij een basiswireframe worden alleen vlakken, lijnen en dummy-content gebruikt. Hierbij kun je denken aan Lorem-ipsum teksten en grijze vlakken als photo-placeholders. De wireframes zijn snel op te zetten waardoor je al snel een globaal beeld krijgt van jouw pagina, website of applicatie. 

2. Meer details met een geannoteerd wireframe 

Bij een geannoteerd wireframe wordt er een groot aantal details toegevoegd aan het basiswireframe. Er worden annotaties aan de zij- of onderkant van het wireframe geplaatst. Deze annotaties beschrijven ieder item van het wireframe. Er wordt hierin kort uitgelegd wat de functie en het doel van ieder item is. 

3. Een gebruikersstroom wireframe 

In sommige gevallen is een annotatie niet voldoende om te laten zien hoe een gebruiker logisch door de pagina's kan bewegen. In dit geval kun je beter een gebruikersstroom wireframe maken. Dit is een statische weergave van een volledig interactief wireframe. Het kan ook een slideshow of collectie wireframes bevatten om een gebruikersstroom te laten zien.  

4. Interactief wireframe met hoge definitie 

Bij de laatste soort is het mogelijk om interacties te ervaren tussen individuele wireframes. Denk aan tikken, klikken en swipen. Dit scheelt voor zowel de ontwikkelaar als de ontwerper ontzettend veel tijd.  

Zo maak je een sterk wireframe

Ben jij klaar om jouw eigen wireframe te maken? Dan kan dit uiteraard met pen en papier. Echter zijn er ook diverse tools die jou hierbij kunnen ondersteunen. Denk aan Microsoft Powerpoint, Adobe Indesign of Balsamiq. Of jij jouw wireframe nou met pen en papier of met een wireframe tool maakt, er zijn altijd een aantal vaste stappen die je moet volgen.  

Stap 1: Voer een onderzoek uit voor een sterke basis 

Het is verleidelijk om direct al jouw ideeën los te laten op het wireframe. Echter is het jouw doel om een pakkende gebruikersinterface (UI) te ontwerpen. Daarvoor is het essentieel om de vereisten van je ontwerpproject en de verwachtingen van stakeholders en eindgebruikers in kaart te brengen. De klant moet immers eenvoudig de weg op jouw website weten te vinden. Voer daarnaast een marktonderzoek en concurrentieanalyse uit om ontwerptrends vast te stellen. 

Stap 2: Zorg ervoor dat de onderzoeksgegevens makkelijk terug te vinden zijn 

Tijdens het onderzoek verzamel je gegevens als use cases, marktonderzoeksgegevens, projectvereisten en kopersprofielen. Op verschillende punten in het ontwerpproces moet je hierop terug kunnen vallen. Zorg er daarom voor dat je alle belangrijke stukken informatie goed documenteert. Deel dit zo in, dat het niet veel tijd en moeite kost om het terug te vinden.  

Stap 3: Wat zijn de behoeften van de gebruiker? 

Om hierachter te komen is het noodzakelijk om gebruikersstromen in kaart te brengen. Oftewel, welk traject volgt een gebruiker tijdens een website- of app-sessie? Je geeft hierbij antwoord op de volgende vragen: 

  • Op welk punt komen de gebruikers jouw website of applicatie binnen?
  • Welke acties voeren gebruikers uit op jouw website? (Welke pagina's worden er bezocht en op welke knoppen wordt er geklikt?)
  • Op welk punt verlaten de gebruikers jouw website of applicatie weer?

Je brengt dit traject in kaart in een gebruikersstroom. Op die manier vergeet jij geen cruciale ontwerpelementen zoals de prijsfilter of de winkelmand. Wanneer dit soort elementen ontbreken kunnen gebruikers de weg op jouw website kwijtraken. Gebruikersstromen vormen de basis van jouw wireframe. Houd de gebruikersstroom logisch en houd rekening met alle mogelijke behoeften van een gebruiker tijdens het navigeren.  

Stap 4: Tijd om te starten met een minimalistische lay-out voor het wireframe 

Het is nu tijd om een basisstructuur te maken dat aangeeft welke elementen de pagina’s moeten bevatten. Welk element komt waar te staan? Waar verschijnen de tekstvlakken? En welke tabbladen worden er gebruikt? Creëer een elementaire structuur van de webpagina waarbij rekening wordt gehouden met de behoeften van de gebruikers en het bedrijf.  

Vergeet hierbij de grafische aspecten als het lettertypen en de kleuren. Focus je enkel op de schets en niet op het uiteindelijke ontwerp. Wat moet de gebruiker zien wanneer de pagina geopend wordt? Waar moet de voornaamste boodschap komen te staan? En welke knoppen heeft de gebruiker nodig om door de website te navigeren? 

Stap 5: Vul de details in 

Er is voldoende duidelijkheid over de richting van het project, de gebruikersstroom en de basislay-out. Nu is het tijd om de details in te vullen. Hiervoor moet je een beslissing maken over het getrouwheidsniveau van je wireframe. Oftewel, hoe gedetailleerd wordt jouw wireframe? Wanneer je dit vastgesteld hebt vul je de details voor het wireframe op de volgende manier in: 

  • Vul jouw details progressief in: van boven naar beneden en van links naar rechts.
  • Voeg basisdetails toe voor de bruikbaarheid van de website of applicatie. Denk aan een navigatiebalk en een zoekbalk rechts- of linksboven.
  • Voeg elementen toe die handig zijn voor de gebruiker en ga na waar jij deze het beste kunt plaatsen. 

Stap 6: Testen en optimaliseren 

Wanneer alle details op de juiste plek staan is het tijd om het wireframe op de proef te stellen. Test het wireframe op bruikbaarheid. Zijn alle ontwerpelementen die een gebruiker nodig heeft aanwezig? En staan deze ook op de juiste plek? Roep hierbij de hulp van collega's in. Breng waar nodig verbeteringen aan en jouw wireframe is af. Tijd om naar de volgende stap te gaan in het realiseren van een nieuwe website of applicatie! 

Aan de slag met jouw wireframe

Het maken van een wireframe voorafgaand aan de realisatie van een project biedt voordelen voor alle betrokkenen. Veel mensen denken dat ze hierdoor meer tijd kwijt zijn, maar niets is minder waar. Het bespaart je juist een hoop tijd én geld!  

Heb jij nog vragen over het maken van een wireframe? Of kun je hier hulp bij gebruiken? Neem dan contact op met Impact Media Concepts.


Start je eigen webshop met Shopify! Probeer ons platform 14 dagen geheel vrijblijvend – je zit nergens aan vast.


Veelgestelde vragen over wireframes

Wat is een wireframe?

Een wireframe is een schematisch raamwerk van een website, app of pagina. Kortom, het is de bouwtekening van jouw website of app waarbij de focus ligt op inhoud en niet op grafisch aspect.

Wat zijn de voordelen van een wireframe?

Het maken van een wireframe biedt veel voordelen voor zowel de klant als de ontwikkelaar die het geheel uiteindelijk gaat realiseren. Onder andere: het creëert overzicht, de ontwikkelaar heeft alle functionaliteiten helder en een sterk wireframe is herbruikbaar.

Welke soorten wireframes zijn er?

Over het algemeen kennen we vier verschillende soorten wireframes. 1. Een basiswireframe, ook wel het low-fidelity prototype genoemd. 2. Een geannoteerd wireframe, met meer details. 3. Een gebruikersstroom wireframe. 4. Een interactief wireframe met hoge definitie.

Met welke tools kun je een wireframe maken?

Je kan een wireframe met pen en papier maken. Echter zijn er ook diverse tools die jou hierbij ondersteunen. Denk aan Microsoft Powerpoint, Adobe Indesign of Balsamiq.