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
