Wireframing: essentiële stap in UX design

1 min leestijd - laatste update: 19 nov 2024

Wireframing is een essentiële stap in het ontwerpen van apps of websites. Je kunt relatief eenvoudig zelf aan de slag om wireframing te leren. Je hoeft zelfs niet te investeren in dure software, want tools als Figma of Miro zijn gratis te gebruiken, en hebben alles in huis om te starten. Wil je zelf starten met wireframen in Figma? Download dan hieronder 5 basisoefeningen.

🔎 Wireframes zijn eenvoudige ontwerpen, uitgewerkt zonder het grafisch design in rekening te nemen. De focus ligt op de lay-out van pagina's, de benodigde componenten, de navigatie en de content.

Doel van wireframing

Wireframing is dé stap in het designproces, waarin je uitgebreid nadenkt over de flow die eindgebruikers doorlopen en de plaatsing van content en navigatie. Bovendien kun je wireframes relatief snel maken en juist in deze fase is het belangrijk om je ideeën af te toesten met échte eindgebruikers. Bijvoorbeeld in een usability test (op afstand). Als UX designer is wireframing dus één van je belangrijkste vaardigheden.

Wat is wireframing?

Wireframes zijn eenvoudige ontwerpen, uitgewerkt zonder het grafisch design in rekening te nemen. De focus ligt op de lay-out van pagina's, de benodigde componenten, de navigatie en de content.

Wireframes worden vaak gemaakt door UX designers, als tool om hun ideeën of concepten te presenteren aan opdrachtgevers of uit te testen met toekomstige gebruikers. Het grote voordeel is dat de discussie over de kleurtjes, de fonts, de whitespace en eventuele animaties nog niet gevoerd hoeft te worden. Dit komt in een vervolgstap: het visueel design.

Door wireframes te (laten) maken verhoog je de kwaliteit van een ontwerp, omdat jij of een andere designer specifiek aandacht besteedt aan elementen zoals de flow, en de betekenis van woorden die gebruikt worden in de elementen op de pagina.

Wireframing tools

Wireframing kun je met heel verschillende tools doen. Afhankelijk met je vervolgstappen, kan het handig zijn om voor een specifieke tool te kiezen. Als de vervolgstap het visueel design is, maak dan je wireframes in Figma. Als je vervolgstap het presenteren van een flow aan je opdrachtgevers is, gebruik dan Miro of Mural.

Pen en papier: dit is veruit de snelste manier, en helpt je vooral om je eerste ideeën vast te leggen, te brainstormen over varianten of ideeën te parkeren om je hoofd leeg te maken voor alternatieven. Maar als je je ideeën wilt delen of presenteren, is het aan te raden om je schetsen eerst uit te werken in één van de andere tools.
Figma: een zeer populair platform om met een team wireframes, UI designs en prototypes te maken. Stakeholders kunnen hierin ook opmerkingen toevoegen en je kunt gelijktijdig samen aan een design werken. Je kunt Figma installeren op je laptop en op je mobiele telefoon, maar je kunt ook in je browser werken.
Adobe XD: de software van Adobe waarmee je wireframes, UI designs en prototypes bouwt. Ook hier kun je dat samen met collega's doen. Geen mogelijkheid om in de browser te werken.
Miro: een whiteboard in je browser waarop je kunt samenwerken, heel handig voor design workshops, brainstorms of het uittekenen van flowdiagrammen en wireframes.
Mural: vergelijkbaar met Miro. Ideaal om te gebruiken tijdens een workshop met stakeholders, of om je eigen wireframes en flowdiagrammen te presenteren.
Powerpoint: bekend bij velen, heel geschikt om een eerste idee voor de lay-out van een pagina vast te leggen. Maar minder handig als je een mobiele of lange pagina nodig hebt.

Download 5 basisoefeningen

Deze PDF bevat een korte uitleg over wireframing en een aantal basisoefeningen om te starten met wireframen in Figma. Grootte: 4,2 MB

Wireframing in Figma - basisoefeningen.pdf
File Size:	4179 kb
File Type:	pdf

Download File

Kom je er niet uit?

Heb je tijdens het maken van je wireframes vragen over je design of het gebruik van tools als Figma of Adobe XD? Of wil je je verder verdiepen in je rol als UX designer of werken aan een carrière als designer? Wij van UX Coach worden graag jouw coach! Neem vrijblijvend contact op om de mogelijkheden van coaching te bespreken.

Contact

Neem contact op voor een vrijblijvende kennismaking, op kantoor in Antwerpen of op afstand.

+32 (0)487 424 713

[email protected]

Marjan

Senior UX designer met 15+ jaar ervaring in de combinatie design en onderzoek. Ze gelooft dat empathie voor de klant betere en aantrekkelijkere producten en diensten oplevert. Ze is founder van UX Coach, een UX design studio in Antwerpen.

+32 (0)487 424 713