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 wireframingWireframing 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 toolsWireframing 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.
Download 5 basisoefeningenDeze PDF bevat een korte uitleg over wireframing en een aantal basisoefeningen om te starten met wireframen in Figma. Grootte: 4,2 MB
![]()
|