4.3 Visuele identiteit

Een bezoeker beslist in een fractie van een seconde of jouw shop er betrouwbaar en premium uitziet, of goedkoop en wegklik-waardig. Die eerste indruk is bijna volledig visueel: logo, kleur, lettertype, foto’s. Visuele identiteit is geen kunst — het is een systeem dat je merkidentiteit (4.1) zichtbaar maakt en consistentie afdwingt. Dit hoofdstuk geeft je dat systeem, met concrete regels en een mini-styleguide die je vandaag kunt vullen.

Kernconcepten

Visuele identiteit is het samenhangende geheel van logo, kleurenpalet, typografie en beeldstijl. Het doel is herkenbaarheid (mensen herkennen jou over alle kanalen) en consistentie (alles voelt als één merk).

De vier pijlers:

• Logo — het herkenningsteken van je merk. Moet werken op groot én klein, op licht én donker, en in zwart-wit.
• Kleurenpalet — een vaste set kleuren met afgesproken verhoudingen. Kleur draagt emotie en herkenbaarheid (denk Coolblue-blauw, Bol-blauw).
• Typografie — de lettertypen voor koppen en lopende tekst. Bepaalt sfeer én leesbaarheid.
• Beeldstijl — de consistente look van je product- en lifestylefoto’s: belichting, achtergrond, kleurtoon, compositie.

60-30-10-regel — een klassieke verhouding voor kleurgebruik: 60% dominante (vaak neutrale) kleur, 30% secundaire kleur, 10% accentkleur (voor knoppen en call-to-actions).

Contrastratio (WCAG) — een maatstaf voor leesbaarheid van tekst op een achtergrond, belangrijk voor toegankelijkheid én conversie.

Visuele identiteit volgt op strategie

Begin nooit met kleuren kiezen “omdat ze mooi zijn”. Je palet, fonts en beeldstijl volgen uit je positionering en archetype uit 4.1. Een premium archetype vraagt om rust, ruimte en weinig kleuren; een speels archetype mag voller en feller.

Stap-voor-stap workflow

1. Vertaal je archetype naar visuele richting. Schrijf drie woorden op (bijv. “rustig, puur, premium”) en verzamel 10 tot 15 referentiebeelden (moodboard) die dat gevoel raken.

2. Kies je kleurenpalet. Eén dominante neutrale, één merk-/secundaire kleur, één accentkleur voor knoppen. Leg de hex-codes vast. Controleer contrast.

3. Kies maximaal twee lettertypen: één voor koppen, één voor lopende tekst. Of gebruik één goed font in meerdere gewichten.

4. Maak of laat een logo maken dat simpel is en op klein formaat leesbaar blijft. Lever het aan in meerdere varianten (kleur, zwart, wit, icoon-only).

5. Definieer je beeldstijl. Beslis: witte achtergrond, lifestyle, of een mix? Leg belichting, kleurtoon en compositie vast met voorbeeldfoto’s.

6. Maak een fotografie-spec zodat elke nieuwe foto (door jou of een fotograaf) in dezelfde stijl past.

7. Leg alles vast in een mini brand-styleguide (sjabloon onderaan). Dit is het document dat consistentie afdwingt.

8. Pas het toe op je shop — homepage, productpagina’s, e-mails, social — en controleer of alles als één merk voelt.

Logo

Het logo is het herkenningsteken, niet het hele merk. Belangrijkste regel: houd het simpel. Logo-typen:

Type	Wat het is	Wanneer kiezen
Woordmerk (logotype)	Alleen de merknaam in een vast lettertype	Korte, onderscheidende naam; meest geschikt voor startende webshops
Beeldmerk (icoon)	Een symbool zonder naam	Alleen als je al bekend bent (Nike-swoosh werkt pas na jaren)
Combinatie	Icoon plus naam	Veelzijdig; icoon werkt als app/favicon, naam voor herkenning
Letterwoordmerk	Initialen/monogram	Lange namen; bijv. “TT” voor een lange merknaam

Praktische eisen voor een webshop-logo:

