Je huisstijl op je website zorgt ervoor dat mensen je direct herkennen: van je bedrijfsbus en visitekaartje tot je homepage. Maar een huisstijl die op papier werkt, werkt niet automatisch op een scherm. Kleuren zien er anders uit, lettertypes moeten op het web geladen worden en een logo moet ook klein op een telefoon leesbaar blijven.
In dit artikel lees je hoe je een bestaande huisstijl vertaalt naar je website, waar je op let bij kleuren, lettertypes en beeld, en hoe je je site ook na de livegang consistent houdt.
Waarom je huisstijl op je website zo belangrijk is
Een website is vaak de eerste plek waar mensen je bedrijf tegenkomen. Klopt de stijl met wat ze eerder zagen, op een bus, flyer of social media, dan voelt je bedrijf betrouwbaar en verzorgd. Ziet je website er heel anders uit, dan twijfelen ze even of ze wel op de goede plek zijn.
Een huisstijl is meer dan een logo. Het is het geheel van kleuren, lettertypes, beeldgebruik, iconen en toon. Wat je merk betekent en waar het voor staat, lees je in ons artikel over merkidentiteit. Hier gaat het om de praktische vertaling naar het scherm.
Wat heb je nodig om je huisstijl op je website te zetten?
Verzamel voordat je begint de bouwstenen van je huisstijl. Vaak staan ze in een huisstijlhandboek of bij je ontwerper:
- Je logo in vectorformaat (SVG, AI of EPS), plus een liggende, staande en losse beeldmerkversie als die er zijn.
- Een witte of lichte variant van je logo voor donkere achtergronden.
- Je kleuren als HEX- of RGB-code. CMYK- en Pantone-codes zijn voor drukwerk.
- De namen van je lettertypes en de licentie die erbij hoort.
- Voorbeelden van foto's en illustraties in je stijl.
- Eventuele iconen of patronen die je gebruikt.
Huisstijlkleuren vertalen naar het scherm
Drukwerkkleuren en schermkleuren werken anders. Een kleur die op papier warm oogt, kan op een scherm fel of juist flets worden. Laat je kleuren daarom controleren en waar nodig licht bijstellen voor het web.
Let vooral op contrast. Lichtgrijze tekst op wit, of witte tekst op lichtgroen, is voor veel mensen lastig te lezen. De richtlijnen voor toegankelijkheid (WCAG) vragen voor gewone tekst een contrastverhouding van minstens 4,5 tegen 1. Is je huisstijlkleur te licht voor tekst, gebruik hem dan voor vlakken en accenten, en kies een donkerdere tint voor tekst en knoppen. Meer hierover lees je in een toegankelijke website.
- Kies één hoofdkleur voor knoppen en links, zodat bezoekers leren waar ze kunnen klikken.
- Gebruik je accentkleuren spaarzaam. Te veel kleur maakt een pagina onrustig.
- Zorg voor voldoende neutrale kleuren, zoals wit, lichtgrijs en een donkere tekstkleur.
- Denk na over een donkere modus als je doelgroep daar veel gebruik van maakt.
Een praktisch voorbeeld: een installatiebedrijf met een felgele huisstijl. Geel is goed zichtbaar op een bus, maar witte tekst op geel is op een scherm slecht leesbaar. De oplossing is vaak geel gebruiken voor vlakken, lijnen en iconen, en knoppen in een donkere kleur met gele rand of omgekeerd. Zo blijft de huisstijl herkenbaar en de site leesbaar.
Lettertypes: mooi én leesbaar op elk scherm
Lettertypes zijn vaak het lastigste deel van een huisstijl online. Een lettertype dat je op je computer hebt, mag je niet altijd op een website gebruiken. Voor het web heb je meestal een aparte weblicentie nodig. Controleer dat bij de maker of verkoper van het lettertype.
- Gebruik je huisstijlletter vooral voor koppen. Voor lopende tekst werkt een rustige, goed leesbare letter beter.
- Laad niet te veel varianten. Elk gewicht (normaal, vet, cursief) is een extra bestand en maakt je site trager.
- Kies een tekstgrootte die op mobiel goed leesbaar is, meestal minstens 16 pixels.
- Geen weblicentie? Er zijn vaak gratis lettertypes die sterk lijken en vrij te gebruiken zijn.
Logo, beeld en iconen op je website
Je logo staat meestal linksboven in de kop van je website. Op een telefoon is daar weinig ruimte. Een liggende versie of alleen het beeldmerk werkt dan vaak beter. Gebruik altijd een SVG-bestand: dat blijft scherp op elk scherm en is klein.
Vergeet ook het favicon niet. Dat is het kleine icoontje in het tabblad van de browser en op het startscherm van een telefoon. Een herkenbaar beeldmerk of een letter in je huisstijlkleur werkt daar het best.
Beeld hoort net zo goed bij je huisstijl. Kies een vaste stijl voor foto's, bijvoorbeeld licht en luchtig of juist warm en donker, en houd je daaraan. Tips voor het kiezen en plaatsen van beeld vind je in foto's op je website. Gebruik voor iconen één set in dezelfde lijndikte en stijl.
Huisstijl vastleggen in een ontwerpsysteem
Een website groeit. Er komen pagina's, blogs en acties bij. Zonder afspraken sluipen er kleine verschillen in: een andere blauwtint hier, een ander knopformaat daar. Een ontwerpsysteem voorkomt dat. Dat is een vaste set bouwblokken en stijlregels voor je website: kleuren, lettergroottes, knoppen, formulieren en kaarten.
Leg die regels ook vast voor andere mensen die aan je website werken, zoals een tekstschrijver of marketingbureau. Een korte pagina met je kleuren, lettertypes, logoversies en een paar voorbeelden van goede en foute toepassingen is vaak al genoeg.
In een goed gebouwd CMS zijn die regels al ingebouwd. Je kiest een blok, vult tekst en foto in en de huisstijl klopt vanzelf. Zo kun je je website zelf aanpassen zonder dat het ontwerp uit elkaar valt.
Veelgemaakte fouten met huisstijl online
- Drukwerkkleuren één op één overnemen, zonder te kijken naar contrast op een scherm.
- Een decoratief lettertype gebruiken voor lange teksten.
- Een logo als wazig JPG-bestand plaatsen.
- Elke pagina een eigen stijl geven omdat het 'wat afwisseling' brengt.
- Een lettertype gebruiken zonder weblicentie.
Je huisstijl op je website laten zetten door Violexa
Bij Violexa vertalen we je bestaande huisstijl naar een website op maat. We controleren kleuren op contrast, kiezen lettertypes die snel laden en bouwen blokken waarmee je huisstijl ook bij nieuwe pagina's klopt. Een website begint bij €1.799 excl. btw (€2.177 incl. btw), inclusief ontwerp, ontwikkeling, een ontwerp dat op elk scherm werkt, SEO-basis, Google Analytics, CMS-koppeling en uitleg.
Twijfel je of je huisstijl goed overkomt op je huidige site? Plan een gratis quickscan. In 30 minuten, online of op locatie, kijken we samen naar je website. Daarna krijg je kort schriftelijk advies met een prijsindicatie, zonder verplichtingen.
Veelgestelde vragen
Welke kleurcodes heb ik nodig voor mijn website?
Voor een website gebruik je HEX- of RGB-codes. CMYK en Pantone zijn bedoeld voor drukwerk. Heb je alleen drukwerkcodes, dan kan een ontwerper ze omzetten en controleren hoe ze op een scherm overkomen.
Mag ik elk lettertype op mijn website gebruiken?
Nee. Veel lettertypes vragen een aparte weblicentie, ook als je ze al voor drukwerk hebt gekocht. Controleer de licentie bij de maker, of kies een lettertype dat vrij gebruikt mag worden op het web.
Moet mijn website precies hetzelfde zijn als mijn drukwerk?
Nee, herkenbaar is belangrijker dan identiek. Kleuren, lettertypes en logo moeten kloppen, maar op een scherm zijn soms aanpassingen nodig voor leesbaarheid, contrast en snelheid.
