PINGDOM_CANARY_STRING
wat is een wireframe

Wat zijn wireframes?

Leestijd: ongeveer 7 min

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

Als u een wireframe begint te maken tijdens de verkenningsfase, kies dan voor low-fidelity wireframes. Tijdens de verkenningsfase kunt u experimenteren: u heeft 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 brainstormtool. Schrijf uw ideeën op, stuur ze naar de andere belanghebbenden voor feedback en keer dan terug naar de tekentafel.

Wanneer uw project in de planningsfase terechtkomt, kunt u beginnen met het maken van mid- en high-fidelity wireframes. Tijdens de planningsfase worden ontwerpen concreet, en heeft u robuuste wireframes nodig voor u verder kunt gaan naar de volgende fase: uitvoering.

Naarmate het project zich in die eerste twee fases verder ontwikkelt, worden uw wireframes complexer en gedetailleerder. Tegen de tijd dat u 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 u in de wereld van lettertypen en kleuren te storten voor u de gebruikerservaring helemaal hebt vastgelegd. Wanneer u wireframes maakt zet u deze afleidingen aan de kant en richt u zich op drie fundamentele aspecten van uw product: informatie-ontwerp, navigatie-ontwerp en interface-ontwerp.

Informatie-ontwerp

Wanneer gebruikers uw 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 maakt u deze interactie mogelijk: u kiest hoe u de informatie op een pagina presenteert.

Hoe ziet dit er in de praktijk uit?

Een voorbeeld: als uw 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 uw startpagina moet u 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 u opneemt en waar u 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 u 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 u hen dat vertelt: vervolgkeuzelijsten, klikbare koppelingen en schuifbalken zijn allemaal voorbeelden van visuele elementen waarmee de gebruiker door uw 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 u een wireframe maakt

Nu u 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

wireframe

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

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

Dit voorbereidende werk lijkt misschien overdreven, maar het is het waard. Als u 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

wireframe

Na één of twee grondige planningssessies bent u er klaar voor om met uw ontwerp te beginnen. Begin door een 'frame' voor uw diagram te selecteren. Als u een wireframe voor een app maakt, selecteer dan een vorm vergelijkbaar met het scherm van een mobiel apparaat. Voor een wireframe van een website kiest u een vorm die lijkt op een browservenster. Op de meeste digitale platforms voor wireframes vindt u 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, u legt alleen de algemene lay-out vast.

Herhaal dit proces voor elke wireframe die u moet maken.

3. Voeg knoppen toe en koppel wireframes aan elkaar

wireframe

Zodra u de lay-out van uw wireframes heeft vastgelegd, is het tijd om wat functionaliteit toe te voegen. Op elk scherm in uw product zullen er wellicht verschillende knoppen staan die de gebruiker naar een nieuw scherm leiden. Misschien heeft u 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. U kunt ook tekst toevoegen die op de knop moet worden weergegeven (bijvoorbeeld "start").

Als uw 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 uw wireframe. Gebruik vette en cursieve tekst waar nodig, maar bewaar eventuele andere tekststijlen voor de latere mockups en prototypes.

4. Verzamel feedback en bewerk uw wireframe

wireframe

U heeft uren gewerkt aan uw wireframes. De lay-out lijkt goed te zijn, en u heeft ze aan elkaar gekoppeld om een gebruikersstroom na te bootsen. Nu is het tijd om ze te delen met andere belanghebbenden. Er zijn wellicht aspecten van uw wireframes die vatbaar zijn voor verbetering. Daarom is het belangrijk dat ze met een frisse blik worden bekeken voor u 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 uw collega's ook is, luister naar hen en houd rekening met hun ideeën: dit is een samenwerkingsproces.

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

5. Voeg details toe

wireframe

Op dit punt zijn uw diagrammen wellicht mid-fidelity wireframes. Nu het basisontwerp goedgekeurd is, kunt u 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 uw wireframes

Nu heeft u normaal gezien een reeks functionele high-fidelity wireframes. Deel ze met belanghebbenden van het project en relevante teams.

wireframe

Klaar om aan de slag te gaan? Probeer deze Lucidspark-sjabloon voor mobiele wireframes. 

Probeer de sjabloon

Klaar om aan de slag te gaan? Probeer deze Lucidspark-sjabloon voor mobiele wireframes. 

Probeer de sjabloon

Nu populair

Zoom’s Lucidspark Zoom App integration

Verbeterde samenwerking met Lucidspark en Zoom

Over Lucidspark

Lucidspark is een virtueel whiteboard waarmee u en uw team kunnen samenwerken rond de beste ideeën. Het bevat memobriefjes, tools voor vrijestijltekenen en een oneindig groot tekenvel om dat volgende grote idee vast te leggen. En het is gemaakt voor teamwerk. Het is een soort zandbak waarin uw team ideeën kan uitwisselen en samen in realtime kan innoveren.

Mogelijk gemaakt door de makers van Lucidchart, vertrouwd door miljoenen gebruikers over de hele wereld, waaronder 99% van de Fortune 500-bedrijven.

Nederlands
PrivacyJuridisch
© 2021 Lucid Software Inc.