De Volledige Gids Voor Het Maken (En Gebruiken) Van Website Wireframes

Een website maken is makkelijk.

Of, tenminste, dat kan het zijn.

Maar wanneer je begint met het creëren van complexere websites, web-apps en zelfs digitale producten, kan het complexer worden.

Hoe ga je van een idee naar een levende, ademende website?

Een cruciale stap in het proces is het creëren van een website wireframe. Deze strategische ontwerptool helpt jouw team zich te richten op belangrijke doelen, complexe webprojecten te plannen en je gehele proces te stroomlijnen voor betere resultaten.

Wat Is Een Wireframe?

Een wireframe is een vereenvoudigde versie van een website, mobiele app of ander ontworpen product. Het wordt gebruikt als hulpmiddel tijdens productontwerp en -ontwikkeling door richting en strategie te bieden aan ontwerpteams en creatieven die het eindproduct zullen produceren.

Wireframes destilleren over het algemeen complexe ontwerpsystemen tot eenvoudige elementen, waarbij geïllustreerd wordt waar en hoe verschillende componenten moeten leven binnen het uiteindelijke ontwerp.

Een wireframe is als een UX-blauwdruk voor je website.

Het brengt bepaalde functies van je site in kaart, zoals menu’s, knoppen en lay-outs, terwijl het visuele ontwerp wordt weggelaten. Dit geeft je een idee van de onderliggende functionaliteit en navigatie van je site zonder afleidende elementen zoals het kleurenschema en de inhoud.

In plaats van specifieke afbeeldingen of ontwerpkeuzes op te nemen, zal het wireframe zich in plaats daarvan richten op hoe verschillende elementen ten opzichte van elkaar zijn geplaatst en waarom het ontwerp op deze specifieke manier is opgebouwd.

Dit helpt ook om een duidelijke informatiearchitectuur of hiërarchie te vestigen voor hoe specifieke functies of informatie weergegeven moeten worden en de onderliggende doelen die specifieke ontwerpbeslissingen aansturen.

Soorten Draadmodellen

Hoewel wireframes over het algemeen verwijzen naar een “schets” versie van het uiteindelijke ontwerp, kan de manier waarop een wireframe tot stand komt verschillen voor verschillende behoeften.

Wireframe vs Mockup vs Prototype

Voordat we ingaan op de details, laten we eerst vermelden – hoewel ze gerelateerd zijn, zijn wireframes anders dan mockups en prototypes.

Het is niet ongebruikelijk dat bedrijven $10.000 of meer uitgeven aan een eerste websiteontwerp. Dus het is cruciaal om de basis goed te hebben voordat je dat geld investeert. In veel gevallen doorloopt het team verschillende fasen van planning voordat ze beginnen met werken aan het daadwerkelijke product.

Wireframes zijn vaak het startpunt van het ontwerp- en ontwikkelingsproces.

Ontwerpteams kunnen rond een whiteboard gaan zitten en schetsen hoe een pagina eruit moet zien met behulp van basisvormen en tekst om te illustreren hoe de verschillende componenten in elkaar passen.

Mockups brengen het wireframe een stap verder door specifieke ontwerpkeuzes toe te passen op het skelet van het product. Ze bevatten over het algemeen kleuren, lettertypen en afbeeldingen om het ontwerp dichter bij voltooiing te brengen. Of ze gebruiken placeholders voor zaken zoals afbeeldingen en tekst (bijv. “Lorem ipsum”).

Maar een mockup is een statische afbeelding in plaats van een interactief product.

Het is nuttig voor het begrijpen van hoe het eindproduct er visueel uit zal zien, maar het helpt je niet om te begrijpen hoe het zal aanvoelen om het direct te gebruiken of door de sitemap te navigeren.

Prototypes zijn semi-functionele versies van het uiteindelijke product die over het algemeen het geplande ontwerp implementeren en enkele elementen bevatten die je in staat stellen om het verwachte gebruikersgedrag te testen.

Dit is vooral belangrijk voor interactieontwerp, UI-ontwerp (gebruikersinterface) en UX (gebruikerservaring).

