window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-155389987-1');
MENU

Blog overzicht

12 mei 2020

Hi! Ik ben Koert en sinds juli 2019 UX Designer bij 5th Corner, een vrij recente aanvulling van het team dus. Het is natuurlijk niet te hopen dat ik zometeen langer thuiswerk dan dat ik samen met mijn collega’s het kantoor heb gedeeld. 

Desalniettemin geniet ik bij tijd en wijle ook zeker wel van mijn thuiskantoor. Met mooi weer lunch ik in de zon op het balkon en als het hemelwater rijkelijk vloeit draait mijn platenspeler overuren.

Zowel thuis als op het werk drink ik nagenoeg alleen maar water, koffie is niet aan mij besteed en thee drink ik zelden. Maar schenk jezelf iets lekkers in, grijp de koekjes van de plank dan vertel ik je ondertussen één en ander over het doel en nut van Wireframes en Prototypes.

In den beginne…
Het ontwerpen van een website, app of software kost tijd. Tijd is geld. Daarom is het belangrijk dat er zo efficiënt mogelijk gewerkt wordt naar een eindresultaat. Het begint uiteraard allemaal met de uitvraag van de klant. Laten we voor het gemak jou als voorbeeld nemen.

Jij wilt een nieuwe website. Dan starten wij met vragen stellen. Vragen zoals; wie gaat deze site gebruiken? Met welk doel komt de gebruiker naar deze site? En om dat doel te bereiken, welke functionaliteiten heeft jouw website nodig? Met antwoorden op deze vragen beginnen wij het ontwerpen.

Wireframe
We starten dan met het maken van een wireframe. Het wireframe kan je vergelijken met een bouwtekening. Hierin bepalen we de structuur, lay-out en functionaliteit van het ontwerp. Daarnaast is een wireframe erg geschikt om de verbanden tussen de verschillende pagina’s te duiden. Vaak gebeurt het dat we tijdens de gesprekken met de klant (jij dus) alvast schetsen maken. Dit doen we om een beeld te vormen van hoe elementen en functionaliteiten zometeen samenhangen. Deze schetsen werken we dan later digitaal uit.

Wireframes worden meestal gemaakt in zwart/wit en grijstinten. Dit is om het ontwerp zo eenvoudig mogelijk te houden. Dus niet opgaan in allerlei details die er in deze fase van het ontwerp nog helemaal niet toe doen. Alles draait om het zo basic mogelijk houden van het ontwerp. Zo zorgen wij ervoor dat jouw website zometeen functioneel optimaal werkt en dat de gebruiker feilloos de weg weet te vinden in de nieuwe omgeving.

Prototyping
Als de eerste versie van het wireframe volledig is en alle verschillende templates zijn uitgewerkt komt het moment dat we een prototype kunnen maken. Dit doen we veelal in de vorm van een digitaal klikbaar model. Hiermee simuleren we een realistische omgeving met de pagina’s van het wireframe die wij zojuist ontworpen hebben. We zorgen ervoor dat knoppen functioneel worden en dat je op deze manier door jouw nieuwe website heen kan klikken.

Waarom we dit doen? Simpel; je kan namelijk niet snel genoeg beginnen met het testen van wat je hebt bedacht. Een prototype is de ideale manier om snel te valideren of een bepaalde structuur of functionaliteit wel of niet wordt opgepikt door de gebruiker. Begrijpen zij wat ze moeten doen en waar ze moeten klikken om bij hun doel te komen? Zo niet, dan gaan wij terug naar de tekentafel en herhalen we het proces. Het aangepaste wireframe wordt toegevoegd aan het prototype en zo testen we verder totdat we de meeste pijnpunten hebben geëlimineerd. Op deze manier bespaar je veel kosten doordat de developers elementen of functionaliteiten niet opnieuw hoeven te bouwen.

Vervolg
Nadat we tevreden zijn met hoe de website in elkaar steekt beginnen we met het visuele ontwerp en het bouwen van jouw website. Tijd om het kale huis dat we zojuist getekend hebben te voorzien van een mooie aankleding. Wij zorgen er niet alleen voor dat jouw website gebouwd wordt, we onderhouden hem ook. Zo staan mijn collega’s en ik altijd klaar om problemen op te lossen maar zeker ook om mee te denken met het verbeteren van het product. De ontwikkelingen binnen ons vakgebied gaan namelijk in een sneltreinvaart en we houden jou daar graag van op de hoogte. Geniet van je website!

Kortom; een resultaatgerichte aanpak voor een resultaatgerichte website of applicatie. Mooi toch?!
Koert Berends

UX Designer