Wat zijn wireframes?

Als het op wireframing aankomt, moet je daar liefst zo vroeg mogelijk mee beginnen. (Binnen het redelijke, natuurlijk.) Voor verschillende projecten zijn verschillende workflows nodig, maar in de regel moet jij je eerste wireframe uitwerken in de verkennings- of planningsfase van de projectlevenscyclus.

Als je een wireframe begint te maken tijdens de verkenningsfase, kies dan voor low-fidelity wireframes. Tijdens de verkenningsfase kun je experimenteren: je hebt een idee voor een website of app, maar weet nog niet precies hoe die eruit moet zien. Low-fidelity wireframes kunnen snel en eenvoudig ontworpen worden, en zijn daarom ideaal als brainstorm tool. Schrijf je ideeën op, stuur ze naar de andere stakeholders voor feedback en keer dan terug naar de tekentafel. 

Wanneer je project in de planningsfase terecht komt, kun je beginnen met het maken van mid- en high-fidelity wireframes. Tijdens de planningsfase worden ontwerpen concreet, en heb je robuuste wireframes nodig voor je verder kunt gaan naar de volgende fase: uitvoering.

Naarmate het project zich in die eerste twee fases verder ontwikkelt, worden je wireframes complexer en gedetailleerder. Tegen de tijd dat je de ontwerpen overhandigt aan het ontwikkelingsteam om de code te schrijven (de uitvoeringsfase), luidt dit meestal het einde van het wireframeproces in.

Elementen van een wireframe

Wireframes zien er aan de oppervlakte eenvoudig uit: esthetisch gezien stellen ze niet veel voor. Dit verklaart deels waarom ze zo doeltreffend zijn. Bij web- en app-ontwikkeling is het verleidelijk om je in de wereld van lettertypen en kleuren te storten voor je de gebruikerservaring helemaal hebt vastgelegd. Wanneer je wireframes maakt zet je deze afleidingen aan de kant en richt jij je op drie fundamentele aspecten van je product: informatie ontwerp, navigatie ontwerp en interface ontwerp.

Informatie ontwerp

Wanneer gebruikers je app of website gebruiken, nemen ze voortdurend informatie op: wat voor soort website bezoeken ze? Hoe kunnen ze hem gebruiken? Wat is het 'doel' van de site? Het proces is automatisch en grotendeels onbewust. Als ontwerper maak je deze interactie mogelijk: je kiest hoe je de informatie op een pagina presenteert.

Hoe ziet dit er in de praktijk uit?

Een voorbeeld: als je website een berichtenservice aanbiedt, dan zullen de meeste gebruikers in één van twee categorieën vallen: terugkerende gebruikers en nieuwe bezoekers. Terugkerende gebruikers willen zich wellicht aanmelden, terwijl nieuwe bezoekers misschien een account willen aanmaken of gewoon meer informatie over uw product of service willen. Op je startpagina moet je rekening houden met elk type bezoeker en hen voldoende informatie geven om hun respectieve doelen te bereiken. Deze informatie kan bijvoorbeeld gecommuniceerd worden via knoppen: aanmelden, registreren of meer informatie. Informatie-ontwerp gaat over de beslissing welke informatie je opneemt en waar je deze plaatst.

Navigatie-ontwerp

We hebben allemaal weleens veel te lang moeten zoeken naar het menu 'Instellingen' in een of andere app. En we kennen allemaal dat gevoel dat een website ons in een kringetje laat ronddraaien: dat moment waarop je denkt dat de pagina 'Accountgegevens' een klik verwijderd is, om dan weer terug te komen op de startpagina of, nog erger, een pagina met foutmelding 404. Wat we willen zeggen is: we komen voortdurend slecht navigatie-ontwerp tegen.

Zoals de naam al doet vermoeden, bepaalt navigatie-ontwerp de manieren waarop gebruikers door uw app of website navigeren. Vanaf elk scherm kan een gebruiker naar een aantal andere schermen navigeren. Dat weten ze echter niet tot je hen dat vertelt: vervolgkeuzelijsten, klikbare koppelingen en schuifbalken zijn allemaal voorbeelden van visuele elementen waarmee de gebruiker door je product kan navigeren.

Interface-ontwerp

Interface-ontwerp brengt alles samen: informatie, navigatie en, wel, alle andere delen van uw wireframe. Zowel navigatie-ontwerp als informatie-ontwerp hebben schermcomponenten: knoppen, menu's enzovoort. Interface-ontwerp verwijst naar de manier waarop die elementen zijn opgenomen in de volledige gebruikersinterface, inclusief andere elementen zoals tekstvakken, headerafbeeldingen en zijbalken.