• Werkt op klein formaat: als favicon (16 bij 16 pixels) en in de header op mobiel. Te veel detail valt dan weg.
• Leesbaar in zwart-wit: test of het herkenbaar blijft zonder kleur.
• Levert in varianten: kleur, volledig zwart, volledig wit (voor donkere achtergronden) en icoon-only.
• Voldoende vrije ruimte: houd witruimte rondom het logo zodat het ademt.

Geen trend-logo’s

Logo’s die een hype volgen (een gradient die “dit jaar in” is, een trendy script-font) verouderen binnen twee jaar en dwingen tot een dure rebrand. Kies tijdloos boven trendy. Een eenvoudig woordmerk in een goed font veroudert nauwelijks.

Kleurenpalet

Een goed palet heeft weinig kleuren met duidelijke rollen. Structuur:

• Dominant (60%) — meestal een neutrale (wit, gebroken wit, donkergrijs). Dit is je “papier”.
• Secundair (30%) — je merkkleur; gebruikt in koppen, vlakken, secties.
• Accent (10%) — één opvallende kleur, gereserveerd voor knoppen en call-to-actions. Schaarste maakt de knop opvallend.

Voorbeeldpalet voor Tij (premium, puur):

Rol	Kleur	Hex	Gebruik
Dominant	Gebroken wit	#F7F5F0	Achtergronden, ruimte
Tekst-neutraal	Diep antraciet	#1C1C1C	Lopende tekst, koppen
Secundair	Zee-groen	#2E5A50	Vlakken, koppen, merkkleur
Accent	Warm koraal	#E8674C	Alleen knoppen en CTA’s

Contrast/toegankelijkheid. Tekst moet leesbaar zijn voor iedereen, ook slechtziende bezoekers — en goede contrast verhoogt conversie. WCAG-richtlijnen:

Tekstsoort	Minimaal contrast (AA)	Comfortabel (AAA)
Normale tekst	4,5 op 1	7 op 1
Grote tekst (vanaf 18pt of 14pt bold)	3 op 1	4,5 op 1

