Overslaan en naar de inhoud gaan

Wat is het belang van wireframes?

IMG_7761_0.jpeg

Geschreven door Martijn de Ruijter Visual Designer

martijn.jpg

Wat is het belang van wireframes?

ReDISCOVER TO RENEW

Wireframes zijn de bouwtekeningen van jouw website of applicatie. Ze vormen een essentieel onderdeel in het User Experience (UX) proces. Het UX proces is een belangrijke fase om uiteindelijk tot een goed eindproduct, namelijk een website of applicatie, te komen. In deze blog leggen we je uit wat wireframes zijn en wat de voordelen ervan zijn.

Wireframes

Iedereen kent het verhaal wel van de wolf en de drie biggetjes. Toch? Drie biggetjes die hun eigen huisje bouwen? De eerste bouwt een huisje van stro, de tweede van hout en de derde van steen. In alledrie de huisjes kun je wonen, maar ze zijn niet alledrie van dezelfde kwaliteit.

Wil je voor kwaliteit gaan? Dan is het belangrijk om eerst een plan te hebben voor je website. Je bepaalt eerst wat de doelstellingen zijn en wie tot de verschillende doelgroepen behoren. Bovendien kijk je naar de daarbij behorende behoeftes en pijnpunten. Is dat allemaal helder, dan beginnen wij met de bouwtekeningen van jouw website of applicatie. Deze bouwtekeningen worden ook wel wireframes genoemd.

Web links gedetailleerde wireframe.jpeg

Wat zijn wireframes anno 2020?

Wireframes zijn een belangrijk onderdeel in het User Experience (UX) proces. Ze worden eenvoudig opgezet. Dat betekent dat ze geen definitieve kleuren of teksten bevatten. In de eerste stappen van het UX proces verzamelen we zoveel mogelijk informatie over de verschillende doelstellingen, doelgroepen, behoeftes en pijnpunten. Dit doen we met behulp van merkidentiteitsessies, impactsessies en/of klantsessies. Zo krijgen we een goed beeld van alle wensen en eisen. Al deze informatie bundelen we vervolgens in een customer journey. Dat houdt in dat we aan de hand van de verkregen informatie de behoeftes van de eindgebruiker in kaart brengen.

 

 

Web links user flow.jpeg

Hoe maak je een wireframe?

De wireframes brengen de customer journey visueel in beeld. Er zijn tal van mogelijkheden om wireframes op te zetten. Zo kan je met pen en papier simpele schetsen maken. Ook kun je digitaal wireframes uitwerken met heel veel details. Hieronder lees je welke type wireframes wij gebruiken.

Wireframes schetsen

Wanneer we wireframes schetsen met pen en papier, krijg je al snel een mooi resultaat. Wat het schetsen extra aantrekkelijk maakt, is dat we dit ook gelijk met jou als onze opdrachtgever kunnen doen. Dit is niet alleen een leuk en creatief proces. Met kanttekeningen lichten we namelijk ook bepaalde onderdelen toe. Zo zie je direct wat je ongeveer van je nieuwe webapplicatie kan verwachten.

Gedetailleerd

In de meeste gevallen werken wij de wireframes digitaal zo gedetailleerd mogelijk uit. Hierdoor hoeven we aan het eind van het proces er alleen nog maar een ‘sausje’ overheen te gooien. Wireframes in detail uitwerken is echter wel een tijdrovende klus. Daarom betrekken wij je regelmatig bij het proces. Zo weten we zeker dat alle neuzen dezelfde kant op staan. Vooral bij applicaties is het noodzakelijk om te weten welke informatie overgebracht moet worden op de eindgebruiker.

Gedetailleerde wireframes hebben ook een risico. Veel mensen denken bij het zien van het wireframe dat dit het uiteindelijke ontwerp is. We krijgen vaak de opmerking: “Het ziet er wel erg kil uit”. Daarom werken wij alleen met gedetailleerde wireframes als wij zeker weten dat jij ook echt weet wat een wireframe is. 

User flow

Een tactiek die we ook gebruiken is een user flow. Dit is een combinatie van de customer journey en een wireframe. In een user flow geven wij schematisch weer wat de verschillende pagina’s worden. Met kanttekeningen vertellen we welke boodschap er op de desbetreffende pagina's komt te staan. Door de verschillende pagina’s met elkaar te verbinden, krijg je een goed beeld van hoe de eindgebruiker de website zal doorlopen.

Door gebruik te maken van wireframes heb je een goede basis voor een top website of applicatie. Als visual designer heb je ook altijd iets om op terug te vallen. De wireframes zijn een goede leidraad voor de volgende fase: het ‘sausje’. 

Conclusie

Het UX proces is een belangrijke fase om uiteindelijk tot een goed eindproduct te komen. Wireframes zijn essentieel voor dit proces en dus ook voor een sterk ontwerp. Het maken van wireframes zijn dus geen weggegooide uren. Sterker nog, uiteindelijk scheelt het een hoop tijd en dus ook een hoop kosten.