Het maken van een prototype is vaak essentieel voor complexere ontwerpprojecten zoals het ontwikkelen van een mobiele app. Productmanagers kunnen prototypes gebruiken om de daadwerkelijke functionaliteit te testen en feedback te krijgen van belanghebbenden, gebruikers en klanten.

High-Fidelity Wireframes vs. Low-Fidelity Wireframes

Wireframes kunnen vele vormen aannemen.

De eenvoudigste manier om erover na te denken is als een spectrum van “lage trouw” tot “hoge trouw”. In sommige gevallen kan het ontwerpproces beginnen met laag-trouwe wireframes die vervolgens worden herzien om meer specificaties en details te bevatten.

Low-fidelity wireframes kunnen zo eenvoudig zijn als een handgetekende schets op de achterkant van een servet, die de basislay-out en informatiearchitectuur van een pagina of product illustreert.

High-fidelity wireframes kunnen extreem specifieke details bevatten, zoals exacte specificaties en pixelplaatsing. Het kan uiteindelijk meer lijken op een blauwdruk die je zou gebruiken om een huis te bouwen.

Waarom Een Website Wireframe Maken?

Ontwerpen en bouwen van dingen is duur en ingewikkeld.

Wireframes dienen een paar ongelooflijk belangrijke doeleinden:

1. Inkoop – Wireframes helpen ontwerpteams om goedkeuring te krijgen van belanghebbenden voordat ze overgaan op complexere en duurdere stappen in het project.
2. Kosten – Het maken van wijzigingen en het corrigeren van fouten in een wireframe is veel eenvoudiger en goedkoper dan het corrigeren ervan op een volledig ontworpen website of app.
3. Iteratie – Soms is het nodig om meerdere pogingen te doen om iets precies goed te krijgen. Wireframes bieden teams een snelle en goedkope manier om verschillende ideeën te testen en feedback te krijgen.
4. Gebruikerservaring (UX) – Een andere belangrijke toepassing van wireframes is het verkrijgen van feedback van echte of fictieve gebruikers, waardoor teams het ontwerp en de functionaliteit kunnen verbeteren.

Hoe Wireframes Te Gebruiken

Hoe moet je een wireframe gebruiken als je die eenmaal hebt?

Testen

Het belangrijkste dat je met je wireframe moet doen, is het gebruiken om te testen en te leren.

Deel het wireframe met je stakeholders, je gebruikers en je oma. Verzamel feedback en gebruik die feedback voor toekomstige iteraties. Blijf testen en aanpassen totdat je verwachtingen (bijv. waar je wilt dat gebruikers kijken of klikken) overeenkomen met de feedback die je ontvangt.

Daarna kun je verdergaan naar de volgende stap richting het uiteindelijke ontwerp.

Maak Er Een Mockup Van

Zodra je feedback hebt gekregen en je zeker voelt over de algemene indeling van je wireframe, kun je doorgaan naar de volgende stap.

Afhankelijk van wat je aan het bouwen bent (eenvoudige website, complexe webapp, enz.), zou een logische stap kunnen zijn om het wireframe over te dragen aan een ontwerper en hem of haar dit te laten omzetten in een mockup die het eindproduct beter vertegenwoordigt met de juiste kleuren, afbeeldingen, lettertypen en meer.

Zet Het Om In Een Prototype

Voor interactieve producten en websites met complexe gebruikersreizen of workflows, wil je ook je initiële wireframe gebruiken om een werkend prototype te ontwikkelen.

Voordat je begint met het eigenlijke ontwikkelingsproces, bouw een interactieve versie van je wireframe om je ontwerp verder te testen en te valideren.

Afhankelijk van je specifieke gebruikssituatie kan een UI-kit zoals Bootstrap of (toepasselijk genoemd) UI Kit je helpen om snel en eenvoudig een schets op een servet om te zetten in een semi-functionele website of app.

Belangrijke Onderdelen Van Een Wireframe

Wat gaat er in een wireframe, en hoe maak je het nuttig en bruikbaar?

Er is geen enkele taal voor wireframes, maar de meest voorkomende componenten weerspiegelen de echte versies die op de website terecht zullen komen.

Houd er rekening mee dat het wireframe geen specifieke details nodig heeft, maar het moet de relatieve plaatsing en stroom van belangrijke functies zoals deze tonen:

