Oorspronkelijk verwees de term "wireframe" naar een visuele weergave van driedimensionale objecten, zoals die worden gebruikt bij productontwerp en -ontwikkeling. Tegenwoordig wordt het ook gebruikt om 3D-modellering in computeranimatie en het ontwerp en de ontwikkeling van 2D-webpagina's en mobiele apps te beschrijven.
Lees verder om meer te leren over de waarde van website-wireframes, hoe UX en UI een rol spelen bij het vroege ontwerp van websites en apps, en hoe wireframe-software dit allemaal eenvoudiger, sneller en efficiënter maakt.
Wat zijn wireframes?
In webdesign is een wireframe of wireframe-diagram een visuele weergave in grijstinten van de structuur en functionaliteit van een enkele webpagina of het scherm van een mobiele app. Wireframes worden vroeg in het ontwikkelingsproces gebruikt om de basisstructuur van een pagina te bepalen voordat het visuele ontwerp en de content worden toegevoegd. Ze kunnen worden gemaakt op papier of met software-apps, of rechtstreeks in HTML/CSS worden ingevoerd. Omdat wireframes bewust weinig visuele details bevatten, kunnen ze het beste worden gebruikt als een planningsinstrument dat de lay-out, hiërarchie en het gedrag verduidelijkt voordat er wordt geïnvesteerd in afgewerkte visuals of code.
Gebruik een UX-wireframe om de volgende vragen te beantwoorden:
-
Wat wordt er weergegeven in de gebruikersinterface?
-
Waar worden de elementen op de pagina geplaatst?
-
Hoe hebben gebruikers interactie met de pagina-elementen?
-
Hoe gaat de webpagina of applicatie werken?
Wireframes vs. mockups vs. prototypes
Teams gebruiken deze termen vaak door elkaar, maar ze dienen verschillende doelen op verschillende detailniveaus. Wireframe-diagrammen verschillen van mockups en prototypes omdat ze bedoeld zijn als een low-fidelity weergave die gericht is op lay-out en functionaliteit. Zie een wireframe als een blauwdruk die de voorgestelde functies laat zien en hoe een product naar verwachting zal werken. Door het eenvoudig te houden, is het gemakkelijker om het plan gaandeweg te beoordelen en te verfijnen.
De meeste voorbeelden van wireframe-diagrammen bevatten eenvoudige lijnen en kaders met weinig kleur en alleen de meest elementaire details. Deze eenvoudige vormen vertegenwoordigen UX-elementen zoals menu's, knoppen, content en navigatiefuncties. Een eenvoudige rechthoek met de woorden "Logo/Homepagina" kan bijvoorbeeld weerspiegelen waar het logo van het bedrijf wordt geplaatst en dat het logo naar de homepagina van de website linkt.
Een mockup is daarentegen meer een niet-functionerend model. Het geeft een vollediger beeld van hoe het eindproduct eruit zal zien met afbeeldingen, kleuren, branding en lettertypen, maar er zijn geen UI-functies ingeschakeld.
A prototype komt dichter in de buurt van een volledig functionele versie van het eindproduct. Het kan worden gebruikt om functies en functionaliteit te demonstreren, en om UX en kwaliteitscontrole te testen.
De waarde van wireframes voor de ontwikkeling van websites en apps
In de praktijk zien teams de waarde van wireframes vaak op verschillende manieren terug.
Teams gefocust en op koers houden
Wireframes zorgen ervoor dat iedereen die betrokken is bij de website-ontwikkeling op één lijn zit. Dit betekent niet alleen dat ontwerpen zorgvuldiger worden afgestemd en contentcreatie eenvoudiger wordt, maar ook dat het ontwikkelingsteam een dieper inzicht heeft in wat ze bouwen. Het voorkomt ook dat teams later in het proces ad-hocoplossingen moeten bedenken, correcties moeten aanbrengen of alles volledig opnieuw moeten opbouwen — ook wel bekend als 'scope creep'.
Wanneer alle belanghebbenden de content en functionaliteit in de wireframe hebben goedgekeurd, kan het team met vertrouwen verdergaan. Naarmate het project vordert, kan de wireframe als referentie dienen om de verschillende teams op koers te houden.
Een positieve merkervaring leveren
Wireframes verminderen ook risico's voor het merk en de reputatie door teams te helpen verwarrende of frustrerende ervaringen op te sporen voordat ze de gebruikers bereiken. Wanneer de UX en UI van een website of applicatie goed zijn ontworpen, merkt niemand dat echt — het product werkt en iedereen is tevreden. Maar een slecht ontwerp kan blijvende schade toebrengen aan je merk en reputatie. Het maken van wireframes voor apps en websites is een belangrijke stap op weg naar een uitzonderlijk UX-ontwerp.
Ervoor zorgen dat de site of app volgens de doelen wordt gebouwd
Door functies duidelijk te zien met minimale creatieve invloed, kunnen belanghebbenden zich op andere aspecten van het project concentreren. Wireframing schept verwachtingen over hoe functies worden geïmplementeerd door te laten zien hoe ze werken, waar ze zich bevinden en hoeveel voordeel ze opleveren. Een functie kan worden geschrapt omdat deze niet binnen de doelen van je site past.
Focussen op gebruiksvriendelijkheid
Wireframing biedt een objectieve blik op linknamen, conversiepaden, gebruiksgemak, navigatie en de plaatsing van functies. Wireframes helpen je fouten in de site-architectuur of functies te identificeren en stellen je in staat om de stroom vanuit het perspectief van de gebruiker te visualiseren. Een vroege focus op gebruiksvriendelijkheid is bijzonder belangrijk, omdat het veel goedkoper en eenvoudiger is om problemen in de ontwerpfase op te lossen dan nadat je bent begonnen met het schrijven van code.
Inzicht in de capaciteit voor contentgroei
Als je weet dat je site in de nabije toekomst zal groeien, moet je website die groei kunnen opvangen met minimale impact op de site-architectuur, de gebruiksvriendelijkheid en het ontwerp. Wireframing kan deze belangrijke kansen voor contentgroei blootleggen en laten zien hoe je ze kunt inpassen.
Feedback integreren en vroegtijdig samenwerken stimuleren
Bij de start van een nieuw project of herontwerp van een product wil je vroegtijdig input en feedback verzamelen, zodat je niet te veel tijd en geld verspilt aan het ontwikkelen in de verkeerde richting. Een wireframe is een uitstekende manier om snel ideeën over te brengen en vroege feedback te krijgen om een beter product te ontwerpen.
Door samen te werken met klanten en andere belanghebbenden, kun je overleggen en consensus bereiken over hoe de interface eruit moet zien, hoe deze moet functioneren en welke elementen moeten worden opgenomen.
Het delen van wireframe-diagrammen met je klant, ontwerpers, het ontwikkelingsteam en alle anderen die betrokken zijn bij de productontwikkeling stimuleert een open dialoog voor feedback en samenwerking, zodat iedereen vroeg in het project op één lijn zit.
Agile-ontwikkeling verbeteren
Wireframes werken goed in Agile-omgevingen. Je kunt samenwerken met productmanagers en ontwikkelaars om te bepalen welke delen van het ontwerp in elke iteratie moeten worden ontwikkeld. Door het product in iteratieve stukken te ontwikkelen, is het gemakkelijker om feedback te krijgen en het ontwerp- en ontwikkelingsproces waar nodig te verfijnen. Het is altijd beter om vroeg feedback te krijgen, voordat er te veel tijd aan ontwikkeling is besteed.
Tijd en geld besparen
Een goed ontworpen wireframe kan tijd en geld besparen, omdat je ontwikkelingsteam het totale product dat ze gaan bouwen beter begrijpt en problemen achteraf kan voorkomen. Het team hoeft dan niet in een laat stadium ad-hocoplossingen te bedenken om functies goed te laten werken.
Andere teams die wireframe-diagrammen gebruiken
Omdat wireframes helpen bij de afstemming tussen verschillende rollen, zijn ze bijzonder nuttig als gedeelde referentie voor het bredere productteam — niet alleen voor ontwerpers.
Klanten en belanghebbenden
Wireframes geven je klanten (of belanghebbenden binnen je bedrijf, zoals je marketingteam) een gemakkelijk te begrijpen algemeen beeld van wat er wordt ontwikkeld. Beoordelaars kunnen snel inschatten of het ontwerp aan hun verwachtingen voldoet, bepalen of er iets ontbreekt, beschikbare acties verkennen en zien hoe de interface-elementen zijn samengesteld.
Door wireframes aan klanten te tonen, kunnen potentiële problemen of ontbrekende elementen aan het licht komen die eerder over het hoofd werden gezien. Het is veel gemakkelijker en goedkoper om problemen op te lossen tijdens het bouwen van wireframes dan om ze op te lossen nadat de code al is geschreven.
Projectmanagers
Projectmanagers gebruiken wireframes om ervoor te zorgen dat alle belanghebbenden op één lijn zitten. Door de wireframe met iedereen te delen, is het voor iedereen gemakkelijker om te zien waar het project naartoe gaat, problemen te identificeren die zich kunnen voordoen, verbeteringen voor te stellen en afspraken te maken over wat er gebouwd gaat worden. Projectmanagers kunnen wireframes gebruiken als checklist om de voortgang bij te houden en ervoor te zorgen dat alles volgens afspraak wordt geïmplementeerd.
Ontwikkelaars
Ontwikkelaars gebruiken wireframes om technische vereisten te begrijpen en te identificeren waar ze specifieke functionaliteit moeten implementeren. Verschillende wireframes die worden gebruikt voor het bouwen van een storyboard help ontwikkelaars te bepalen hoe gebruikersinteracties moeten of kunnen samenwerken. Storyboarding met wireframes geeft ontwikkelaars een idee van hoe gegevens moeten stromen en helpt hen potentiële knelpunten te identificeren.
UX-, UI- en wireframe-ontwerp
User experience (UX)-ontwerp is een methode om de klantloyaliteit en -tevredenheid te vergroten door het gebruiksgemak en het plezier in de interactie tussen de klant en de site, app of het product te verbeteren. User interface (UI)-ontwerp ligt dichter bij grafisch ontwerp, hoewel de verantwoordelijkheden iets complexer zijn. In het algemeen gaat user experience-ontwerp vooraf aan user interface-ontwerp. UX en UI overlappen elkaar doorgaans in het wireframe-ontwerpproces, en dat is ook wenselijk. De aandachtsgebieden zijn onder andere:
Informatiearchitectuur en wireframes
Als onderdeel van het algehele proces van website-ontwikkeling en wireframing gaat informatiearchitectuur over het plaatsen en prioriteren van informatie op een manier die begrijpelijk is voor toekomstige gebruikers van een site of mobiele app. Er zijn vier fundamentele elementen volgens Information Architecture for the World Wide Web:
-
Organisatieschema's en -structuren: informatie categoriseren en structureren
-
Labelingsystemen: informatie weergeven
-
Navigatiesystemen: door informatie navigeren
-
Zoeksystemen: informatie zoeken en vinden
Een goede informatiearchitectuur begint met een uitgebreide bedrijfsanalyse om een contentstrategie te ontwikkelen voor een totaalbeeld van structuur, content en ontwerp op basis van de bedrijfsdoelen. Om te bevestigen dat de analyse en strategie correct zijn, vormen wireframes en papieren prototypen een belangrijke eerste stap. Het testen van prototypen en wireframes is de beste manier om vroeg in het ontwerpproces feedback van gebruikers te krijgen, wat kostbare herontwerpen helpt te voorkomen zodra de site live is. Het testen van prototypen en wireframes helpt ook om verschillende ontwerpen te beoordelen op het gebied van prestaties en gebruikersvoorkeuren om zo het beste totale product te creëren.
In de wireframing-fase gaat informatieontwerp ook over het anticiperen op wat verschillende typen gebruikers als eerste moeten zien en welke acties ze waarschijnlijk zullen ondernemen. Als je website bijvoorbeeld een berichtenservice biedt, vallen de meeste gebruikers qui de site bezoeken in een van de volgende twee categorieën: terugkerende gebruikers en nieuwe bezoekers. Terugkerende gebruikers willen waarschijnlijk inloggen, en nieuwe bezoekers willen een account aanmaken of gewoon meer over je service te weten komen. Op je homepagina moet je rekening houden met elk type bezoeker en hen voldoende informatie bieden om hun respectievelijke doelen te bereiken. Deze informatie wordt gecommuniceerd via knoppen: inloggen, aanmelden of meer info. Informatieontwerp gaat over het beslissen wat er moet worden opgenomen en waar het moet worden geplaatst.
Navigatie-ontwerp en wireframes
Het navigatiesysteem bevat een reeks elementen op het scherm waarmee de gebruiker van pagina naar pagina kan navigeren. Het navigatie-ontwerp moet de relatie tussen links duidelijker maken, zodat gebruikers hun navigatie-opties vanzelf begrijpen. Meestal bieden websites meerdere navigatiesystemen, zoals een globale, lokale, aanvullende, contextuele en service-navigatie.
Zoals de naam al doet vermoeden, bepaalt het navigatie-ontwerp de manieren waarop gebruikers door je app of website navigeren. Vanaf elk willekeurig scherm kan een gebruiker naar een aantal andere schermen navigeren. Ze weten dit echter pas als je het ze vertelt: vervolgkeuzemenu's, klikbare links en schuifbalken zijn allemaal voorbeelden van visuele elementen die gebruikers helpen door je product te navigeren.
User interface-ontwerp en wireframes
UI-ontwerp omvat het selecteren en rangschikken van interface-elementen die gebruikers helpen om te gaan met systeemfuncties op een manier die de efficiëntie en het gebruiksgemak maximaliseert. Veelvoorkomende UI-elementen zijn knoppen, tekstinvoervelden, selectievakjes, menu's en keuzerondjes.
Interface-ontwerp brengt alles samen: informatie, navigatie en al het andere in je wireframe. Zowel het navigatie-ontwerp als het informatieontwerp hebben componenten op het scherm, zoals knoppen en menu's. Interface-ontwerp verwijst naar de manier waarop elementen in de gebruikersinterface als geheel zijn opgenomen, inclusief tekstvakken, headerafbeeldingen en zijbalken.
Typen wireframes
Er zijn vier verschillende typen wireframes:
-
Basis-wireframes. Ook bekend als low-fidelity weergaven, dit zijn zeer eenvoudige paginaschema's, meestal in zwart-wit.
-
Geannoteerde wireframes. Deze voegen een breed scala aan details toe aan een basis-wireframe. Annotaties zijn korte opmerkingen, meestal aan de zijkant of onderkant van een wireframe, die elk item op de wireframe beschrijven, meestal gescheiden door gebieden met content en functionaliteit, en die (kort) de reden en het doel van elk item laten zien.
-
User flow-wireframes. Wanneer annotatie niet voldoende is om te laten zien hoe een site- of app-gebruiker logisch door de content van pagina naar pagina navigeert, is er meer informatie nodig. Deze user flow-wireframes kunnen statische weergaven van een volledig interactieve wireframe zijn, maar ze bevatten vaak een diavoorstelling of een opeenvolging van wireframes om een primaire gebruikersstroom of een reeks gebruikersstromen te tonen.
-
Interactieve high-definition wireframes. Hiermee ervaar je interacties (zoals tikken, klikken en swipen) binnen of tussen afzonderlijke wireframes. Het toevoegen van interacties voordat je overgaat tot volledige mockups of live prototyping bespaart ontwerpers en ontwikkelaars uren werk. Deze variant van wireframes kan alleen worden gemaakt in presentatie- en grafische ontwerpsoftware of in wireframing- en prototypingsoftware.
Een eenvoudige wireframe ontwerpen en maken
Nu we de fundamentele componenten van wireframes hebben bekeken, gaan we kijken hoe we dit allemaal kunnen samenvoegen om een eenvoudige wireframe te ontwerpen en te maken.
En onthoud: als het om wireframing gaat, geldt: hoe eerder je begint, hoe beter.
-
Denk na over het uiteindelijke doel van de website en ontwerp met dat doel in gedachten. Denk na over hoe de gebruiker met de interface zal omgaan.
-
Begin met een eenvoudige, low-fidelity weergave van de webpagina, verdeeld in drie delen: de header (het eerste wat gebruikers bovenaan de pagina zien), de body van de webpagina en de footer, die meestal minder belangrijke informatie bevat.
-
Denk vervolgens na over de navigatie. Voeg knoppen en links toe waarmee gebruikers de belangrijkste secties van je site kunnen bezoeken, inclusief contentgebieden, zoekfuncties en het inloggen voor gebruikers.
-
Annoteer je wireframe voor de duidelijkheid.
Zodra je deze fase hebt bereikt, deel je de wireframe met belanghebbenden voordat je doorgaat naar de volgende stap. Je kunt de eerste wireframe met de hand uittekenen op papier of een whiteboard, maar in de eindfase gebruik je software om de wireframe verder te ontwikkelen.
Als je meer ontwerpt dan een enkele landingspagina, helpt het ook om de reeks schermen die je nodig hebt te plannen voordat je afzonderlijke lay-outs gaat tekenen. Of je nu een wireframe maakt voor een app of een website, van één ding kun je zeker zijn: je moet meer dan één wireframe maken. Wireframing draait om de gebruikersstroom (user flow). Hoe beweegt de gebruiker zich door je app? Is er een bepaalde plek waar je wilt dat ze uitkomen?
Verschillende projecten vereisen verschillende workflows, maar over het algemeen stel je je eerste wireframe op in de initiatie- of planningsfase van de projectlevenscyclus.
Voordat je aan je diagrammen begint, breng je de mogelijke routes in kaart die een gebruiker kan nemen, en maak je een lijst van elk nieuw scherm dat ze kunnen tegenkomen. Voor elk extra scherm heb je een extra wireframe nodig. Wireframes evolueren meestal ook in detailniveau naarmate een project verschuift van vroege verkenning naar concrete planning.
Dit voorbereidende werk lijkt misschien overdreven, maar het is de moeite waard. Direct in het wireframing-proces duiken zonder een duidelijk idee van de gebruikersstroom leidt tot verwarrende en rommelige diagrammen.
Een gedetailleerdere, stapsgewijze workflow
Als je een gedetailleerder proces wilt dan de vier stappen hierboven, kan de volgende workflow je helpen om van een ruwe lay-out naar deelbare wireframes met een hoger detailniveau te gaan.
1. Begin met het toevoegen van basisvormen
Na een grondige planning ben je klaar om je wireframe te ontwerpen. Begin met het selecteren van een 'frame' voor je diagram. Als je een wireframe voor een app maakt, selecteer dan een vorm die lijkt op het scherm van een mobiel apparaat. Kies voor een website-wireframe een vorm die lijkt op een browservenster. De meeste digitale wireframing-platforms hebben beide basis-frames beschikbaar in hun vormbibliotheek.
Voeg vervolgens de grootste elementen van de wireframe toe. Dit moeten basisvormen en containers zijn, die items zoals een headerbalk, zijkolom of tekstvak vertegenwoordigen. Het is op dit punt nog niet nodig om tekst of afbeeldingen op te nemen — bepaal gewoon de algemene lay-out. Herhaal dit proces voor elke wireframe die je moet maken.
2. Voeg knoppen en links toe
Zodra je de lay-out van je wireframe hebt bepaald, is het tijd om functionaliteit toe te voegen. Op elk scherm van je product bevinden zich waarschijnlijk meerdere knoppen die de gebruiker naar een nieuw scherm leiden. Als je deze in de vorige stap nog niet als vormen hebt toegevoegd, selecteer dan nu een basisvorm voor elke knop. Je kunt ook de tekst toevoegen die op de knop verschijnt (bijvoorbeeld 'home'). Als je wireframing-platform koppelingsmogelijkheden biedt, koppel dan elke knop aan de wireframe waarnaar deze de gebruiker moet leiden.
3. Verzamel feedback en pas aan
Nu is het tijd om je wireframe te delen met andere belanghebbenden voor feedback, herzieningen en goedkeuring.
4. Details toevoegen
Op dit punt is je diagram waarschijnlijk een mid-fidelity wireframe. Zodra het basisontwerp is goedgekeurd, kun je beginnen met het verfijnen van de details. Voeg afbeeldingen en tekst toe. Gebruik kleur om verschillende elementen op de pagina te onderscheiden, maar houd het bij grijstinten. Zorg ervoor dat alles tot op de pixel de juiste grootte heeft.
5. Deel je wireframe
Je hebt nu een functionele high-fidelity wireframe. Deel deze met projectbelanghebbenden en de relevante teams.
Sjablonen en voorbeelden van wireframes
Wireframe-sjablonen helpen je om sneller een nieuwe webpagina of applicatie te ontwerpen. De meeste softwaretoepassingen voor site- en app-ontwerp bieden een breed scala aan sjablonen.
Ongeacht in welke branche je actief bent of voor welk platform je ontwerpt, wireframes helpen je bij het ontwerpen en een van de perfecte gebruikerservaring. Bekijk deze voorbeelden van wireframes, waarvan sommige zijn gecombineerd met gebruikers- of taakstromen.
