Je huisstijl consequent doorvoeren op je website

Een huisstijl op papier is iets anders dan een huisstijl op een website. In een brochure kies je per pagina; op een website met tientallen pagina's en meerdere beheerders sluipt er snel variatie in: net een andere blauwe tint, drie soorten knoppen, koppen in wisselende groottes. Consequentie vraagt om vaste afspraken in het systeem zelf.

Stap 1: vertaal je huisstijl naar websiteregels

KleurenBepaal een beperkt palet en de toepassing:

• Primair (knoppen, accenten) — Voorbeeld: merkkleur
• Tekst — Voorbeeld: donkergrijs of zwart
• Achtergrond — Voorbeeld: wit en één lichte vlakkleur
• Links — Voorbeeld: merkkleur of donkere variant
• Signaal — Voorbeeld: rood voor fouten, groen voor bevestiging

Controleer elke combinatie van tekst en achtergrond op contrast. Zie Kleurcontrast controleren.

TypografieHooguit twee lettertypes, met vaste groottes voor H1 tot en met H4, broodtekst en kleine tekst. Zie Leesbaarheid.

Ruimte en vormenVaste afstanden (bijvoorbeeld een reeks van 8, 16, 24, 32, 48 pixels), een vaste afronding van hoeken en een vaste stijl voor schaduwen.

BeeldFotostijl (licht, kleur, onderwerp), iconenset en de manier waarop het logo mag worden gebruikt.

Stap 2: leg het vast in het systeem

• Webflow: gebruik Variables voor kleuren, lettertypes en afstanden, globale classes voor terugkerende elementen en Components voor herbruikbare blokken.
• WordPress (blokthema): leg kleuren, lettertypes en afstanden vast in theme.json of via Stijlen in de site-editor. Gebruik patronen voor terugkerende blokken.
• Shopify: gebruik de thema-instellingen voor kleuren en typografie; vermijd losse opmaak per sectie.

Het voordeel: een wijziging in de huisstijl pas je op één plek aan en is overal doorgevoerd.

Stap 3: maak componenten

Knoppen (primair, secundair), kaarten, citaten, formulieren, tabellen, meldingen. Elk component heeft één vaste vorm. Beheerders kiezen een component in plaats van zelf iets op te maken.

Stap 4: schrijf een korte stijlgids

Eén pagina of document met de kleuren en hun rol, lettertypes, de componenten met voorbeelden en een paar regels voor tekst en beeld (aanspreekvorm, tone of voice, fotostijl). Houd het kort; een stijlgids van vijftig pagina's leest niemand.

Stap 5: controleer periodiek

Loop een paar keer per jaar de belangrijkste pagina's na op afwijkingen: losse kleuren, verkeerde koppen, afwijkende knoppen. Ruim die op door ze terug te zetten naar de vaste stijlen.

Voorbeeld

Stel: een stichting heeft een website waarop in de loop der jaren vijf verschillende knopstijlen zijn ontstaan. Door de knoppen terug te brengen tot twee varianten, gedefinieerd als globale stijl met variabelen, ziet de site er rustiger uit en hoeven nieuwe pagina's niet meer opnieuw te worden opgemaakt.

Veelgestelde vragen

Moet mijn website precies dezelfde kleuren hebben als mijn drukwerk?

Ongeveer. Kleuren op scherm (RGB/hex) en in druk (CMYK/Pantone) verschillen; laat een webversie van je kleuren vastleggen.

Wat als mijn huisstijlkleur slecht leesbaar is als tekstkleur?

Gebruik hem dan voor vlakken en accenten, en kies voor tekst een donkerdere variant.

Mag ik andere lettertypes gebruiken dan in mijn huisstijl?

Liever niet, maar als het huisstijllettertype niet als webfont beschikbaar of te zwaar is, is een vergelijkbaar alternatief een goede oplossing.

Hoe voorkom ik dat collega's eigen opmaak toevoegen?

Beperk de opmaakmogelijkheden in de editor waar dat kan, en geef componenten die het werk makkelijker maken.

Is een merkboek nodig?

Voor kleine organisaties volstaat een korte stijlgids. Een uitgebreid merkboek is nuttig als veel partijen met je merk werken.

Hulp nodig?

Wil je je huisstijl goed laten vertalen naar je website? Bekijk onze dienst branding en huisstijl.

Leg niet alleen vast welke kleuren je hebt, maar ook waarvoor je ze gebruikt: welke kleur is voor knoppen, welke voor links, welke nooit voor tekst.