Antraciet (#1C1C1C) op gebroken wit (#F7F5F0) haalt ruim de AAA-norm. Lichtgrijze tekst op wit (een veelgemaakte “designkeuze”) zakt vaak onder 4,5 op 1 en is een leesbaarheids- én conversieprobleem. Controleer elke combinatie met een contrast-checker.

Reserveer je accentkleur voor de knop

Als je accentkleur overal terugkomt, valt de knop niet meer op. Gebruik koraal/oranje/groen-accent uitsluitend voor de belangrijkste actie op de pagina. Eén CTA-kleur, consequent.

Typografie

Regel één: maximaal twee lettertypen. Meer wordt rommelig en traag (elke webfont kost laadtijd — zie 3.7 Snelheid & CWV).

Werkende combinaties:

• Eén font in meerdere gewichten (bijv. Inter Regular voor tekst, Inter Bold voor koppen). Veiligst en snelst.
• Twee fonts met contrast: een karaktervol kop-font plus een neutraal, zeer leesbaar tekst-font (bijv. een serif-kop met een sans-serif-tekst).

Leesbaarheidsregels:

Element	Richtwaarde
Lopende tekst, mobiel	minimaal 16 pixels
Lopende tekst, desktop	16 tot 18 pixels
Regelhoogte (line-height)	1,5 tot 1,7 voor lopende tekst
Regellengte	50 tot 75 tekens per regel
Aantal fonts	maximaal 2

Kies leesbaarheid boven karakter voor lopende tekst: een mooi maar druk font dat moeilijk leest, kost je lezers. Bewaar het karakter voor de koppen.

Beeldstijl en productfotografie

Foto’s zijn op een webshop vaak het grootste vlak op het scherm — en daarmee de sterkste merkdrager. Twee hoofdstijlen, meestal in combinatie:

• Witte/neutrale achtergrond — het product strak en helder, geïsoleerd. Onmisbaar voor de eerste productfoto en voor marktplaatsen (bol.com en Amazon eisen vaak een witte hoofdfoto — zie module 13). Toont detail, wekt vertrouwen.
• Lifestyle — het product in gebruik, in een echte context (Tij op een bureau, in een tas, in de trein). Toont de benefit en het gevoel, laat de klant zich identificeren.

De ideale productpagina combineert: foto 1 wit (helder), foto 2 tot 4 lifestyle (context en gebruik), plus detail- en schaalfoto’s. Zie 3.4 Productpagina’s voor de volgorde.

UGC-stijl (user-generated content) — bewust “echte”, iets minder gepolijste foto’s en video’s, alsof een klant ze maakte. Werkt sterk in advertenties (module 7) en op social omdat het authentiek voelt en de advertentieblindheid omzeilt. UGC en gepolijste merkfotografie sluiten elkaar niet uit: gebruik gepolijst op de productpagina, UGC in ads en social proof.

Consistentie is alles. Wat een verzameling losse foto’s tot een merk maakt, is dat ze dezelfde belichting, kleurtoon en sfeer delen. Leg dit vast in een fotografie-spec:

Aspect	Vastleggen
Achtergrond	Welke kleur/setting per fototype
Belichting	Zacht/hard, richting, schaduwen
Kleurtoon	Warm of koel; vaste nabewerking/preset
Compositie	Product centraal, vaste marges, vaste hoek
Props	Welke wel/niet (passend bij merk)

Voorbeeld: mini-styleguide voor Tij

Hoe het samenkomt:

• Archetype/richting: rustig, puur, premium.
• Logo: woordmerk “Tij” in een rustige sans-serif, plus een minimalistisch golf-icoontje als favicon. Levering in groen, zwart, wit en icoon-only.
• Kleuren: gebroken wit (#F7F5F0) dominant, zee-groen (#2E5A50) secundair, koraal (#E8674C) alleen voor knoppen, antraciet (#1C1C1C) tekst.
• Typografie: Inter — Bold voor koppen, Regular voor tekst, 16px mobiel, regelhoogte 1,6.
• Beeldstijl: witte hoofdfoto plus warme lifestylefoto’s (bureau, trein), zachte daglicht-belichting, lichte warme preset; UGC-clips voor ads.

Het resultaat: of iemand een advertentie, de productpagina of een e-mail ziet, het voelt onmiskenbaar als Tij.

Formules & benchmarks

Visuele identiteit is deels meetbaar via toegankelijkheid en performance.

Contrastratio controleer je per kleurcombinatie (formule is complex; gebruik een checker). Norm: tekst minimaal 4,5 op 1.

Webfont-budget beïnvloedt laadtijd:

Aantal webfont-bestanden = aantal fonts × aantal gebruikte gewichten

Houd dit klein: 2 fonts × 2 gewichten = 4 bestanden is prima; 5 fonts × 4 gewichten = 20 bestanden vertraagt je shop merkbaar.

Maatstaf	Zwak	Goed	Sterk
Aantal lettertypen	meer dan 3	2	1 (in meerdere gewichten)
Tekstcontrast (normale tekst)	minder dan 4,5 op 1	4,5 tot 7 op 1	meer dan 7 op 1
Aantal accentkleuren voor CTA	meer dan 2	1	1 (overal hetzelfde)
Webfont-bestanden	meer dan 8	3 tot 5	minder dan 4
Lettergrootte body mobiel	minder dan 14px	16px	16 tot 18px

Tools

Tool	Functie	Wanneer kiezen
Canva	Snel logo’s, social posts, e-mailbanners maken met templates	Solo-ondernemer zonder designervaring; snelheid boven maatwerk
Figma	Professioneel ontwerpen, styleguide en componenten beheren	Als je serieus en schaalbaar wil werken of met een designer samenwerkt
Coolors.co	Kleurenpaletten genereren en hex-codes vastleggen	Bij het opzetten van je palet
WebAIM Contrast Checker	Contrastratio van kleurcombinaties controleren	Voor elke tekst-op-achtergrond-combinatie
Google Fonts	Gratis, snel ladende webfonts	Vrijwel altijd; ruime keuze, goede performance
Remove.bg / fotograaf	Productfoto’s vrijstaand maken / professioneel schieten	Witte-achtergrondfoto’s voor productpagina en marktplaatsen

Geen blinde aanraders: Canva is ideaal om snel te starten, maar als je groeit en consistentie over veel assets nodig hebt, levert Figma op termijn meer controle. Kies op basis van je fase, niet op hype.

Veelgemaakte fouten

• Inconsistentie. Verschillende fonts, kleuren en fotostijlen per pagina. De grootste merkkiller — het signaleert amateurisme.
• Te veel kleuren en fonts. Vijf kleuren en drie fonts maken een shop rommelig en traag. Beperk je.
• Trend-logo. Een hippe gradient of script die over twee jaar gedateerd is en een rebrand afdwingt.
• Slecht contrast. Lichtgrijze tekst op wit “omdat het clean oogt” — onleesbaar en slecht voor conversie en toegankelijkheid.
• Accentkleur overal. Als alles opvalt, valt niets op. Reserveer de accentkleur voor de knop.
• Inconsistente foto’s. Eén foto warm, de volgende koel, weer een andere met een drukke achtergrond. Leg een fotospec vast.
• Niets vastleggen. Zonder styleguide drijft je look weg zodra je groeit of werk uitbesteedt.

Checklist

✅Voordat je verder gaat

• Visuele richting in drie woorden plus een moodboard
• Kleurenpalet met hex-codes en duidelijke rollen (dominant/secundair/accent)
• Elke tekst-op-achtergrond-combinatie haalt minimaal 4,5 op 1 contrast
• Maximaal twee lettertypen, body minimaal 16px op mobiel
• Logo simpel, leesbaar op klein formaat, in alle varianten geleverd
• Beeldstijl gekozen (wit/lifestyle/mix) en in een fotospec vastgelegd
• Accentkleur uitsluitend voor de belangrijkste call-to-action gebruikt
• Alles vastgelegd in een mini brand-styleguide
• Shop gecontroleerd: voelt elke pagina als één merk?

Sjablonen

📋Mini brand-styleguide Kopieer

VISUELE IDENTITEIT — [merknaam]

Richting (3 woorden): [woord], [woord], [woord]

KLEUREN

• Dominant (60%): [naam] [hex] — gebruik: […]
• Secundair (30%): [naam] [hex] — gebruik: […]
• Accent (10%): [naam] [hex] — gebruik: alleen knoppen/CTA
• Tekst: [naam] [hex] Contrast gecontroleerd: ja/nee

TYPOGRAFIE

• Koppen: [font] [gewicht]
• Tekst: [font] [gewicht], [grootte]px, regelhoogte [1,5-1,7]

LOGO

• Varianten geleverd: kleur / zwart / wit / icoon-only
• Favicon-test (16px) geslaagd: ja/nee
• Minimale vrije ruimte rondom: [maat]

BEELDSTIJL

• Achtergrond: [wit / lifestyle / mix]
• Belichting: […]
• Kleurtoon/preset: […]
• Compositie: […]
• Wel/niet-props: […]

📋Fotografie-spec (voor jezelf of een fotograaf) Kopieer

FOTO-SPEC — [merknaam]

Per product leveren:

1. Hoofdfoto: witte/neutrale achtergrond, product centraal, recht van voren 2-4. Lifestyle: product in gebruik in [context], daglicht, [kleurtoon]
2. Detailfoto: [welk detail/feature]
3. Schaalfoto: product naast [referentie voor formaat]

Vaste instellingen:

• Belichting: [zacht daglicht / studioflits], richting […]
• Achtergrond lifestyle: [omschrijving]
• Nabewerking: [preset/kleurtoon], geen zware filters
• Beeldverhouding: [bijv. 1:1 voor shop, 4:5 voor social]
• Bestand: [formaat], geoptimaliseerd voor web (zie 3.7)

⚡Doe dit nu

1. Verzamel een moodboard van 10 tot 15 beelden die jouw drie richtingswoorden raken.
2. Stel je palet samen in Coolors en controleer elke tekstcombinatie in de WebAIM Contrast Checker.
3. Kies maximaal twee Google Fonts en stel body op 16px met regelhoogte 1,6.
4. Vul de mini brand-styleguide en de fotospec in, en loop je shop na op consistentie.

Lees verder

• 4.1 Merkidentiteit — de strategie waaruit je visuele keuzes voortkomen.
• 4.2 Merkstem & copywriting — de verbale tegenhanger van je visuele identiteit.
• 3.4 Productpagina’s — waar je beeld en media concreet landen.
• 3.7 Snelheid & Core Web Vitals — fonts en foto’s zonder je shop te vertragen.
• 4.4 Trust & social proof — vertrouwen visueel ondersteunen met badges en UGC.