Designs

Aanleiding

De vervolgstap na het maken van wireframes, is om deze om te zetten naar designs. In deze designs wordt gelet op het gebruik van kleur, typografie, foto's, etc. i.p.v. alleen de globale vormgeving van de tool. De designs dienen uiteindelijk ook als opzet voor het clickable prototype en daarnaast worden de designs gebruikt als leidraad tijdens de ontwikkeling van de tool.

Aanpak

Voor de designs heb ik een kopie gemaakt van de wireframes en ben ik de verschillende elementen gaan invullen met kleur. Doordat ik in Sketch gebruik heb gemaakt van symbolen, worden de elementen die op meerdere pagina's terugkomen zoals het side menu automatisch gewijzigd wanneer ik het hoofdelement wijzig. Hierdoor is het omzetten van wireframes naar designs een erg snel en makkelijk proces.

De feedback die op de laatste versie van de wireframes is gegeven heb ik meteen meegenomen in het maken van deze designs.

Resultaten

Hieronder zijn enkele pagina's van de tool te zien. De volledige uitwerking is te vinden in de bijgevoegde documenten onderaan deze pagina.

Zoals je ziet krijgt de tool meteen meer vorm door het gebruik van kleuren en schaduwen. Tijdens het invullen van de verschillende elementen heb ik de huidige website van Buro 3 erbij gehouden om de look en feel zo goed mogelijk over te nemen. De tool moet namelijk meteen het vertrouwde Buro 3 gevoel krijgen.

Elementen zoals de productkaarten (de blokjes met de titel, korte beschrijving en categorie label) komen op verschillende pagina's terug en zijn ook altijd hetzelfde opgebouwd. Zo kan de gebruiker ze makkelijk herkennen en weet hij/zij direct wat ze betekenen. De productdetail pagina heeft een duidelijke CTA, namelijk het contact blokje met de gekoppelde werknemer.

Alle pagina's hebben een strakke en rustige uitstraling zonder al te veel overbodige informatie. Daarnaast hebben alle pagina's ten alle tijden de zoekmogelijkheid in het top menu, zodat de gebruiker meteen kan zoeken i.p.v. eerst nog naar een aparte pagina te navigeren.

What's next

Een belangrijk onderdeel van het ontwikkelproces zijn gebruikerstesten. Om de gebruikerstesten zo realistisch mogelijk uit te voeren, worden de designs omgezet naar een clickable prototype. Op die manier krijgt de testpersoon een goed gevoel over de look en feel die de tool moet gaan krijgen.