• Koppen
• Tekstvakken
• Afbeeldingen, video’s of iconen
• Navigatie
• Logo’s
• Zoekfuncties
• Dropdownmenu’s
• Knoppen

Al deze dingen maken waarschijnlijk deel uit van je uiteindelijke website of app, dus het is logisch om te beginnen met deze in het wireframe om er zeker van te zijn dat ze meegenomen worden voordat je verder gaat met het ontwerp.

Hoe Maak Je Een Wireframe Voor Een Website (In 6 Stappen)

Het creëren van een wireframing-proces kan een tijdrovend proces worden. Toch is het nemen van de tijd om UX-problemen van tevoren op te lossen, jouw site een veel betere kans op succes op lange termijn te geven.

De zes stappen hieronder helpen je op weg:

Stap 1: Verzamel De Gereedschappen Voor Wireframing

Er zijn twee hoofdmethoden voor het maken van wireframes: met de hand of digitaal. Als je voor de eerste optie kiest, heb je alleen een pen en papier nodig om te beginnen. Sommige ontwerpers beginnen met een low-fidelity papieren wireframe voor brainstormen en maken later een high-fidelity versie met behulp van digitale wireframing-tools.

Stap 2: Doe Onderzoek Naar Je Doelgebruiker En UX-ontwerp

Voordat je officieel begint met het opstellen van je wireframe, is het nuttig om wat onderzoek te doen.

Als eerste wil je weten wie je doelgroep is, om te helpen bepalen welke functies het meest prominent op je site moeten zijn, zodat bezoekers kunnen vinden wat ze nodig hebben.

Gebruikerspersona’s kunnen een nuttig ontwerpgereedschap zijn voor dit proces. Probeer er een paar te maken voor je potentiële gebruikersgroepen, zodat je een referentie hebt waarnaar je gedurende het ontwerpproces van het wireframe kunt terugkeren. Persona’s kunnen later ook helpen bij het creëren van een marketingstrategie, dus bewaar ze goed.

Het is ook verstandig om onderzoek te doen naar enkele UX-ontwerptrends en beste praktijken. Dit kan inzicht geven in elementen zoals menulay-outs, de positionering van je logo en andere belangrijke brandingelementen, en contentlay-outs. Gebruikers vinden het makkelijker om een website te navigeren die conventies volgt wat betreft deze kenmerken.

Stap 3: Bepaal Je Optimale Gebruikersstromen

Een gebruikersstroom verwijst naar het pad dat een bezoeker aflegt om een specifiek doel op je website te voltooien. Dus, bijvoorbeeld, als je een e-commerce site hebt, kan één gebruikersstroom zijn van een productpagina naar het einde van het afrekenproces.

Het bepalen van de belangrijkste taken die gebruikers op je site moeten voltooien, kan je helpen de meest eenvoudige gebruikersstroom voor elk potentieel doel te creëren. Dit zal de UX maximaliseren door je website gemakkelijk en plezierig in gebruik te maken.

Daarbij kan het lastig zijn om je in te leven in een hypothetische gebruiker. Deze vragen stellen aan jezelf kan helpen bij het uitwerken van je primaire gebruikersstromen:

• Welke problemen wil je oplossen voor gebruikers? Welke doelen hopen zij te bereiken door naar je site te komen?
• Hoe kun je je inhoud (zoals knoppen, links en menu’s) organiseren om die doelen te ondersteunen?
• Wat moeten gebruikers als eerste zien wanneer ze op je site komen, wat hen kan helpen zich te oriënteren en laat weten dat ze op de juiste plek zijn?
• Wat zijn de verwachtingen van gebruikers voor een site zoals die van jou?
• Welke oproep tot actie-knoppen (CTA) ga je bieden en waar kun je ze plaatsen zodat gebruikers ze opmerken?

Elk van deze antwoorden zal iets essentieels suggereren over de manier waarop je jouw pagina’s moet ontwerpen.

Stap 4: Begin Met Het Ontwerpen Van Je Wireframe

