Les 3: Kleuren en lettertypes kiezen voor je website
Zoals je in het voorbeeldhuisstijlhandboek kunt zien is het belangrijk dat je huisstijl meerdere kleuren bevat*:
- In elk geval 2 wat ‘hardere’ of donkerdere kleuren die goed afsteken tegen een witte achtergrond en die je kunt gebruiken voor elementen die moeten opvallen/ goed leesbaar moeten zijn zoals boekingsknoppen, aanklikbare links en als achtergrondkleur voor tekstbalken etc.)
- Een zwarte of heel donkergrijze kleur voor goed leesbare ‘normale’ tekst, titels etc.
- En een aantal zachtere kleuren (die voor de rust vaak uit dezelfde ‘kleurenfamilie’ zullen komen als de hardere kleuren), dus bijvoorbeeld een lichtblauwe kleur die goed past bij de donkerblauwe kleur, zodat die samen een mooi geheel vormen, maar wel voldoende contrast hebben om bijvoorbeeld tekst in de donkere kleur op een tekstvlak in de lichtere kleur te zetten.
*Disclaimer: zoals je wellicht begrijpt is dit een heeeeeeel globale instructie om je een idee te geven van wat er minimaal belangrijk is bij het kiezen van kleuren voor je website: er is een reden dat een vormgevingsopleiding 4 jaar duurt, dus een professionele designer houdt met veel meer rekening dan alleen dit ‘simpele’ lijstje.
Ik geef je dit alleen als richtlijn, omdat ik weet dat lang niet iedere kleinschalige reisorganisatie budget heeft om een professionele huisstijl en logo te laten ontwerpen en ik van mening ben dat dat vooral in het begin ook echt niet per se nodig is: met een beetje achtergrondkennis/ inzicht kun je zelf ook echt wel wat sterke basiskleuren voor je site kiezen die goed genoeg zijn om een website te ontwerpen die goed leesbaar is, er aantrekkelijk uitziet én boekingen oplevert.
Iedere kleur heeft een eigen unieke code
Het is belangrijk om te weten dat iedere variatie van een kleur een specifieke eigen kleurcode heeft die je wilt doorgeven aan je websitebouwer. Zie hieronder bijvoorbeeld de huisstijlkleuren van mijn eigen Build Your Travel Bizz website: je ziet dat hier 2 verschillende kleuren ‘blauwgroen’ in zitten en deze hebben allebei een eigen unieke ‘Hex kleurcode’ die bestaat uit een specifieke combinatie van letters en cijfers.
Daarnaast kunnen kleuren ook worden weergegeven op een RGB-schaal (Rood Geel Blauw schaal). Zie screenshot hieronder waarin je voor de donkerblauwgroene kleur hieronder kunt zien wat de Hex code en RGB code is (misschien herken je dit screenshotje vanuit het Word tekstbewerkingsprogramma van Microsoft Office, daarin kun je ook kleuren kiezen op basis van deze kleurschalen).
Zoals je ziet is het belangrijk om je websitebouwer de exacte kleurcode van jouw huisstijlkleuren door te geven, want ‘licht blauwgroen en donker blauwgroen’ zoals ik hierboven gebruikte laat nogal wat ruimte voor verwarring en kan zomaar eens een websitedesign opleveren dat totaal niet uitstraalt wat jij wilt.
Hoe kies ik een kleur en hoe weet ik wat de code daarvan is?
Er zijn verschillende manieren om een kleur te kiezen en te achterhalen wat de code ervan is. Hieronder vind je mijn persoonlijke favorieten (ik word vooral altijd heel blij van nummer 3 omdat je daarmee direct kleuren kiest die echt bij je bestemming passen):
1. Kies een kleur uit alle mogelijke kleuren en achterhaal de kleurcode
De eerste manier om ‘from scratch’ je eigen huisstijlkleuren te kiezen is door bijvoorbeeld naar deze ‘kleurcode’ website te gaan en net zo lang te zoeken in de verschillende variaties van kleuren tot je er 1 vindt die je mooi vindt. Aan de rechterkant vind je dan de RGB- en Hex codes die daarbij horen:
2. Colorzilla: achterhaal welke kleur op een andere website wordt gebruikt
Colorzilla is een ‘add-on’ die je kunt downloaden voor je internetbrowser (Firefox of Chrome). Zodra je dit programmaatje hebt gedownload verschijnt er bovenin je werkbalk een ‘pipetje’ waarmee je een ‘sample’ of ‘proef’ kunt nemen van iedere willekeurige kleur op een website.
Je klikt bovenin je scherm op het pipetje, gaat met je muis naar de tekst of afbeelding waarvan je de kleurcode wilt weten en klikt erop en de code wordt direct zichtbaar op je scherm:
Na downloaden van de add-on klik je rechtsboven op het pipetje en kies je ‘color picker’ uit de dropdown. Vervolgens kun je met het pipetje klikken op de kleur die je mooi vindt en waar je de code van wilt weten.
Zodra je op een kleur geklikt hebt, verschijnt helemaal onderaan in de popup de HEX code van de kleur.
3. Huisstijlkleuren kiezen uit een eigen foto: voor een stijl die past bij je bestemming/reisaanbod
Zelf ben ik echt totaal fan van onderstaande ‘color picking tool’ om huisstijlkleuren te kiezen.
Zo werkt het: je upload een mooie foto met een typerend beeld voor jouw bestemming naar de online ‘Colors from Image’ tool en als je op een willekeurige plek op de foto klikt, dan geeft de tool je de HEX kleurcode voor die kleur.
Door ‘echte foto’s’ van je bestemming te gebruiken, leg je op deze manier zelf de basis voor een sfeervolle huisstijl die echt 100% bij je bedrijf past en die je gasten ook op bestemming terug zullen herkennen.
Voorbeeld van een foto van een typerend uitzicht in de woestijn bij Cairo die ik aan de vormgeefster van Kingfisher Tours gaf als richtlijn voor het ontwikkelen van de huisstijl. Zij gebruikte deze foto ter inspiratie en koos een kleur die goed ‘werkt’ in het geheel van de huisstijl, maar jij kunt natuurlijk ook zelf in zo’n foto op zoek gaan naar een sterke kleur.
Extra tip!
Wat zijn de ‘waarden’ van jouw bedrijf? Kies een passende kleur
In marketing en advertising geldt dat iedere kleur in het hoofd van de consument een bepaalde psychologische betekenis heeft. Los van wat je zelf qua kleur mooi vindt of wat bij je bestemming past, is het daarom ook interessant om eens na te denken over welke ‘waarden’ jij met je reisorganisatie belangrijk vindt en wat bij je doelgroep past (bijvoorbeeld jong/oud, natuur, rust of actie, eerlijk, betrouwbaar, spontaan, avontuurlijk, warm etc.) en vanuit daar eens te kijken welke kleuren daarbij passen:
Bron afbeelding: Pinterest
Lettertype kiezen voor je website
Ook het lettertype dat je kiest voor je website kan veel verschil maken voor de uitstraling van je site.
Algemene afspraken voor het kiezen van goede lettertypes voor je website zijn:
1. Kies een ‘strak’ lettertype ‘zonder schreef’
Om je website goed leesbaar te houden en een moderne uitstraling te geven, kies je het beste voor een letterypte ‘zonder schreef’ of ‘sans serif’ (de dunne dwarsstreepjes aan het uiteinde van de verticale en horizontale balken van een letter).
Vermijd ‘fantasielettertypes’ zoals Comic Sans, want die ogen rommelig en onprofessioneel.
Hieronder zie je een voorbeeld: zoals je ziet zijn bijvoorbeeld Helvetica en Calibri populaire lettertypes zonder schreef en ook Arial wordt veel gebruikt en is goed leesbaar. (op de Travel Bizz Academy wordt Helvetica gebruikt).
Ook tússen de verschillende ‘sans serif’ lettertypes zitten kleine verschillen in stijl: Arial en Helvetica zijn bijvoorbeeld net wat zakelijker en strakker, terwijl Calibri wat ‘warmer’ en ronder is, maar er nog wel professioneel uitziet.
Een goede websitebouwer/ designer kan je natuurlijk helpen bij het kiezen van een lettertype wat ‘passend’ is voor jouw bedrijf, maar je kunt ook zelf alvast eens rondkijken op andere websites wat je mooi vindt en die sites als voorbeeld doorgeven natuurlijk.
2. Minimale fontgrootte is 16px
Zorg dat de kleinste tekst op je website niet kleiner is dan fontgrootte 16px, anders is het voor het merendeel van de mensen onmogelijk om nog iets te lezen op bijvoorbeeld een mobiel en dat heeft invloed op het gebruikersgemak.
Hoe ongemakkelijker een website wegleest hoe eerder mensen zullen vertrekken. Niet alleen slecht voor je boekingen, maar ook voor je positie in Google, want Google hecht veel waarde aan gebruikersgemak .