Wireframe

Wireframes, een term die je regelmatig hoort in relatie tot UX. Hier lees je wat het is, hoe een wireframe eruit ziet en welke tools er bestaan om ze te ontwerpen.

Wat is een wireframe?

Een wireframe is letterlijk een draadmodel voor een (web)applicatie of website. De user experienceUser experience design is de manier om behoeften van gebruikers om te zetten naar een werkbaar schermontwerp. verder lezen designer gaat aan de hand van de uitgeschreven specificaties (vaak user storiesEen User Story is een beschrijving van een gebruikerswens volgens het format 'wie, wat, waarom'. verder lezen wanneer er wordt gewerkt met de SCRUM-methode) aan de slag om schermen te ontwerpen. Deze eerste ontwerpfase van een softwareapplicatie toont een beeld van de volgorde en logica van verschillende pagina’s maar ook de plaatsing van elementen. Een UX-designer maakt meestal op papier grove schetsen die hij uitwerkt in draadmodellenEen wireframe is letterlijk een draadmodel voor een (web)applicatie of website, bedoeld om de beoogde werking van de applicatie duidelijk te maken. verder lezen, die de indeling van pagina’s uittekenen.

Hoe ziet een wireframe er uit?

Wireframes zijn veelal vrij eenvoudige tekeningen zonder inkleuring. Het is met nadruk niet het definitieve ontwerp van een applicatie – deze komt vaak pas daarna. Met een opdracht voor bijvoorbeeld een leeromgeving kan eenvoudig worden begonnen: een wireframe waarin een lijstje van geregistreerde leerlingen wordt getoond. Geen echte data, enkel een tekening die bestaat uit een tabel of lijst en enkele handige gegevens zoals de naam, registratiedatum en ‘laatst ingelogd’. In een user story worden die variabelen gedefinieerd en de UX-designer bedenkt hoe dit goed binnen een applicatie kan worden weergegeven. En wat er gebeurt wanneer je op een knop ‘Leerling toevoegen’ klikt. Volgt er een slide-in vanaf de zijkant en vernieuwt de pagina na opslaan? Of kom je op een nieuwe pagina en vul je daar alle gegevens van de nieuwe leerling in?

De opeenvolging van schermen biedt voor de klant ook houvast om de bedoeling van de software-ontwikkelaar te begrijpen. Waar kom je terecht na inloggen, wat gebeurt er als je op een icoontje klikt en hoe komen meldingen in beeld? De UX-designer kan dit allemaal uitwerken, zonder te hoeven letten op kleuren, typografie of andere stijlelementen. Met behulp van de wireframes kan de designer daadwerkelijk een grafisch ontwerp maken, voordat de applicatie naar de programmeurs gaat. Wireframes worden vaak toegevoegd aan user stories, zodat er met het programmeerteam besproken kan worden wat er gebouwd gaat worden. Een beeld zegt immers veel meer dan enkel tekst.

Tools voor een wireframe

Er bestaan verschillende programma’s om wireframes te ontwerpen, zoals:

• Axure
• Balsamiq
• Invision

De bekende tools bieden alle opties om snel tot een ontwerp te komen, zodat er geen tijd verloren gaat aan details.