Nu je je gereedschap en belangrijke informatie voor je wireframe hebt verzameld, kun je beginnen met het opzetten ervan. Houd er rekening mee dat het doel van deze taak niet is om een compleet ontwerp voor je website te creëren. Je richt je uitsluitend op de gebruikerservaring en hoe je een pagina kunt maken die gemakkelijk te navigeren en te begrijpen is.

Om dat doel te bereiken, moet je wireframe functies en formaten bevatten die belangrijk zijn voor hoe je gebruikers zullen interageren met en gebruik maken van je website. Dit kunnen onder andere zijn:

• Een lay-out waarin staat aangegeven waar je alle afbeeldingen, branding-elementen, geschreven inhoud en videospelers zult plaatsen
• Je navigatiemenu, inclusief een lijst van elk item dat het zal bevatten en de volgorde waarin ze zullen verschijnen
• Alle links en knoppen die op de pagina aanwezig zijn
• Voettekst inhoud, zoals je contactinformatie en sociale media links

Je antwoorden op de vragen in de vorige stap zullen waarschijnlijk ook helpen bij deze fase van het proces. Denk aan de conventies van webdesign, de verwachtingen van gebruikers en informatiehiërarchieën bij het plaatsen van deze elementen op je pagina.

Er zijn ook verschillende elementen die niet geschikt zijn voor een wireframe.

Visuele ontwerpelementen, zoals je kleurenschema, typografie en decoratieve displays, moeten weggelaten worden uit je wireframe. In feite is het het beste om je wireframe in grijstinten te houden, zodat je kunt focussen op gebruiksvriendelijkheid.

Je hoeft ook geen afbeeldingen, video’s, geschreven inhoud of daadwerkelijke merkelementen, zoals je logo en slogan, in te voegen. Plaatsvervangers voor deze functies volstaan. Het idee is om alles te vermijden dat kan afleiden van gebruikersstromen en navigatie-elementen die fundamenteel zijn voor de UX.

Stap 5: Voer Gebruikstesten Uit Om Je Ontwerp Te Proberen

Zodra je eerste wireframe is voltooid, moet je wat tests uitvoeren. Dit zal je helpen bepalen of het zijn doel heeft bereikt om de eenvoudigste en meest natuurlijke gebruikersstromen en UX van je site in kaart te brengen.

Uiteindelijk richt effectief UX-ontwerp zich op het perfectioneren van de belangrijkste functionaliteit van je site. Zonder een ontwerp dat een sterke, positieve UX ondersteunt, loop je het risico op hogere bouncepercentages en lagere conversieratio’s.

Een wireframe zal niet alleen je creatieve proces versoepelen; het zou de bruikbaarheid moeten verbeteren op een manier die je kunt meten en zelfs kwantificeren. Dit is hoe testen kan helpen.

Als je met een team werkt, zal je eerste testronde waarschijnlijk intern plaatsvinden. Elk teamlid moet wat tijd doorbrengen met het wireframe om te zien of het logisch is. Laat iedereen onafhankelijk werken om elkaar niet te beïnvloeden, en maak aantekeningen over eventuele problemen die ze tegenkomen.

Er zijn echter ook tools die meer objectieve bruikbaarheidstests voor je wireframe kunnen bieden. Deze tests zijn bedoeld om echte gebruikers na te bootsen, wat bijzonder nuttig kan zijn. Het feit dat jouw team van webdesigners je wireframe logisch vindt, betekent nog niet dat de gemiddelde sitegebruiker dat ook zal vinden.

UsabilityHub is een platform dat ontwerpen verbindt met echte gebruikers om je feedback te geven over hoe de gemiddelde bezoeker jouw wireframe waarneemt.

Het biedt een gratis plan zodat zelfs kleine websites en niet-ontwerpers dit hulpmiddel goed kunnen gebruiken. Voor professionele ontwerpers en teams zijn er ook plannen die geavanceerde functies bieden om te helpen bij uitgebreidere en diepgaandere tests.

Gerelateerd: Top 6 Basis Elementen Van Webdesign

Stap 6: Zet Je Wireframe Om In Een Mockup Of Prototype

Nadat je wireframe is getest en je hebt bepaald wat het beste UX-ontwerp voor je site is, is het tijd om het om te zetten in een mockup of prototype. In tegenstelling tot wireframes, die statisch zijn, bevatten prototypes enige basisfunctionaliteit zodat je gebruikersstromen realistischer kunt testen.

