Wat is het Logo-bouwblok?

Het Logo-bouwblok is je merkidentiteit linksboven op elke pagina. Het is het kleinste, meest constant aanwezige element van je hele website — en precies daarom ook een van de belangrijkste. Het logo is het anker waar de bezoeker naartoe keert als hij zich verliest, en de plek die bij elke paginalading zijn herkenning bevestigt.

Let op de afbakening: dit bouwblok gaat over jouw eigen logo, niet over de logo-balk van klanten of media die onder je hero staat. Die laatste valt onder het Bewijs-bouwblok.

Wat je leert in deze les

Je leert hoe je je logo plaatst, formaateert en gedraagt over pagina's heen. Je leert wat een logo technisch moet kunnen (verschillende formaten, dark/light variant, SVG versus PNG), en hoe je de navigatie en logo samen één samenhangend top-element vormen. Je krijgt voorbeelden, veelgemaakte fouten en een checklist.

De opbouw van een Logo-sectie

• Positie. Linksboven. Westerse lees-richting begint daar; bezoekers verwachten het daar. Rechtsboven werkt alleen in zeer specifieke design-keuzes en verhoogt cognitieve belasting.
• Formaat. Hoog genoeg om leesbaar te zijn, laag genoeg om niet te domineren. Standaard tussen 32 en 56 pixels hoog voor de header. Groter mag, maar alleen op homepagina's met unieke heldere compositie.
• Klikbaarheid. Altijd een link naar de homepagina. Dit is een onbewuste verwachting — wie hem breekt, verwart zijn bezoeker.
• Variaties. Lichte variant voor donkere achtergronden, donkere voor lichte. Vereenvoudigde "icon only"-variant voor mobiel en favicons.
• Technisch formaat. SVG voor scherp op alle schermen. PNG als fallback. Nooit JPG (geeft korrelige randen op niet-witte achtergronden).

10 voorbeelden uit echte sites

• mollie.com — professioneel, sales, Framer (S9/C8/D8/Dev9/Con9). Logo subtiel in de header, vaste positie, klikbaar naar home. De rust van het logo draagt bij aan de rust van de hele site.
• dopper.com — eigenzinnig, sales, custom (S9/C8/D8/Dev8/Con7). Het logo groeit mee met het merk: warme aardetinten, serieus lettertype, consequent doorgevoerd. Identiteit zichtbaar vanaf de eerste seconde.
• dapper.agency — eigenzinnig, branding, Webflow (S9/C8/D9/Dev9/Con8). Wordmark-only, consequent kleur-consistent, klein en zelfverzekerd. Laat zien dat een goed doordacht logo geen pictogram nodig heeft.
• swapfiets.nl — jong, sales, Framer (S9/C9/D8/Dev8/Con8). Blauwe band als herkenningsteken van elk product en elke pagina. Logo en merk zijn zo nauw verweven dat de blauwe band alleen al volstaat.
• tonyschocolonely.com — eigenzinnig, branding, Shopify (S8/C8/D9/Dev7/Con8). Logo onderdeel van een luide, consistente merkbeleving. Elk detail van het logo resoneert met de rest van de site.
• aanstekelijk.nl — eigenzinnig, branding, custom (S8/C8/D9/Dev9/Con7). Logo als onderdeel van een uitgesproken karakter. Laat zien hoe persoonlijkheid ook in de typografische opzet van een logo kan zitten.
• welvaere.com — minimalistisch, sales, Webflow (S8/C8/D8/Dev7/Con7). Ingetogen logo dat de premium-positionering versterkt. Niets schreeuwerigs, niets bijzonders — en precies daarom passend.
• graphic-hunters.com — eigenzinnig, branding, Webflow (S8/C8/D9/Dev9/Con7). Sport-geïnspireerd logo dat in één oogopslag zegt wat het bureau doet. Niche-positionering zichtbaar in het merklogo zelf.
• truus.agency — speels, sales, Webflow (S9/C8/D9/Dev9/Con8). Eenvoudig, herkenbaar, met ruimte om te spelen op social-kanalen. Laat zien hoe een logo systematisch flexibel kan zijn zonder herkenbaarheid te verliezen.
• sambrosa.nl — minimalistisch, sales, Shopify (S8/C9/D8/Dev8/Con7). Logo dat dertig jaar merkgeschiedenis draagt zonder modern te struikelen. Een teken van de stabiliteit die het merk zelf claimt.

De rol binnen de 5 emoties: Vertrouwen

Het Logo-bouwblok valt onder de bouwsteen Vertrouwen. Een herkenbaar, consistent logo op elke pagina zegt "dit is een serieuze partij die op detail let". Een ontbrekend of inconsistent logo doet het omgekeerde.

Veelgemaakte fouten

• Logo niet klikbaar naar home. Bezoekers verwachten dit; breken van die verwachting kost je navigatie-soepelheid.
• Rechtsboven plaatsen. Afwijken van de conventie kost elke bezoeker een halve seconde oriëntatie — duurt een kwart seconde te lang.
• Verschillende logo-versies op verschillende pagina's. Inconsistentie voelt amateuristisch.
• Geen dark/light variant. Resultaat: wit logo op wit vlak, of zwart logo op donkere hero. Onleesbaar en zichtbaar fout.
• Logo als JPG. Zichtbare korrel rondom de randen. Technisch detail, maar meteen herkenbaar voor wie op design let.
• Een mega-logo dat de header domineert. Het logo staat boven de content; het is niet de content.

Checklist

• Logo staat linksboven op elke pagina.
• Logo is klikbaar en leidt altijd naar de homepagina.
• Er is een dark variant, light variant en mobiele (icon-only) variant.
• Logo is technisch SVG met PNG-fallback, nooit JPG.
• Formaat is tussen 32 en 56 pixels hoog in de standaard-header.
• Logo gedraagt zich identiek op elke pagina: dezelfde plek, hetzelfde formaat, dezelfde kleur-variant per context.

Waar dit bouwblok hoort op je pagina

Op elke pagina, in de header, linksboven. Ook op bedankpagina's, contactpagina's en hele eenvoudige landingspagina's. De enige uitzondering is een campagne-landingspagina waar je alle afleiding wilt weghalen, inclusief de navigatie — maar dat is een bewuste uitzondering, geen regel.

Verder lezen

• Navigatie-bouwblok. De buur-sectie waarmee je logo samen de header vormt.
• Strategie 7 — Je merkidentiteit. De strategische onderbouwing van je logo-keuzes.
• Bewijs (Social Proof) bouwblok. Voor de logo-balk met klantlogo's (aparte sectie, niet te verwarren met dit bouwblok).