Een snelle reset: Waarom uw header meer gewicht in de schaal legt dan bijna elk ander element
Drie duidelijke feiten voordat we naar de voorbeelden gaan:
- Uw header is het eerste wat bijna elke bezoeker ziet. Eye-tracking studies tonen consequent aan dat mensen de bovenste strook van een pagina scannen voordat ze iets eronder lezen. Als uw header in die eerste seconden verwarrend is, wordt de rest van uw pagina nooit gelezen.
- Het is het enige ontwerpelement dat op elke pagina verschijnt. Een hero-afbeelding staat op één pagina. Een header volgt de bezoeker overal. Dat maakt het de meest invloedrijke ontwerpbeslissing op de hele site — doe het één keer goed en het betaalt zich uit op elk scherm.
- Mensen beslissen binnen enkele seconden of ze blijven, en uw header doet het meeste van dat werk. Een duidelijke, zelfverzekerde header signaleert een duidelijk, zelfverzekerd bedrijf. Een rommelige of kapotte header doet bezoekers stilletjes aannemen dat het product erachter ook rommelig en kapot is — terecht of onterecht.
Elk voorbeeld hieronder is geselecteerd omdat het ten minste één van die drie taken op een studiewaardige manier oplost — en omdat u het vrijwel zeker niet in de andere tien lijsten hebt gezien.
4 patrooncategorieën — Kies degene die bij uw site past
Patroon | Het beste voor | Voorbeeldwebsites | |
1 | Minimaal / verdwijnend | Publicaties, lees-apps, focus-first producten | Medium, Substack, Ghost |
2 | Opdrachtbalk / toetsenbord-eerst | Dev tools, power-user SaaS, productiviteitsapps | Raycast, Vercel, Superhuman |
3 | Meerlaags / utility (twee doelgroepen) | Fintech, marktplaatsen, B2B met complexe aanbiedingen | Wise, Booking.com, Figma |
4 | Redactioneel / transparant merk | Retailmerken, musea, studio's, longform | Aesop, Tate, A24 |
De 12 onderstaande voorbeelden van websiteheaders zijn onderverdeeld in deze vier groepen. Zoek de rij die het dichtst bij uw site ligt en neem vervolgens de passende elementen over.
Patroon 1: Minimale / verdwijnende headers — Wanneer de inhoud het hele scherm nodig heeft
De eerste groep voorbeelden van websiteheaders komt van producten die gericht zijn op lezen, en die stilletjes zijn samengekomen op een header die grotendeels uit de weg gaat. De logica is eenvoudig: wanneer uw product de woorden op de pagina is, is een dikke, persistente header slechts een afleiding die concurreert met waar mensen voor kwamen. Deze drie sites tonen verschillende smaken van dezelfde terughoudendheid — en bewijzen dat een minimalistische header geen gebrek aan ontwerp is, maar een weloverwogen ontwerp. Als u ideeën voor websiteheaders zoekt voor een site met veel inhoud, begin dan hier.
1. Medium — De header die verdwijnt tijdens het lezen
Patroon: Automatisch verbergende header die verdwijnt bij scrollen naar beneden en weer verschijnt bij scrollen naar boven
De leeservaring van Medium maakt gebruik van een van de schoonste headergedragingen op het web. Terwijl u naar beneden scrollt in een artikel, schuift de bovenbalk weg, waardoor de tekst het volledige scherm krijgt.
Drie dingen om over te nemen:
- Verberg de header bij scrollen naar beneden, toon deze bij scrollen naar boven. Dit ene gedrag geeft inhoud het hele scherm, terwijl navigatie slechts één gebaar verwijderd blijft. Voor elke site met veel leeswerk is dit de meest impactvolle header-upgrade die u kunt implementeren.
- Beperk de leesheader tot drie dingen. De in-artikel header van Medium bestaat in essentie uit een logo, zoekfunctie en account. Al het andere (applaus, delen, opslaan) bevindt zich dicht bij de inhoud waar het contextueel relevant is — niet gepropt in de bovenbalk.
- Laat
Van de sticky header voorbeelden is die van Medium het meest de moeite waard om te bestuderen, juist omdat het weet wanneer niet te blijven plakken.
2. Substack — De schrijver is het merk, niet het platform
Patroon: Minimale header die de identiteit van de individuele publicatie boven die van het platform stelt
Op een individuele Substack plaatst de header de naam en het logo van de schrijver op de voorgrond, niet die van Substack. Het is een van de meest leerzame website header voorbeelden voor iedereen die een multi-tenant product bouwt, omdat de platform-chrome opzettelijk rustig is — een slanke balk met abonneren, inloggen en zoeken — zodat elke nieuwsbrief aanvoelt als een eigen publicatie in plaats van een huurder in het gebouw van iemand anders. Dit is een weloverwogen header lay-out keuze: het platform treedt terug zodat de maker kan opvallen.
Drie dingen om over te nemen:
- Laat de header één identiteit dragen, niet twee. Als uw platform de merken van anderen host (een marktplaats, een creatietool, een multi-tenant SaaS), beslis dan wiens naam wint in de header. Substack kiest elke keer voor de maker — en daarom vertrouwen schrijvers erop.
- Plaats
- Een zoekveld duidt op diepgang. Zelfs een minimale header profiteert van een zoekfunctie zodra het archief groeit. Substack toont het zonder het opzichtig te maken — een pictogram dat uitklapt, geen permanente dikke zoekbalk die ruimte inneemt.
3. Ghost — Open-Source Terughoudendheid
Patroon: Ultraminimale header met veel witruimte en een enkele contrasterende CTA
Ghost, het open-source publicatieplatform, heeft een van de meest sobere website header voorbeelden die u zult vinden: woordmerk links, vier of vijf tekstlinks en één gevulde knop ("Aan de slag"). Geen megamenu, geen utility strip, geen aankondigingsbalk standaard. De terughoudendheid is de merkuiting — Ghost verkoopt "rustig publiceren", en de header bewijst het voordat u een woord leest.
Drie dingen om over te nemen:
- Witruimte is een headerfunctie, geen verspilde ruimte. De royale afstand tussen links bij Ghost zorgt ervoor dat elke link opzettelijk en gemakkelijk aan te klikken aanvoelt. Tien links in dezelfde breedte proppen zou angstig overkomen. Geef uw links de ruimte om te ademen.
- Eén gevulde knop, de rest als tekst. Een enkele contrasterende CTA tegenover gewone tekstlinks creëert een onmiskenbaar focuspunt. Zodra u een tweede gevulde knop toevoegt, verdeelt u de aandacht van de bezoeker en verzwakt u beide.
- Laat de header de productbelofte matchen. Een bedrijf met
Patroon 2: Command-Bar / Keyboard-First Headers — Wanneer Power Users op het toetsenbord leven
Een nieuwer patroon, bijna volledig afwezig in de gebruikelijke overzichten: headers gebouwd rond een commandopalet of zoek-eerst-interactie, waarbij het typen van
Cmd+K sneller is dan ergens op klikken. Ontwikkelaarstools en producten voor ervaren gebruikers lopen hierin voorop, omdat hun publiek de voorkeur geeft aan het toetsenbord. Dit zijn de meest uitgesproken website-header-voorbeelden van 2026 in deze gids.4. Raycast — Wanneer de productfilosofie de header is
Patroon: Toetsenbord-eerst marketingheader die het launcher-product zelf weerspiegelt
Raycast maakt een toetsenbord-launcher, en de header van de marketingsite weerspiegelt die visie. Het is een van de strakkere website-header-voorbeelden van een marketingsite die aanvoelt als het product dat het verkoopt: de navigatie is strak en typografisch precies, en de hele site stuurt je naar het toetsenbord — de ontwerptaal van de header echoot de spotlight-achtige commandobalk die het product is.
Drie dingen om te stelen:
- Laat je marketingheader aanvoelen als je product. Een bezoeker die van je homepage naar de app gaat, mag niet het gevoel hebben dat hij van bedrijf is veranderd. Raycast's typografie, spatiëring en interactie-aanwijzingen zijn consistent van header tot product. Deze continuïteit bouwt stilletjes vertrouwen op.
- Strakke, precieze spatiëring leest als "ontworpen". Voor technische producten duidt een header met nauwkeurige uitlijning en ingetogen lettertype op vakmanschap. Slordige spatiëring in de header doet ontwikkelaars aannemen dat er slordige code onder ligt.
- Toon de sneltoets ergens zichtbaar. Toetsenbord-eerst-producten die een
⌘Khint in of nabij de header tonen, leren de interactie aan nieuwkomers die er nooit documentatie over zouden lezen. Ontdekbaarheid via de header zelf.
5. Vercel — De commandobalk leeft in de header
Patroon: Minimale sticky header met een geïntegreerd
⌘K commando-/zoekmenuVercel's header ziet er minimaal uit — een handvol links en een aanmeldknop — maar het is een van de slimste website-header-voorbeelden voor een complex product, omdat het echte verhaal het commandomenu is dat erin is ingebouwd. Druk op
⌘K vanaf bijna elke plek en er verschijnt een zoek- en springpalet, waardoor ervaren gebruikers door documenten, dashboards en instellingen kunnen navigeren zonder het menu aan te raken. De zichtbare header blijft juist schoon omdat de commandobalk de complexiteit absorbeert.Drie dingen om te stelen:
- Een commandopalet zorgt ervoor dat je zichtbare header minimaal blijft. In plaats van 30 bestemmingen in een mega-menu-header weer te geven, duw je diepte in een
⌘Kzoekopdracht. De header ziet er rustig uit; ervaren gebruikers komen nog steeds snel overal. (Voor de browse-kant van deze afweging, zie onze website navigatie voorbeelden gids.) - Eén aanmeldknop, visueel onderscheidend. Vercel maakt de primaire CTA een gevulde knop die direct vindbaar is tussen de tekstlinks. Het oog landt erop zonder te zoeken.
- Rustig sticky gedrag verslaat theatraal. Vercel's header comprimeert subtiel bij het scrollen — hij stuitert, expandeert of animeert niet dramatisch. Een vaste header die rustig blijft zitten, leest als professioneel; een die presteert, leest als goedkoop.
6. Superhuman — Een header zo snel als het product
Patroon: Snelheid-geobsedeerde header voor een toetsenbordgestuurde e-mailclient
Superhuman bouwde zijn reputatie op pure snelheid en sneltoetsen, en de marketingheader draagt dat DNA. De balk is slank, het lettertype is zelfverzekerd, en de hele presentatie straalt uit "dit product respecteert je tijd." De header verspilt geen pixel — passend voor een product waarvan de hele boodschap is om je twee keer zo snel door e-mail te helpen.
Drie dingen om te stelen:
- Laat de header de snelheidsverwachting bepalen. Als de belofte van je product snelheid is, spreekt een zware, langzaam ladende header dat direct tegen. Superhuman's sobere header voelt snel aan voordat de pagina zelfs maar klaar is met laden.
- Zelfverzekerd lettertype draagt een premium product. Superhuman vraagt een premium prijs, en de typografie van de header weerspiegelt dat — royaal, beslissend, ongedwongen. Goedkoop uitziend lettertype in de header ondermijnt een premium prijspunt.
- Weersta de drang om alles in de header uit te leggen. Superhuman somt niet elke functie bovenaan op. Het kiest de paar dingen die ertoe doen en vertrouwt erop dat de rest van de pagina de uitleg doet. Een moderne website-header die minder zegt, converteert vaak meer.
Patroon 3: Meerlaagse / Utility Headers — Wanneer je twee doelgroepen tegelijk bedient
Dit is het tegenovergestelde van Patroon 1. Marktplaatsen, fintech en complexe B2B-producten kunnen vaak niet minimaal zijn – ze moeten een valuta-wisselaar, een taalkiezer, een accountmenu, een "voor bedrijven"-schakelaar en een primaire CTA tegelijkertijd tonen. De website-header-voorbeelden in deze groep tonen het vakmanschap om dit in twee overzichtelijke lagen te doen in plaats van één chaotische strook. Een goed gebouwde header-indeling in deze categorie gebruikt een slanke hulplijn boven een hogere primaire navigatieregel.
7. Wise — Fintech-functionaliteit zonder rommel
Patroon: Meerlaagse header met regio-/valuta-functionaliteit boven primaire navigatie en een persoonlijke/zakelijke splitsing
Wise (het internationale geldoverboekingsbedrijf) moet een moeilijk headerprobleem aanpakken, en het levert een van de meest nuttige website-header-voorbeelden op voor elk wereldwijd product: bezoekers in tientallen landen, die betalen in tientallen valuta's, verdeeld over persoonlijk en zakelijk gebruik – allemaal met de behoefte om snel prijzen te vinden en in te loggen. De header lost dit op met een gelaagde structuur: een slanke bovenste rij voor regio- en accountfunctionaliteiten, een primaire navigatieregel eronder voor producten, en één duidelijke "Registreren"-CTA. Niets strijdt om aandacht.
Drie dingen om te stelen:
- Scheid functionaliteit van navigatie met twee lagen. Regio, taal, valuta en account horen in een slanke bovenste strook. Je daadwerkelijke producten en primaire CTA horen in de hoofdrij eronder. Ze in één lijn mengen, is hoe headers in ruis veranderen.
- Een persoonlijke-vs-zakelijke schakelaar hoort in de header, niet verborgen. Als je twee verschillende klanttypen bedient, laat ze zich dan onmiddellijk identificeren. Wise toont de splitsing hoog, zodat elke bezoeker binnen de eerste seconde een relevant pad ziet.
- Eén CTA, zelfs met een drukke header. Ondanks alle functionaliteit heeft Wise nog steeds precies één primaire knop. Complexiteit in de utility bar is prima; complexiteit in de call-to-action is fataal.
8. Booking.com — Een tweezijdige marktplaats in één header
Patroon: Reis-marktplaats header die zowel reizigers als vastgoedpartners bedient
De header van Booking.com is een van de meest hardwerkende website-header-voorbeelden in de reisbranche: hij moet werken voor twee totaal verschillende mensen – een reiziger die een kamer boekt, en een eigenaar die er een aanbiedt. De oplossing is een hulplijn met valuta, taal, account en een prominente link "Plaats je accommodatie" voor de aanbodzijde, boven de op reizigers gerichte zoekfunctie en navigatie. Beide doelgroepen vinden hun weg binnen een seconde na aankomst.
Drie dingen om te stelen:
- Geef het kleinere publiek één duidelijke deur, niet een hele rij. De meeste bezoekers zijn reizigers, dus het reizigerspad domineert. Accommodatie-eigenaren krijgen één duidelijke link "Plaats je accommodatie" in de utility bar – genoeg om hun weg te vinden, niet genoeg om de hoofdervaring te verstoren.
- Valuta- en taalkiezers signaleren "wij zijn er voor jou." Voor elke site met internationale bezoekers is een zichtbare valuta-/taalcontrole in de header een teken van vertrouwen. Het vertelt een bezoeker in een ander land dat de site met hen in gedachten is gebouwd.
- Permanente zoekfunctie in de header voor sites met veel voorraad. Wanneer je product duizenden vermeldingen omvat, is zoeken geen functie – het is de navigatie. Booking.com behandelt de zoekfunctie als een permanent onderdeel van de header, niet als een weggestopt pictogram.
9. Figma — De B2B-header met discipline uitgevoerd
Patroon: Meerlaagse SaaS-header met dropdown productnavigatie, utility links en een opvallende CTA
De marketingheader van Figma beheert een uitgebreide productlijn (design, dev mode, whiteboarding, slides) zonder overweldigend aan te voelen. Productcategorieën bevinden zich in nette dropdowns, een "Contact sales" en login fungeren als discrete utility links, en een enkele opvallende "Get started"-knop verankert de rechterkant. Het is een schoolvoorbeeld van een responsief headerontwerp dat op mobiel netjes inklapt tot een lade.
Drie dingen om te stelen:
- Groepeer een breed productassortiment in een paar dropdowns, niet in een platte lijst. Figma heeft veel producten, maar slechts een handvol top-level header-items. De diepte zit in de dropdowns. Een platte header die elk product vermeldt, komt overweldigend over; gegroepeerde categorieën komen georganiseerd over.
- "Contact sales" en "Login" zijn hulpmiddelen, geen primaire functies. Figma stylet deze als ingetogen tekstlinks, zodat ze niet concurreren met de hoofd-CTA "Get started". Weet welke header-items deuren zijn voor bestaande gebruikers en welke deuren voor nieuwe, en geef ze een verschillend gewicht.
- Ontwerp de mobiele inklapfunctie bewust. De header van Figma vouwt op telefoons netjes in een volledig schermlade – geen krappe dropdown. Behandel het mobiele headerontwerp als een eigen lay-out, niet als een bijzaak die uit de desktopversie is geperst.
Patroon 4: Redactionele / Transparante merkheaders — Wanneer de header deel uitmaakt van het verhaal
Het laatste patroon is voor sites waar de header niet alleen een hulpmiddel is, maar een onderdeel van de visuele identiteit van het merk. Retailmerken, musea en studio's gebruiken transparante headers die over full-bleed afbeeldingen, ingetogen redactionele typografie en contentgerichte links heen liggen. Goed gedaan, voelt de header minder als een menu en meer als de openingszin van een verhaal. Dit zijn de esthetisch meest onderscheidende website header voorbeelden in de set, en het moeilijkst te kopiëren zonder het onderliggende merk te begrijpen.
10. Aesop — Transparant-naar-Effenvlak, Rustig
Patroon: Transparante header over afbeeldingen die vervagen naar een effen achtergrond bij scrollen
Het huidverzorgingsmerk Aesop heeft een van de meest elegante website header voorbeelden in de retail: een header die transparant begint – zwevend over een full-bleed hero-afbeelding met een dunne, serif-achtige letter – en vervolgens overgaat in een effen, leesbare achtergrond terwijl je naar de content scrollt. De terughoudendheid weerspiegelt de apothekersesthetiek van het merk. Een transparante header als deze is prachtig, maar Aesop doet het deel dat de meeste sites verkeerd doen perfect: het blijft de hele weg leesbaar.
Drie dingen om te kopiëren:
- Een transparante header moet een scroll-status hebben. De meest voorkomende fout bij een transparante header is tekst die onzichtbaar wordt over een licht gedeelte. Aesop lost dit op door te vervagen naar een effen achtergrond zodra je voorbij de hero scrollt. Lanceer nooit een transparante header zonder dit.
- Stem de typografie van de header af op de merkpersoonlijkheid. Aesop's ingetogen, redactionele lettertype doet meer voor het merk dan welke logo-animatie dan ook. Voor een merkwebsite is het lettertype van de header een merkbeslissing — kies het net zo zorgvuldig als je verpakking.
- Laat de afbeeldingen ademen onder een transparante balk. Wanneer de header over een hero-foto zweeft, houd hem dan schaars zodat de afbeelding niet wordt overladen. Een transparante header volgepropt met tien links tenietdoet het hele elegante effect.
11. Tate — Wanneer "Wat is er te zien" het hele punt is
Patroon: Gedurfde redactionele museumheader die tentoonstellingen en bezoekersinformatie op de voorgrond plaatst
Tate, het Britse netwerk van moderne en historische kunstmusea, heeft een van de meest instructieve website header voorbeelden voor elke evenementgedreven organisatie – een header gebouwd rond de twee dingen die elke bezoeker wil: wat er te zien is en hoe te bezoeken. De navigatie is redactioneel en zelfverzekerd – grote typografie, duidelijke "Wat is er te zien" en "Bezoek" vermeldingen, en een nadruk op "Plan je bezoek" – waarbij de identiteit van het museum wordt overgebracht door gedurfde kleur en typografie in plaats van een ingewikkelde logo-behandeling. Het is een geweldig sjabloon voor elke organisatie waar evenementen en bezoeken de kerntaken zijn.
Drie dingen om te kopiëren:
- Begin de header met de daadwerkelijke vraag van de bezoeker. Voor een museum is dat "wat is er te zien" en "hoe bezoek ik". Tate maakt beide onmisbaar. Wat de meest voorkomende reden is dat mensen naar je site komen, die link hoort als eerste in de header.
- Redactionele typografie kan een luid logo vervangen. Tate's merk komt tot uiting in de zelfverzekerde typografie en kleur, niet in een overdreven geanimeerd logo. Voor culturele en redactionele merken presteert een sterke typografische header beter dan logo-theatraliteit.
- Een "Plan je bezoek" CTA voor elke fysieke bestemming. Musea, evenementenlocaties, restaurants en winkels profiteren allemaal van één header CTA gericht op het persoonlijke bezoek. Tate geeft het echte prominentie – een patroon dat de moeite waard is om te kopiëren voor elk fysiek merk. (Zie het toegepast op dineren in onze gids voor restaurantwebsitevoorbeelden.)
12. A24 — De Studio Header als een Sfeer
Patroon: Gedurfde, contentgerichte redactionele header die een filmische sfeer creëert
De filmstudio A24 heeft een header die pure merksfeer uitstraalt — zelfverzekerd, ingetogen en contentgericht, waarbij films, winkel en redactionele content worden gepromoot in plaats van bedrijfslinks. De header behandelt de studio als een publicatie en een merk tegelijk, wat precies is hoe het publiek van A24 erover denkt. Het bewijst dat een header een *persoonlijkheid* kan hebben, niet alleen een functie.
Drie dingen om te kopiëren:
- Een header kan een sfeer uitdragen, niet alleen links. De header van A24 voelt filmisch en onderscheidend aan zodra deze laadt. Als je merk een sterke persoonlijkheid heeft, laat de header dit dan uitdrukken – ingetogen typografie, bewuste spatiëring en een zelfverzekerd logo doen meer dan een generieke navigatie ooit zal doen.
- Plaats content op de voorgrond, niet bedrijfspagina's. A24 plaatst films en redactionele inhoud vooraan; "Over ons" en bedrijfslinks verdwijnen naar de achtergrond. Leid je header met waar je publiek daadwerkelijk voor kwam, en laat de verplichte pagina's rustig aan de randen staan.
- Onderscheidend vermogen verslaat conventie voor merksites. De header van A24 lijkt niet op een SaaS-sjabloon, en dat is precies de bedoeling. Als je bedrijf staat of valt met het merk, presteert een enigszins onconventionele header die onmiskenbaar jij bent beter dan een veilige, vergeetbare header.
De 5 fouten die je stilletjes conversies kosten
De beste website header voorbeelden hierboven delen een discipline die ontbreekt bij falende sites. Bij talloze website header design audits zijn deze vijf fouten verantwoordelijk voor de meeste falende headers:
- Een header die de fold opslokt — vooral op mobiel. Een hoge header plus een aankondigingsbalk kan een derde van een telefoonscherm opslokken voordat er inhoud verschijnt. Houd de header compact en laat deze krimpen bij het scrollen. Schermruimte bovenaan is de duurste op je site.
- Een transparante header zonder scrollstatus. Transparante headers zien er prachtig uit boven een donkere hero — en worden onzichtbaar zodra de bezoeker naar een licht gedeelte scrollt. Als je een transparante header gebruikt, moet deze vervagen naar een effen, leesbare achtergrond wanneer de gebruiker scrollt. Geen uitzonderingen.
- Een sticky header die nooit krimpt. Een vaste header is handig op lange pagina's, maar een die de volledige hoogte behoudt terwijl deze sticky is, steelt inhoudsruimte bij elke scroll — brutaal op mobiel. Sticky headers moeten compact worden tot een slanke balk zodra de gebruiker voorbij de bovenkant scrollt.
- Een logo dat niet naar huis linkt. Het klinkt triviaal, maar een verrassend aantal sites vergeet het. Het logo is de universele "breng me terug naar het begin"-bediening. Als het geen link naar de homepage is, doorbreek je een conventie waar elke bezoeker op vertrouwt.
- Te veel concurrerende knoppen, geen duidelijke primaire. Wanneer de header "Aanmelden", "Inloggen", "Boek een demo", "Contact" en "Downloaden" allemaal als knoppen heeft vormgegeven, wint geen van hen. Kies één primaire actie, maak er een gevulde knop van en degradeer al het andere naar rustige tekstlinks.
Beste praktijken voor moderne websiteheaders in 2026
Naast het vermijden van die fouten, onderscheiden zes dingen de beste website header voorbeelden 2026 van de rest. Wat je ook meeneemt van deze website header voorbeelden, dit zijn de beste praktijken voor website headers die de moeite waard zijn om op een checklist te bewaren:
- Eén onmiskenbare primaire CTA. Een enkele gevulde knop die het oog direct vindt. Elke extra knop die op dezelfde manier is vormgegeven, verzwakt deze.
- Krimpen bij scrollen, geruisloos. Een header die compact wordt tot een slanke balk bij het scrollen, houdt navigatie beschikbaar terwijl er ruimte wordt teruggegeven aan de inhoud. Houd de beweging subtiel — geen stuiteren of dramatische formaatwijzigingen.
- Een echte scrollstatus voor transparante headers. Transparant over de hero, effen en leesbaar overal elders. Test het over je lichtste sectie, niet alleen je donkerste.
- Mobiel als een eigen lay-out. Meer dan de helft van al het verkeer is mobiel. Ontwerp de mobiele header bewust — een schone lade, grote tikdoelen, zoeken bovenaan — in plaats van de desktopheader op een telefoon te proppen.
- Consistentie op elke pagina. De header moet over de hele site effectief identiek zijn. Een homepage header met zes items en een inner-page header met vier verschillende items geeft bezoekers het gevoel dat ze verdwaald zijn.
- Aankondigingsbalk discipline. Eén promotiebalk tegelijk, wegklikbaar en nooit twee diep gestapeld. Een aankondigingsbalk is geleende ruimte van je inhoud — geef deze gracieus terug.
Hoe Wegic headers genereert die echt werken
De meeste websitebouwers geven je een sjabloonheader en laten je het logo verwisselen. Wegic behandelt de header als iets dat de AI afleidt uit je bedrijf — dichter bij de website header voorbeelden hierboven dan bij een generiek sjabloon. Vertel Wegic welk soort site je bouwt en het kiest het juiste patroon — minimaal en verdwijnend voor een publicatie, command-bar-minimaal voor een dev tool, meerlaags voor een marktplaats, transparant-redactioneel voor een merk.
Wegic is een conversatie-AI websitegroeisysteem. In plaats van een voorgebakken header van een sjabloon te erven, beschrijf je je site en Wegic schrijft het headerontwerp voor de website helemaal opnieuw — scrollstatus, mobiele lade, sticky gedrag en alles.
Fase 1: Brief je AI
Open Wegic en chat met Kimmy, je AI projectmanager:
"Bouw me een header voor een publicatie die gericht is op lezen, zoals Medium. Minimale sticky balk met logo, zoekfunctie en account. Verberg deze bij scroll-down, breng hem terug bij scroll-up. Eén abonneerknop aan de rechterkant. Dezelfde header op elk artikel."
Fase 2: AI-assemblage in minder dan een minuut
De engine van Wegic schrijft de code helemaal opnieuw — inclusief de header. In minder dan 60 seconden krijg je een responsief headerontwerp met het juiste scrollgedrag, een mobiele lade die netjes inklapt op telefoons (en alleen op telefoons), leesbaar contrast in elke scrollstatus, focusstijlen voor het toetsenbord en automatisch afgehandelde toegankelijkheidslabels.
👇 Klik hieronder om te beginnen met Wegic
Fase 3: Bewerken via conversatie
"Maak de header transparant over de hero-afbeelding, en laat deze vervolgens vervagen naar effen wit bij het scrollen. Verplaats de zoekfunctie naar een pictogram dat uitklapt. Voeg een slanke regioselectie toe in een bovenste hulpprogrammabalk boven de hoofdnavigatie."
Wegic stelt twee of drie ontwerpopties voor met onderbouwing voordat deze worden toegepast, en houdt de mobiele en desktopversies gesynchroniseerd.
Fase 4: Publiceren inclusief hosting
Druk op Publiceren. Hosting, aangepast domein, automatisch gegenereerde
sitemap.xml en SEO-metadata zijn allemaal gebundeld. Voor een vergelijking van hoe Wegic headers en lay-outs afhandelt ten opzichte van andere AI-bouwers, zie onze uitgebreide recensie van 5 AI-tools voor webdesign.
Conclusie: Stem de header af op de taak
De 12 website-header-voorbeelden in deze gids werken omdat elk was afgestemd op een specifiek probleem. De verdwijnende header van Medium werkt omdat Medium bedoeld is om te lezen. De meerlaagse header van Wise werkt omdat Wise tientallen landen en twee klanttypen tegelijk bedient. De transparante header van Aesop werkt omdat Aesop een esthetiek verkoopt. Geen van hen zou werken als je ze zou verwisselen — wat de echte les is achter elk van deze website-header-voorbeelden.
Als je een header kopieert die niet overeenkomt met de daadwerkelijke taak van je site, is het resultaat decoratie. Stem het patroon af op wat je bezoeker kwam doen, en de header zit niet in de weg — wat precies is wat goed website-header-ontwerp doet.
Voor meer ontwerpinspiratie in andere categorieën, zie onze bredere gids met voorbeelden van website-homepages, en voor een diepere galerij die puur gericht is op header-esthetiek, onze collectie van de 16 beste voorbeelden van website-header-ontwerp. Voor implementatie genereert de responsieve websitebouwer standaard headerpatronen die bij je categorie passen, en de galerij met esthetische websites toont hoe headers passen in het algehele site-ontwerp.
Veelgestelde vragen
Wat moet elke website-header bevatten?
Vijf essentiële zaken, in volgorde van prioriteit — en ze gelden voor bijna alle website-header-voorbeelden hierboven: (1) een logo dat teruglinkt naar de homepage; (2) een primaire navigatie van vijf tot zeven items, nooit meer; (3) een enkele onderscheidende primaire CTA (Aanmelden / Beginnen / Abonneren / Boeken); (4) een zoekfunctie als je site echt diepgang heeft; (5) een schone mobiele versie die inklapt tot een lade. Optioneel, afhankelijk van het type: een hulpprogrammabalk voor regio/taal/account, en een enkele te sluiten aankondigingsbalk. De meeste mislukte header-audits zijn terug te voeren op het overtreden van een van deze regels.
Wat is het verschil tussen een sticky header en een fixed header?
De termen worden vaak door elkaar gebruikt, maar in de praktijk bedoelen professionals meestal dit: een fixed header blijft te allen tijde bovenaan het scherm vastgepind terwijl je scrollt. Een sticky header gedraagt zich hetzelfde zodra je deze bereikt, maar kan in de documentstroom beginnen of verbergen en onthullen op basis van de scrollrichting (zoals die van Medium). In de praktijk is "sticky" de overkoepelende term geworden voor elke header die de scroll volgt. De belangrijkste UX-regel voor beide: krimp tot een slanke balk zodra de gebruiker voorbij de bovenkant scrollt, zodat je geen inhoudsruimte inneemt op elk scherm – vooral op mobiel.
Moet mijn website-header transparant zijn?
Een transparante header werkt prachtig wanneer deze over een full-bleed hero-afbeelding of -video zit en je merk neigt naar redactioneel (denk aan Aesop, modemerken, musea). De ononderhandelbare regel: hij moet overgaan naar een effen, leesbare achtergrond zodra de gebruiker naar lichtere secties scrollt. De meest voorkomende fout bij transparante headers is navigatietekst die verdwijnt over een wit blok verderop op de pagina. Als je geen betrouwbare scroll-status kunt implementeren, gebruik dan een effen header.
Hoe hoog moet een website-header zijn?
Er is geen universeel pixelgetal, maar het principe is: zo compact mogelijk blijven terwijl het nog steeds aanklikbaar is. Op desktop is een header van ongeveer 60-80px hoog gebruikelijk; op mobiel houd je hem slank en zorg je ervoor dat de tikdoelen groot genoeg zijn om comfortabel te raken. De grotere regel is wat er gebeurt bij het scrollen — een goede moderne website-header krimpt zodra de gebruiker naar beneden scrollt, waardoor die ruimte wordt teruggegeven aan de inhoud. Laat de header plus een aankondigingsbalk nooit een derde van een telefoonscherm innemen.
Wat is een mega-menu header, en heb ik er een nodig?
Een mega menu header is een header waarvan de dropdowns uitvouwen tot grote panelen met meerdere kolommen — gebruikt door retailers en grote catalogi om tientallen categorieën tegelijk te tonen. Je hebt er alleen een nodig als je inhoud echt overvloedig en goed georganiseerd is (veel producten, veel categorieën). Voor de meeste SaaS, publicaties en merksites is een mega menu overbodig en werken een paar nette dropdowns veel beter, zoals de meeste website header voorbeelden in deze gids laten zien. Gebruik een mega menu om echte catalogusdiepte op te lossen, niet om indruk te maken.
Hoe ontwerp ik een header voor mobiel?
Behandel mobiel header ontwerp als een eigen lay-out, niet als een verkleinde desktopversie. Het dominante patroon van 2026: een slanke balk met logo en een menu-icoon dat een schermvullende lade opent. In de lade: een verticale lijst met links met grote tikdoelen, zoeken bovenaan, en de primaire CTA als een knop over de volledige breedte. Vermijd hover-only dropdowns (deze bestaan niet op touch), en zorg ervoor dat de header krimpt bij het scrollen zodat de inhoud maximale ruimte krijgt.
Hoeveel links moeten er in de headernavigatie staan?
Vijf tot zeven primaire items is de ideale hoeveelheid. Minder dan vijf, en je toont mogelijk belangrijke bestemmingen onvoldoende; meer dan zeven, en je dwingt bezoekers om meer te scannen dan het oog comfortabel in één oogopslag kan opnemen, en je eindigt meestal met een vaag "Meer" vangnet. Als je meer dan zeven bestemmingen hebt die echt top-level prominentie verdienen, is dat een teken dat je informatiestructuur herstructurering nodig heeft — los de structuur van de site op, niet alleen de headernavigatie.
Waar moet de call-to-action in een header staan?
Rechtsboven is de conventionele, goed presterende plaatsing in van links naar rechts gelezen talen — het oog eindigt daar met het scannen van de navigatie. Stileer het als een enkele gevulde knop die contrasteert met de gewone tekstlinks, zodat het het duidelijke focuspunt is. De kardinale regel: één primaire CTA. Als je drie knoppen identiek stileert, wint geen van hen, en aarzelen bezoekers in plaats van te klikken.
