Tips voor de grafische vormgeving van een goede website

Nadat er een akkoord is gekomen op het prototype is het tijd om de website aan te gaan kleden, door middel van grafische vormgeving. Tijdens dit proces spelen de eerder opgemaakte persona’s een belangrijke rol. We moeten goed in ons achterhoofd houden hoe de opdrachtgever gezien wil worden door de doelgroep. Op basis hiervan bepalen we kleur, typografie en beeldmateriaal om een compleet en passend beeld te vormen.

Hieronder lichten we toe hoe ik als grafisch vormgever te werk gaan tijdens het ontwerpen van een website.

Direct je website starten?

Website star ten
Beter goed geïnspireerd dan slecht bedacht

Als we een beeld hebben van de eisen en wensen laten we ons graag inspireren door andere goede ontwerpen. Dit kan door het doorbladeren van design galeries (zoals Awwwards of Bestwebgallery) of sites waarop ontwerpers hun nieuwste werk tonen (zoals Dribbble of Behance). Het is vooral interessant om te zien hoe ander ontwerpers bepaalde interface-patronen tweaken en verbeteren. Door bij ieder project inspiratie op te doen blijven we ook goed op de hoogte van trends die spelen op het gebied van webdesign. Zo is het tegenwoordig bijvoorbeeld een trend om websites wat ruimer en minimaler op te zetten. Dit in tegenstelling tot een aantal jaren geleden toen overal een verloop of schaduw onder moest zitten.

Grafische Vormgeving: Inspiratie

Inspiratie

Kleurgebruik maakt het grote verschil

Kleurgebruik is een van de belangrijkste factoren bij grafische vormgeving en kan verschillende uitwerkingen hebben op je ontwerp. Wil je opvallen, dan gebruik je bijvoorbeeld fel oranje of rood. Deze kleuren geven veel kracht en vallen daarom erg op. Denk bijvoorbeeld aan Media Markt of EasyJet, zij gebruiken de kleuren om vooral te communiceren dat ze goedkoop zijn. Zoek je meer rust en vertrouwen in je ontwerp, dan kun je gaan voor een blauwe tint of bijvoorbeeld werken met grijstinten. Hierdoor vallen alle ander kleuren die je er naast gaat gebruiken erg goed op. Denk hierbij aan een belangrijke “Call to action”-knop die extra moet opvallen. Vaak wordt er naast de primaire kleur ook een secundaire kleur gebruik om het geheel af te maken. In de meeste gevallen zijn dit complementaire kleuren. Deze kleuren liggen tegenover elkaar in de kleurencirkel en zorgen voor een goede kleurcombinatie. Probeer niet te veel verschillende kleuren te gebruiken om de rust te waarborgen.

Grafische Vormgeving: Kleurgebruik

Kleurgebruik

Typografie voor de begeleidende ondertoon

Naast kleur doet typografie ook veel voor het design. Kies je voor een letter met een schreef (denk aan Times of Georgia) dan geeft dit al een hele ander indruk, dan wanneer je kiest voor een moderne tijdloze Helvetica. Beide stralen wel kwaliteit uit, maar op een ander manier. De schreef in Times heeft gelijk ook iets authentieks, terwijl Helvetia juist een strak en moderne indruk geeft. Kies je daarnaast voor een schriftletter (een handgeschreven lettertype) dan komt het ineens een heel stuk persoonlijker en warmer over, doordat het lijkt of iemand het daadwerkelijk geschreven heeft. Mede door de komst van @font-face, voor het embedden van fonts, is het gebruik van afwijkende lettertype toegenomen. Dit zorgt ervoor dat veel organisaties hun eigen huisstijl ook op dit gebied online kunnen doorvoeren.

Grafische Vormgeving: Typografie

Grafische Vormgeving: Typografie

Beeldmateriaal maakt het af