Hoe je een wireframe maakt

Nu je meer over de theorie over wireframes in deze gids te weten bent gekomen, is het tijd om die kennis in de praktijk te brengen. Hier zijn enkele stappen om aan de slag te gaan met wireframes:

1. Teken een plan uit

Of je nu wireframes maakt voor een app of voor een website, je kunt van één ding zeker zijn: je zult meer dan één wireframe moeten maken. Bij wireframing gaat het vooral om de gebruikersstroom. Hoe verplaatst de gebruiker zich door je app? Wil je dat ze op een bepaalde plek terechtkomen?

Voor je met je diagrammen begint, is het een goed idee om de mogelijke routes die een gebruiker kan volgen uit te stippelen, waarbij je elk scherm dat ze kunnen tegenkomen in een lijst noteert. Voor elk afzonderlijk scherm heb je een extra wireframe nodig.

Dit voorbereidende werk lijkt misschien overdreven, maar het is het waard. Als je meteen in het diepe duikt en een wireframe begint te maken zonder een duidelijk idee van de gebruikersstroom te hebben, kan dit tot verwarrende en rommelige diagrammen leiden.

2. Begin door basisvormen toe te voegen

Na één of twee grondige planningssessies bent u er klaar voor om met uw ontwerp te beginnen. Begin door een 'frame' voor je diagram te selecteren. Als je een wireframe voor een app maakt, selecteer dan een vorm vergelijkbaar met het scherm van een mobiel apparaat. Voor een wireframe van een website kies je een vorm die lijkt op een browservenster. Op de meeste digitale platforms voor wireframes vind je deze basisframes in de vormbibliotheek.

Voeg vervolgens de grootste elementen van de wireframe toe. Het gaat dan om basisvormen en containers, die gebruikt worden voor items zoals een headerbalk, zijkolom, tekstvak enzovoort. Op dit moment is het nog niet nodig om tekst of afbeeldingen toe te voegen, je legt alleen de algemene lay-out vast.

Herhaal dit proces voor elke wireframe die je moet maken.

3. Voeg knoppen toe en koppel wireframes aan elkaar

Zodra je de lay-out van je wireframes hebt vastgelegd, is het tijd om wat functionaliteit toe te voegen. Op elk scherm in je product zullen er wellicht verschillende knoppen staan die de gebruiker naar een nieuw scherm leiden. Misschien heb je deze vormen toegevoegd in de vorige stap, maar als dat niet het geval is, selecteer dan een basisvorm voor elke knop en voeg deze nu toe. Je kunt ook tekst toevoegen die op de knop moet worden weergegeven (bijvoorbeeld "start").

Als je platform voor wireframes de mogelijkheid biedt om koppelingen toe te voegen, koppel elke knop dan aan de wireframe waarnaar de gebruiker moet worden doorgeleid.

Tip: selecteer één lettertype voor je wireframe. Gebruik vette en cursieve tekst waar nodig, maar bewaar eventuele andere tekststijlen voor de latere mockups en prototypes.

4. Verzamel feedback en bewerk je wireframe

Je hebt uren gewerkt aan je wireframes. De lay-out lijkt goed te zijn, en je hebt ze aan elkaar gekoppeld om een gebruikersstroom na te bootsen. Nu is het tijd om ze te delen met andere stakeholders. Er zijn wellicht aspecten van je wireframes die vatbaar zijn voor verbetering. Daarom is het belangrijk dat ze met een frisse blik worden bekeken voor je meer details gaat toevoegen.

Misschien staat een knop op een vreemde plaats. Of misschien is de menubalk te groot waardoor hij de pagina domineert. Wat de feedback van je collega's ook is, luister naar hen en houd rekening met hun ideeën: dit is een samenwerkingsproces.

Pas voorgestelde wijzigingen toe als die je wireframes kunnen verbeteren. Herhaal het proces tot je ontwerpen zijn goedgekeurd door alle nodige stakeholders.

5. Voeg details toe

Op dit punt zijn je diagrammen wellicht mid-fidelity wireframes. Nu het basisontwerp goedgekeurd is, kun je de details verder uitwerken. Voeg afbeeldingen en tekst toe. Gebruik kleuren om het onderscheid te maken tussen verschillende elementen op de pagina, maar houd het bij grijstinten. Zorg ervoor dat alles de juiste grootte heeft, tot aan de kleinste pixel toe.

6. Deel je wireframes

Nu heb je normaal gezien een reeks functionele high-fidelity wireframes. Deel ze met stakeholders van het project en relevante teams.