Blog overzicht

Kennis is om te delen

Howto: website ontwerp (4/4)

Het plaatje compleet.

De reeks ‘Howto: website ontwerp’ wil ik afsluiten met het vierde deel: het visueel ontwerp. Vaak is dit de laatste stap in het designproces, of de ontwerpfase (er vanuit gaande dat je met een watervalmethode werkt. Scrummen gaat meer stapsgewijs en hand-in-hand met development). Als voorbeeld heb ik het in 2015 gerealiseerde project v-r.nl van V&R genomen. Zoals eerder beschreven, zijn er voor deze website wireframes ontworpen, is er getest, met de opdrachtgever overlegd, gefinetuned en na akkoord konden we aan de slag met het visuele stuk.

wireframe-visual-design

Zoals je kunt zien is dit een voorbeeld van hoe de vlakken, knoppen en visuele elementen bijna 1-op-1 zijn aangepast naar huisstijl van de opdrachtgever. Als je de stap om wireframes te ontwerpen over zou slaan loop je niet alleen het risico dat je voor verrassingen komt te staan bij de uiteindelijke interactie, maar je kunt ook veel minder goed sturen op functionaliteit én de opdrachtgever heeft al een hele goede richting van hoe het ontwerp straks gaat werken.

Tools
Zoals ik in mijn vorige blog een aantal suggesties deed voor programmatuur om wireframes te maken geldt dat ook voor het ‘grafische plaatje’. Eigenlijk kun je nowadays kiezen uit twee kampen: Aan de ene kant het traditionele Adobe Photoshop-kamp, en aan de andere kant het Sketch-kamp. Beide tools met pro’s en con’s:

  • Photoshop kent zijn oorsprong in het bewerken en manipuleren van foto’s
  • De sterke kant van Photoshop zit hem in de praktische pixels
  • Sketch is jong en is meer vector-georiënteerd.

De waarheid over welke tool nu het beste is zal ergens in het midden liggen. Mijn advies is dat je software gebruikt die prettig, snel en intuïtief werkt.

Beginnen
Om ook een klein stuk van de praktische kant te belichten kan ik een voorzet doen van hoe je je document opzet. Als je een ontwerp maakt voor gebruik en visualisatie op een desktop (laptop of standalone machine) dan moet je rekening houden met een bepaalde schermresolutie die doorgaans, op een gemiddeld scherm goed bekeken kan worden. Het document -canvas- zet ik op in een breedte van 1.500 pixels, waarbinnen ik een grid genereer van 1.200 pixels breed zodat de website gecentreerd wordt. Die 1.200 pixels heb ik onderverdeeld in een grid op basis van Bootstrap waar onze front-end developers vervolgens prima mee uit de voeten kunnen. Het grid (kolommen) geeft je de mogelijkheid om elementen snel en volgens een responsive principe uit te lijnen.

Huisstijl
Websites zijn een onmisbaar communicatiekanaal, onderdeel van en ondersteunend aan je marketingstrategie. Reden te meer om de online ervaring die de bezoeker moet hebben naadloos aan te laten sluiten bij wat je in andere middelen ziet, leest en hoort. Dat betekent dat er in hoge mate rekening gehouden moet worden met de look-and-feel en branding van de organisatie. Het is dan niet alleen prettig dat de opdrachtgever middelen beschikbaar heeft zoals een vectorbestand van het logo, de juiste fonts (zie ook tips voor online fontgebruik (1, 2) en mooi, hi-res beeldmateriaal, maar soms is er sprake van een brand (identity) manual waarin staat beschreven hoe de corporate identity wel en niet mag worden toegepast. In dat geval kun je praktisch richting geven aan je ontwerp. Overigens ontbreken vaak fatsoenlijke “online/digital” kaders in een huisstijl handboek. Misschien wordt dat wel het onderwerp van mijn volgende blog \ud83d\ude09

Conclusie
Het ontwerpen van een website is – als je de juiste keuzes maakt – geen hogere wiskunde. Wel is het nodige vakmanschap vereist om die juiste keuzes te maken in het interactie ontwerp én enig stijlgevoel en creativiteit als het gaat om het visual design. Tel daarbij op dat je goed moet in kunnen schatten hoe een organisatie online present moet zijn en je hebt een helder recept voor het ontwerpen van een website. Als je dan ook nog goed gereedschap hebt staat er weinig meer in weg om te starten (of zoals Coolblue zegt: Gewoon, doen)!

Tools en tips genoeg … nu de vaklui nog \ud83d\ude09