Uiteraard is geen website compleet zonder ondersteunend beeldmateriaal. Foto’s zeggen meer dan duizend woorden en dat is in het webdesign niet anders. Je zet namelijk gelijk een hele sfeer neer met een goede foto. Denk aan een mooi opgemaakte tafel voorzien van een smakelijk gerecht, dit kun je onmogelijk zo goed beschrijven zoals het er daadwerkelijk uitziet. Ook kun je met foto’s kleine trucjes uit halen die inspelen op het menselijk gedrag. Denk hierbij aan foto’s van een aantrekkelijk persoon die naar een product kijkt. De bezoeker zal zich automatisch ook genoodzaakt voelen hiernaar te kijken. Dit komt simpel weg, omdat wij (mensen) sociaal zijn ingesteld. Dat betekend dat we snel de neiging hebben ander mensen te spiegelen. Het werkt vooral goed, wanneer gebruik wordt gemaakt van foto’s van personen, waarmee de bezoeker zich kan identificeren. Ook hier spelen de persona’s dus een belangrijke rol.

Grafsch Vormgeving: Beeldmateriaal

Beeldmateriaal

Witruimte en uitlijning

Een vaak vergeten factor is witruimte, terwijl dit eigenlijk de factor is die een ontwerp structuur en rust meegeeft. Het is momenteel een trend om websites wat minimaler op te zetten. Hierin is witruimte een zeer belangrijke factor. Met witruimte kun je aangeven welke elementen bij elkaar horen en door het toevoegen van witruimte laat je de site ‘ademen’. Wanneer er twee elementen naast elkaar geplaatst worden, geeft dit de impressie dat deze twee een verband hebben. Plaats je ze echter los van elkaar, dan zullen deze gezien worden als losse elementen. Dit kan belangrijk zijn bij het opzetten van een gebruikers-interface (knoppen) of andere informatieve elementen. Om te zorgen dat het ontwerp niet gaat ‘dansen’ wordt er vaak gebruik gemaakt van een grid. Een bekend en vaak gebruikt grid is het 960 Grid system dat ideaal is voor een schermresolutie van 1024 bij 768 pixels. Je kunt ook kiezen voor het flexibele 1140 Grid system dat zich automatisch aanpast aan de breedte van het scherm. Dit grid is responsive en daardoor ideaal als de website ook geoptimaliseerd moet worden voor mobiele apparaten. Beide grid systems bestaan uit een aantal kolommen, waarop de diverse elementen uitgelijnd worden. Hierdoor oogt het niet alleen strak maar is het voor het oog ook prettiger om te zien en worden verbanden tussen elementen sneller gelegd.

Grafische Vormgeving: Witruimte en uitlijning

Witruimte en uitlijning

Oefening baart kunst

Hopelijk heb je wat aan de bovenstaande tips om een goed ontwerp voor een website te maken. Bedenk wel goed dat het ontwerpen van een goede website geen truukje is dat je snel kun leren, maar ook hier geldt: oefening baart kunst. Door vaker ontwerpen te maken zul je merken dat het steeds beter gaat. Het is hierbij ook erg belangrijk om naar andere ontwerpen te kijken en hier van te leren. Als het niet lukt, kun je het altijd nog uitbesteden ;-).

Peter Hol

Peter Hol

Geschreven door:
Peter Hol is grafisch vormgever en vertaalt prototypes en wensen van opdrachtgevers in grafische concepten. Naast zijn uitgebreide kennis en ervaring op het gebied van vormgeving weet Peter ook veel van usabillity, marketing en de technische mogelijkheden. Hierdoor maakt hij ontwerpen die ook werken en realiseerbaar zijn.

Één reactie op “Tips voor de grafische vormgeving van een goede website

  1. Merci,

    Ben ook bezig met een nieuwe site. Ook omdat ik de sites responsive wil maken t.b.v. toenemend gebruik mobiel.

    Streef naar zo simpel mogelijk. Is nog wel even een klusje. Ook om de waarde van de oude sites (SEO) te behouden.