Het is handig om een platform te kiezen dat je wireframe kan omzetten in een prototype.

Prott stelt je bijvoorbeeld in staat om interactieve, hoogwaardige prototypen te maken van je wireframe.

Echter, als je dat liever hebt, zijn er platforms die specifiek gericht zijn op prototyping.

Welk gereedschap je ook kiest, je zult je prototype door nog een ronde van gebruikerstests willen laten gaan als het klaar is. Nadat je prototype is geslaagd, kun je beginnen met het bouwen van je echte site met het vertrouwen dat je UX vanaf de lanceerdatum top zal zijn.

Wireframing Hulpmiddelen

Wat betreft digitale wireframing-opties zijn er veel verschillende wireframe-tools beschikbaar. Hier zijn een paar van onze favorieten:

#1: Wireframe.cc

Als dit je eerste wireframe is, of als je een alleenstaande Doe-Het-Zelf (DIY) site-eigenaar bent en geen ontwerper, kun je een gratis tool zoals Wireframe.cc proberen.

Dit eenvoudige wireframing-hulpmiddel voorkomt dat je ontwerpen rommelig worden door je kleurenpalet te beperken. Je kunt eenvoudige ontwerpen maken met de slepen-en-neerzetten-interface en je ontwerpen annoteren zodat je belangrijke informatie niet vergeet.

#2: Wirify

Een andere optie is Wirify, een bookmarklet die je aan je browser kunt toevoegen.

De interface van deze tool zet bestaande webpagina’s om in wireframes. In plaats van je te helpen met het ontwerpen van UX voor een nieuwe site, is het vooral nuttig voor het herontwerpen van websites.

#3: Balsamiq

Als je bereid bent om een beetje geld uit te geven, kun je anderzijds kijken naar Balsamiq mockups.

Het beschikt over een gebruiksvriendelijke, collaboratieve wireframing-interface, geweldig voor teams en professionals die realtime samenwerking nodig hebben. Het is echter beperkt tot statische wireframing.

#4: Prott

Als je een uitgebreidere tool wilt die ook voor prototyping gebruikt kan worden, kun je Prott proberen.

Zoals eerder vermeld, maakt Prott het eenvoudig om met één enkele tool wireframes en prototypes te maken. Het biedt ook een aantal samenwerkingstools waarmee je team aangepaste UI-kits kan bouwen, ontwerpstandaarden kan vaststellen, en meer.

#5: Figma

Een andere geweldige uitgebreide optie is Figma.

Figma kan zowel worden gebruikt om eenvoudige wireframes te bouwen, mockups te creëren, als om interactieve prototypen te bouwen (en nog veel meer!)

#6: Adobe

Adobe heeft waarschijnlijk geen introductie nodig in een bericht als dit, maar we moeten zeker hun reeks gereedschappen noemen. Adobe XD (Experience Design) is specifiek ontwikkeld voor allerlei soorten productontwerpwerk; het lijkt nu te zijn opgenomen in Figma als onderdeel van hun overname/fusie.

Maar de Adobe CC suite biedt een reeks tools die gebruikt kunnen worden voor wireframing, mockups en prototyping.

Voorbeelden van Wireframes

Zoek je wat inspiratie? Hier zijn enkele wireframe-voorbeelden om richting en visie te geven voor je eigen werk.

Geannoteerde Handgetekende Wireframe Schets

Ontwerper Tim Knight deelde dit voorbeeld van een geschetste wireframe.

Eenvoudig Digitaal Draadmodel

Dit voorbeeld is afkomstig van ontwerper Valeria Pivovarova.

Hoogwaardige Digitale ‘Wireflow’

Dit voorbeeld van Jonathan Centeno combineert elementen van een hoogwaardig digitaal wireframe en een gebruikersstroomkaart, en legt uit hoe gebruikers door de website moeten navigeren.

Hoogwaardig Digitaal Draadmodel

Kira deelt deze high-fidelity wireframe die veel specifieke ontwerpelementen bevat en zelfs tijdelijke tekst.