In de blog van 24 juni kon je al lezen hoe je jouw website kunt ontwikkelen aan de hand van het onderzoeken welke klanttypen bij jouw website passen. Deze week zullen we ingaan op hoe je het design van de website kan ontwikkelen en testen. Nadat je de klanttypen hebt geïdentificeerd kun je beginnen met de opzet voor de website. Hierbij wordt eerst een wireframe gemaakt, vervolgens maak je een prototype website en tenslotte kun je gaan designen. Lees hier hoe je deze stappen kunt invullen om zo jouw perfecte website te ontwikkelen.

Ontwikkelen van een website: begin bij een wireframe

Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website. Wireframes kunnen worden gezien als een bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn. In de wireframes, de bouwtekening van de website, worden zaken getekend zoals waar de navigatie zich bevindt, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. De functionaliteiten die je wilt integreren in de website geef je bij wireframen ook een plaats. Teken dus alvast een button of icon ‘Winkelmandje’ in je ontwerp. Uit de onderzochte klanttypen is als het goed is voortgekomen wanneer de doelgroep met jouw product of dienst in contact wilt komen en welke acties ze graag uit willen voeren. Let hierop bij het wireframen, zodat je de wireframes afstemt op je doelgroep. Het grote voordeel van wireframing is dat alleen op de inhoud gefocust wordt. Het grafische aspect, het uiteindelijke design met de huisstijl van jouw bedrijf komt hierbij nog niet aan pas. Het wireframen kun je natuurlijk doen in Photoshop, waarbij je zelf de website tekent, maar ook in verschillende gratis (of betaalde) programma’s. Een handige tool voor het ontwikkelen van en wireframe is: http://balsamiq.com/products/mockups/

Naast het ontwikkelen van een wireframe kun je een storyboard maken met daarin de websitestructuur of de customer journey, waarbij je alles stapgewijs uitwerkt. Een programma die je hiervoor kan gebruiken is: http://servicedesigntools.org/tools/13

Daarnaast kun je er ook voor kiezen een sketchboard te maken. Hang een bord op met schetsen voor de design richtingen die je zoekt. Plak er notes bij voor aantekeningen en inzichtelijk maken van onderlinge verbindingen. Hieronder zie je een filmpje dat afbeeldt hoe je sketchboarden kan maken.

Maak een prototype

Nadat je de wireframes hebt ontwikkeld kun je beginnen met het prototyping. Met prototyping ga je het wireframe interactief testen. Voor het interactief testen van het prototype kun je gebruikmaken van verschillende gratis programma’s zoals:

Of het betaalde programma:

Wanneer je het prototype af hebt, kun je deze testen onder jouw doelgroep. Hierdoor krijg je inzicht in het surf en zoekgedrag van jouw doelgroep op de website. Het voordeel met prototyping is uiteraard dat je, door het testen van de website (a/b testing), het ontwerp van de website nog kan aanpassen.

Design jouw perfecte website

Heb je moeite met het overbrengen en verwerken van het design, zoals verschillende huisstijlmogelijkheden? Er zijn verschillende websites die je kan gebruiken om inspiratie op te doen voor het ontwerp van jouw design:

Wil je meer informatie over het ontwikkelen van jouw website of webdesign?

Naam dan contact met ons op.

Erik Lambrechts
Klik & Steen

info@klikensteen.nl
www.facebook.com/klikensteen