Maak je site consistent door bewuste herhaling van patronen

In deze stap leg je vast hoe kleuren, typografie, knoppen en spacing op elke pagina identiek terugkeren, zodat de site herkenbaar is tot en met de 404-pagina.

Consistentie op een website is niet hetzelfde als saai zijn. Het is herhaling van bewust gekozen patronen zodat bezoekers altijd weten waar ze aan toe zijn. Inconsistente sites voelen onbetrouwbaar, ook als elk afzonderlijk element goed is. In deze les leer je welke vier basiselementen je vastlegt en welke pagina's vaak vergeten worden in de consistentie-check.

Leren: consistentie als signaal van kwaliteit

In deze video leg ik uit welke vier elementen het meest bijdragen aan een consistente indruk en welke pagina's je niet mag vergeten in je controle.

Begrijpen: hoe maak je een website consistent?

Begin met je vier basiselementen: kleuren (twee tot drie hoofdkleuren, één accent), typografie (één tot twee lettertypes, vaste schaal), knoppen (vaste hoogte, padding en kleurvarianten) en spacing (vaste afstanden tussen elementen). Pas deze regels op elke pagina identiek toe. Vergeet niet de pagina's die buiten je hoofdnavigatie vallen, zoals de 404, de bedankpagina, de privacyverklaring en de e-mail die na een aanvraag wordt verstuurd.

Sjoukje van der Velde wijst op de pagina's die het vaakst inconsistent zijn: 404, bedankpagina en juridische pagina's. Wie zijn hoofdpagina's mooi maakt en daar ophoudt, eindigt met een site die op random momenten een andere stijl krijgt. Marvia voegt daar een tweede regel aan toe: documenteer je consistentie-regels, hoe klein ook. Een document van twee pagina's dat zegt 'knoppen zijn 48 pixels hoog, hebben 16 pixels padding, gebruiken kleur X' is genoeg om jaren consistente keuzes te maken.

De zes elementen waarop je consistentie controleert:

1. Kleurgebruik. Identieke hex-codes en gebruiksregels op elke pagina.
2. Typografische schaal. H1, H2, H3 en body in dezelfde groottes overal.
3. Knoppen. Hoogte, padding, kleurvarianten en hover-state identiek.
4. Spacing. Vaste afstanden tussen secties, elementen en blokken.
5. Beeldbehandeling. Foto's en illustraties consequent bewerkt en in vaste formats.
6. Tone-of-voice. Dezelfde aanspreekvorm en woordkeuze, ook in microcopy en e-mails.

Herken je merk herinnert eraan dat consistentie ook over je e-mailtemplates en factuurontwerpen gaat. Een site die strak oogt maar wiens automatische bevestigingsmail er volledig anders uitziet, breekt het vertrouwen op het moment dat de klant net heeft gekocht. Behandel elk klantgericht document als deel van je merk.

Toepassen: de blueprint

Vul de Consistentie Blueprint in: één A4 met de zes elementen en per element de regels die overal gelden. Daaronder een lijst van vergeten pagina's (404, bedankpagina, e-mails) die je apart controleert. Eén pagina, in twintig minuten klaar.

De eerste actie kost vijf minuten: typ vandaag een willekeurige niet-bestaande URL aan je domein toe en kijk hoe je 404-pagina eruitziet. Heeft hij dezelfde stijl als de rest van je site? Zo niet, weet je dat je vandaag begint met je merkstijl ook hier toe te passen.