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:
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.
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!
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.
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.
Aanverwante onderwerpen website stijl en kleuren
Meer uitleg over hoe je website zo effectief mogelijk te maken dankzij stijl en kleurgebruik:
- Je website op je doelgroep aanpassen
- Layout van je Homepage: wat mag je daarbij niet vergeten?
- Hoe kies ik een geschikt thema voor mijn website?
- Waar moet ik op letten bij het kiezen van een stockfoto?
- Over lettertypes volgt later nog een blog op deze site.
Kunnen we je ergens mee helpen? Neem dan contact met ons op.
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/