De ins en outs over het maken van een wireframe

Onze designers maken altijd een wireframe. Deze staat aan de basis van het design van een website, of applicatie. Hierop worden de visuele en functionele doelen van de website – of applicatie – uitgewerkt. Het is belangrijk om deze doelen eerst goed te hebben besproken met de klant. Een wireframe focust zich nog niet op stijl, kleur of andere grafische elementen, het gaat puur over de functionaliteit en gebruikersvriendelijkheid. 

 

Wat is het voordeel van wireframes?

Het voordeel van het maken van een wireframe is dat je geld en tijd bespaart. De designer kan na het maken van een wireframe namelijk doelgericht aan de slag met het ontwerpen en maken van de website. De functionaliteit van de website wordt op deze manier goed uitgedacht, en dit komt uiteindelijk ten goede van de kwaliteit van de website. Daarnaast biedt het veel duidelijk voor zowel de klant als de designer omdat er duidelijke verwachtingen worden geschept. 

Hoe maak je een wireframe?

Er zijn verschillende manieren waarop je een wireframe kan maken. Je kan dit bijvoorbeeld doen aan de hand van een pen en ruitjespapier. Ook zijn er tegenwoordig programma’s waarmee je een wireframe zou kunnen maken. Denk aan AdobeXD, Photoshop, Illustrator etc. De keuze die je maakt in hoe jij het wireframe maakt is heel erg persoonlijk en afhankelijk van jouw voorkeuren. Ontdek wat het fijnste werkt voor jou. 

Waar moet je rekening mee houden? 

Het allerbelangrijkste is dat de klant betrokken is bij het proces van het maken van een wireframe. Op deze manier komt er vanuit beide partijen input en zal de tevredenheid bij de klant uiteindelijk ook groter zijn. Ook kan de klant met nieuwe ideeën komen, waar jij misschien nog niet aan had gedacht. Immers kan je niet beginnen aan het maken van een wireframe, zonder input en een plan.

Consistentie is een ander belangrijk punt. Alle elementen in het wireframe moeten bij elkaar passen en het moet ook kloppen. Denk bijvoorbeeld aan het gebruik van een bepaald type knop. Als je die knop ergens in het wireframe al hebt gebruikt, moet je diezelfde knop ook overal toepassen. Dit zorgt voor consistentie en voorkomt verwarring bij de gebruiker. 

De navigatie die je gebruikt moet daarnaast te gebruiken zijn door het gehele wireframe en uiteindelijk website. Dit creëert ook consistentie en duidelijkheid. Dit scheelt jou als designer ook weer werk, omdat het anders een erg ingewikkelde navigatiestructuur wordt. Kies een soort navigatie, en pas deze toe op het gehele wireframe. 

Ontdek zelf de kracht van wireframes en ga er mee aan de slag. Je mag altijd contact met ons opnemen met vragen! 

Social Elephant Redactie

Kennis delen is vermenigvuldigen

In ons gratis E-book lees je precies hoe je in 3 stappen online resultaat kunt behalen. Jij wilt toch ook online groeien?

Kennis delen is vermenigvuldigen

Kennis delen is vermenigvuldigen. In ons gratis E-book lees je precies hoe je in 3 stappen online resultaat kunt halen. Zo kun je zelf aan de slag en weet je hoe je jouw online groei aan kunt pakken. Jij wilt toch ook online groeien?

PDF Downloaden