Je huisstijl is hoe mensen je herkennen: je logo, je kleuren, je lettertypes en de toon waarop je communiceert. Op je visitekaartje en je bus staat het allemaal goed. Maar een website is geen drukwerk. Kleuren ogen anders op een scherm, een lettertype mag niet altijd online gebruikt worden en een logo dat op een folder mooi is, kan in een smalle menubalk op een telefoon onleesbaar worden. In deze handleiding lees je hoe je je huisstijl goed naar je website vertaalt.
Stap 1: verzamel wat je hebt
Begin met een overzicht van je huisstijl. Heb je een huisstijlhandboek, dan staat het daarin. Zo niet, verzamel dan in elk geval:
- Je logo in alle varianten: liggend, staand, alleen het beeldmerk, en een witte versie voor op donkere achtergronden.
- Je kleuren, met de exacte kleurcodes.
- Je lettertypes, met de naam en het bestand of de licentie.
- Beeld: foto’s, illustraties of iconen die bij je merk horen.
- Je toon: spreek je klanten aan met je of u, en schrijf je zakelijk of informeel?
Welke bestanden lever je aan?
| Onderdeel | Bestandsformaat |
|---|---|
| Logo | SVG (scherp op elk scherm), daarnaast een PNG met transparante achtergrond |
| Kleuren | HEX-codes, bijvoorbeeld #083578 |
| Lettertypes | De naam, plus een weblicentie of een Google Font |
| Foto’s | De grootste versie die je hebt; ik maak ze zelf webklaar |
Stap 2: vertaal je huisstijl van papier naar scherm
Hier gaat het het vaakst mis. Drie aandachtspunten:
Kleuren: drukwerk is niet hetzelfde als een scherm
Voor drukwerk worden kleuren vaak vastgelegd in CMYK of als Pantone-kleur. Een scherm werkt met licht, in RGB, en op websites gebruiken we HEX-codes. Wie een drukkleur “zomaar” omzet, krijgt soms een fletse of juist schreeuwerige kleur. Laat de webkleuren daarom bewust kiezen en vergelijk ze op een paar verschillende schermen.
Contrast: niet elke huisstijlkleur werkt voor tekst
Een lichtgroene of gele huisstijlkleur is prachtig als vlak of accent, maar als tekstkleur op wit vaak slecht leesbaar. Voor gewone tekst is een contrast van minimaal 4,5:1 nodig. Gebruik lichte huisstijlkleuren daarom voor achtergronden, lijnen en accenten, en kies voor tekst een donkere variant. Lees meer over een toegankelijke website en over kleurenpsychologie in webdesign.
Lettertypes: let op de licentie
Veel lettertypes mag je wel voor drukwerk gebruiken, maar niet zomaar op een website. Daarvoor is een aparte weblicentie nodig. Check dat voordat de bouw begint. Is het lettertype online niet te gebruiken, dan zoeken we een webvriendelijk alternatief dat er dicht bij in de buurt komt, bijvoorbeeld uit Google Fonts. Ik zet lettertypes altijd op je eigen server in plaats van ze bij Google op te halen: dat is sneller en beter voor de privacy van je bezoekers.
Let ook op de grootte. Wat op papier een prettige letter is, is op een telefoon vaak te klein. Voor lopende tekst is 16 pixels een goed minimum.
Stap 3: plaats je logo slim
- In de header, meestal linksboven. Bezoekers verwachten het daar, en het brengt je met één klik terug naar de homepage.
- Compact op mobiel: is je logo breed of heeft het een slogan, gebruik dan op de telefoon een kleinere versie of alleen het beeldmerk.
- In de footer, eventueel in de witte variant op een donkere achtergrond.
- Als favicon: het kleine icoontje in het browsertabblad. Daarvoor is je beeldmerk vaak geschikter dan je hele logo.
Gebruik voor je logo een SVG-bestand. Dat blijft scherp op elk scherm, ook op een telefoon met een scherm met hoge resolutie.
Stap 4: maak het consistent, ook in de details
Een huisstijl zit niet alleen in de grote dingen. Juist de details maken een website herkenbaar:
- Knoppen: één vaste stijl voor je belangrijkste knop, in een kleur die opvalt. Lees meer over een call-to-action die werkt.
- Wat er gebeurt als je erover beweegt of erop tikt: de hover- en focusstijl van knoppen en links.
- Iconen in dezelfde stijl: allemaal lijn of allemaal gevuld, niet door elkaar.
- Foto’s met een herkenbare sfeer. Lees meer over de rol van fotografie op je website.
- Je toon: dezelfde schrijfstijl als in je e-mails, offertes en op social media.
- De deelafbeelding: het plaatje dat verschijnt als iemand je website deelt via WhatsApp of LinkedIn.
Stap 5: controleer het resultaat
Loop je website na voordat hij live gaat:
- Zien je kleuren er op je laptop én op je telefoon goed uit?
- Is alle tekst goed leesbaar, ook de tekst op gekleurde vlakken?
- Is je logo scherp en leesbaar op een klein scherm?
- Zien alle knoppen er hetzelfde uit?
- Klinkt de tekst zoals jij praat?
Nog geen huisstijl?
Dan hoef je niet eerst een compleet handboek te laten maken. Met een logo, twee of drie kleuren en één of twee lettertypes heb je een prima basis voor je website. Die kan later uitgroeien tot een volledige huisstijl. Ik werk samen met een aantal vaste ontwerpers, zodat de basis voor je huisstijl en je website in één traject kan ontstaan.
Vraag ook iemand die je bedrijf goed kent om mee te kijken: herkent hij je merk direct?
Checklist: je huisstijl op je website
- Logo als SVG, in liggende, staande, witte en compacte versie
- Beeldmerk als favicon
- Webkleuren als HEX-codes, getest op verschillende schermen
- Tekstkleuren met voldoende contrast (minimaal 4,5:1)
- Lettertypes met weblicentie, op je eigen server
- Lopende tekst minimaal 16 pixels
- Eén vaste stijl voor knoppen, met hover en focus
- Iconen en foto’s in dezelfde stijl
- Een deelafbeelding voor social media
- Dezelfde toon als in je andere communicatie
Veelgestelde vragen
Welk bestandsformaat is het beste voor een logo op een website?
SVG. Dat is een vectorbestand dat op elk scherm scherp blijft en weinig ruimte inneemt. Lever daarnaast een PNG met transparante achtergrond aan als reserve.
Waarom zien mijn huisstijlkleuren er op de website anders uit dan op papier?
Drukwerk gebruikt CMYK- of Pantone-kleuren, een scherm werkt met licht (RGB). Een directe omzetting valt niet altijd goed uit. Kies daarom bewust webkleuren en test ze op meerdere schermen.
Mag ik elk lettertype op mijn website gebruiken?
Nee. Voor veel lettertypes heb je een aparte weblicentie nodig. Lettertypes van Google Fonts zijn gratis te gebruiken.
Ik heb nog geen huisstijl. Kan ik toch een website laten maken?
Ja. Een logo, een paar kleuren en een of twee lettertypes zijn genoeg om mee te beginnen. Die kunnen later uitgroeien tot een volledige huisstijl.
Wat is een favicon?
Het kleine icoontje in het tabblad van je browser en in je bladwijzers. Meestal gebruik je daarvoor het beeldmerk uit je logo.
Conclusie
Je huisstijl verwerken in je website is meer dan je logo linksboven zetten. Lever de juiste bestanden aan, vertaal kleuren en lettertypes bewust van papier naar scherm, let op contrast en leesbaarheid en wees consistent tot in de details. Dan herkennen bezoekers je merk direct, op elk scherm. Wil je een website die helemaal past bij je huisstijl? Lees meer over een website laten maken.
