Welke stijl en kleuren geef ik mijn website?

Website met een gebouw in perspectief getekend en met blauw, geel en rood als accentkleuren.

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.

Website maken?

Website Bouwen In WordPress

Wil jij een website maken? WordPress is een uitstekend middel voor het maken van een site.

Het is misschien niet voor iedereen zo eenvoudig om zelf een website te maken. Mocht je bijvoorbeeld een webwinkel willen, laat dan het grote werk aan de professionals over. Want er komt nogal wat kijken aan beveiliging en technische dingetjes die nodig zijn voor een webwinkel. Iets waar het Social Media Duo bij kan helpen.

Het onderhouden, bijhouden en bewerken van de website kun je waarschijnlijk met een beetje inzicht wel zelf. website voorbeeld

Website maken

Belangrijk bij het opzetten van een website zijn de volgende punten:

website maken met een kapstok

  1. Kijk eventueel naar je concurrenten hoe zij hun website hebben ingericht.
  2. En zoek uit hoe je jezelf wilt presenteren. Dat laatste kan te maken hebben met het fotomateriaal dat je wilt gebruiken, de toonzetting (spreek je mensen met “je en jij” of met “u en uw” aan? Gebruik je vaktermen of niet?), de manier waarop een website werkt (menuutjes bovenin, scrollen, sliders) of met je afweging de website te gebruiken als informatiebron (blogs) of verkoopkanaal (webwinkel).
  3. Maak van tevoren een kapstok die structuur aan de website geeft.

Webbouwer

Van opdrachtgevers met een al bestaande website krijgen wij vaak te horen, dat zij hun eigen website niet zelf kunnen onderhouden, omdat zij geen toegang hebben. Dat betekent dat zij bij elke verandering op de website de hulp moeten inroepen van hun webbouwer. En bij elk contact hoort dan een factuur. Dat kan in de papieren gaan lopen.

WordPress

Als je kiest voor een dergelijke constructie, omdat je je helemaal niet bezig wilt houden met dit soort werk en de facturen voor lief neemt dan is dat natuurlijk prima. Wij bieden ondernemers en organisaties de mogelijkheid hun weg te vinden in WordPress om zelf de kleine aanpassingen aan te kunnen brengen. Scheelt geld in de portemonnee en biedt ook meer flexibiliteit en levert een minder statische website op.

Workshop

Social Media Duo geeft daarom workshops. Op aanvraag ook over WordPress. Daarin komen een aantal zaken aan de orde, zoals:

  1. Welke templates kun je kiezen?
  2. Hoe maak ik een pagina?
  3. Wat is het verschil tussen een pagina en een bericht?
  4. Hoe zorg ik ervoor, dat mijn website goed vindbaar wordt?
  5. Waar zet ik mijn berichten neer?
  6. Hoe zit dat met bloggen?
  7. Kan ik mijn publicaties meteen op de sociale media zetten en hoe doe ik dat?

Schrijf je in voor de nieuwsbrief!

Bij het maken van een website komt heel veel kijken. Voor het succes van een website is niet alleen de site zelf van belang. Ook de promotie daar omheen via social media, nieuwsbrieven et cetera. Maar ook hangt het succes af van andere factoren. Daar houdt het Social Media Duo zich graag mee bezig, schrijft daarover blogs en geeft daar workshops over.

Wil je op de hoogte blijven van de blogs die verschijnen en de workshops die wij geven? Verlies ons dan niet uit het oog.

In onze nieuwsbrief geven wij tips, adviezen, infographics en houden we je op de hoogte. Schrijf je in op de verzendlijst en hoor ook wanneer wij gratis presentaties geven over alles wat je nodig hebt voor je online presentatie.

Meer informatie over beeldmateriaal vind je hier: