Welke stijl en kleuren geef ik mijn website?

De kans dat een bezoeker van je website een klant wordt (conversie) is sterk afhankelijk van de uitstraling van je website. Nog voordat een bezoeker 1 letter heeft gelezen heeft hij of zij al een indruk van de stijl en kleuren van de webpagina. Daarom in dit blog uitleg wat bepalend is voor die uitstraling en enkele do’s en don’ts.


Wat bepaalt de stijl van een website?

Hoe wil je dat je website overkomt? Zakelijk of creatief, rustig of druk, vrolijk of serieus, enzovoort. Ter illustratie twee restaurant websites met een compleet andere uitstraling:

website stijl en kleuren bepalen de uitstraling
Klassieke stijl website.
Met een kleurfilter over de achtergrondfoto.
‘We’ krijgt extra nadruk doordat de ‘W’ in hetzelfde lettertype is gezet als het logo.
Beide passen goed bij de gezellige sfeer die het restaurant als een van haar kernwaarden noemt.
Website met een creatieve stijl
Een website met een opvallende achtergrondkleur en bijzondere lettertypes voor de kopjes en in het menu.
Dit past goed bij de creatieve en gedurfde gerechten waar dit restaurant om bekend staat.

Website stijl en kleuren

Bezoekers van websites krijgen hun eerste indruk op basis van:

  • bewegend beeldmateriaal of iets anders dat de meeste aandacht trekt, bijv. een felgekleurde knop of een afbeelding over de volle breedte van de webpagina, evt. met tekst er over heen
  • overig beeldmateriaal
  • de layout, waaronder het menu
  • veel of weinig tekst
  • de gebruikte lettertypes en de grootte daarvan
  • de hoeveelheid witruimte, beter: vrije ruimte in (ongeveer) dezelfde kleur; daardoor krijgen de belangrijkste elementen meer nadruk en vindt de bezoeker makkelijker wat hij zoekt
    (Top 10 web design tips)
  • vormen: rechte lijnen met scherpe hoeken versus golvende lijnen en afgeronde hoeken
  • welke kleuren, hoeveel verschillende

Samen bepalen deze visuele elementen de stijl van de website. De eerste indruk die zij geven bepaalt of bezoekers gaan lezen of klikken, of dat ze je website meteen weer verlaten en daarmee afvallen als (potentiële) klant. Bovenstaande elementen zijn voor een doelmatige website daarom minstens zo belangrijk als de tekst op je website!

WNF heeft een website met afgeronde vormen, bijv. de onderkant van de openingsfoto is geen rechte maar een kromme lijn.
Een website met 3 ronde vormen in de header afbeelding, en afgeronde knoppen.

Dezelfde uitstraling als het bedrijf zelf

Uiteraard moeten website, stijl en kleuren passen bij het bedrijf en bij het overige marketingmateriaal. Denk aan logo, huisstijl, banners en sociale media kanalen. Dit zorgt voor herkenbaarheid, consistentie en daarmee vertrouwen.

Tip: Ook stijlen van websites zijn onderhevig aan modes die komen en gaan. Als je niet elke paar jaar je website wilt (laten) re-designen kies dan niet voor een erg modieuze stijl.

Kleuren

Over kleuren valt ook heel veel te zeggen. Echter, over het algemeen zal het logo vaststaan voordat de website wordt ontworpen. Daarmee liggen de te gebruiken kleuren min of meer vast. Een huisstijl kan ook aangeven welke kleur waarvoor en hoe te gebruiken. Anders mag je dat nog zelf bepalen.

Kleuren zijn een onderdeel van de stijl. Des te meer verschillende kleuren des te lastiger om ze goed bij elkaar passend te krijgen. En ook voor kleur geldt dat zowel teveel als te weinig niet goed is.

Website met een gebouw in perspectief getekend en met blauw, geel en rood als accentkleuren.
Een website met blauw, geel én rood als accentkleuren, maar toch harmonieus door de grijze achtergrond en het spaarzame gebruik van rood, de meest opvallende kleur. Merk ook op dat gebouw in perspectief is getekend.

Een andere kleur is heel effectief om de aandacht te trekken en bezoekers de weg te wijzen. Daarom geef je knoppen en evt. links een andere kleur dan de gewone tekst.

Knoppen die aandacht trekken en goed leesbaar zijn

Je kan knoppen opvallender maken door ze een schaduw te geven. Bijkomend effect is dat de website ‘minder plat’ oogt en dat het de website kan verlevendigen.

Let op bij knoppen en tekst over gekleurde blokken of afbeeldingen: zorg voor genoeg kleurcontrast tussen de achtergrondkleur(en) en de tekst. Anders wordt de tekst moeilijk om te lezen. Voor veel mensen zal het zwart op rood in bovenstaande knop al een stuk lastiger lezen dan zwart-op-wit of wit op rood. Wat de kleuren van je logo en huisstijl ook zijn er is altijd wel een voor iedereen goed leesbare variant mogelijk, bijvoorbeeld:

Dit om te laten zien wat kleurcontrast betekent voor de leesbaarheid. En dat ook de vorm bepalend is voor je indruk. (Natuurlijk kies je normaliter 1 kleur en 1 vorm voor een knop en gebruik je die overal op de website.)

In elkaar overvloeiende kleuren

Behalve werken met afzonderlijke kleuren is het ook mogelijk om kleuren geleidelijk in elkaar te laten overvloeien (‘gradients’ in het Engels). Dit kan een visueel erg aantrekkelijk resultaat geven en oogt minder strak dan monotone kleuren.


Bepaal de sfeer van een foto met een filter

Naast de kleuren van bijv. knoppen, links, kopjes, scheidslijnen of blokken kan je ook je foto’s een bepaalde ‘kleur’ geven. Zomers of winters, sepia of zwart-wit, of een bepaalde kleur de boventoon laten voeren. Er zijn veel tools met kant-en-klare filters waarmee je je foto’s zo kan veranderen. Daarmee gaat je foto een andere sfeer uitstralen. Een ijsbaan wil een winterse uitstraling, een sup-school een zomerse. Een restaurant zou tegelijk met het plaatsen van het wildmenu in het najaar ook de zomerse foto kunnen vervangen door een foto die beter past bij dat seizoen.

Gebruik een filter om je foto de meest passende uitstraling te geven. Dat kan met vele (ook gratis) tools.

Aanverwante onderwerpen website stijl en kleuren

Meer uitleg over hoe je website zo effectief mogelijk te maken dankzij stijl en kleurgebruik:

Kunnen we je ergens mee helpen? Neem dan contact met ons op.

Eén antwoord op “Welke stijl en kleuren geef ik mijn website?”

  1. Kleur is ook een onderdeel op een website, dat meewerkt aan de toegankelijkheid. Denk aan slechtzienden, kleurenblinden en mensen die wat minder snel van begrip zijn. Rian Rietveld is een expert op het gebied van “accessibility”, toegankelijkheid. En Sandra Gortemaker schreef een interessant blog n.a.v. een presentatie die Rian gegeven had. Mooie samenvatting: kijk maar! https://www.sandragortemaker.nl/wordpress/website-toegankelijkheid-en-usability/

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.