Website headers voor jouw inspiratie (met voorbeelden)
UX design
Geplaatst op: 22 oktober 2024, aangepast op: 24 oktober 2024
Een website header is één van de belangrijkste onderdelen van je website. Maar hoe maak je nou een goede, efficiënte header? Lees het in dit artikel en bekijk de beste voorbeelden.
Wat is een website header?
Een website header (ook wel hero section genoemd) is het bovenste gedeelte van de website dat de belangrijkste elementen van een website bevat. Vaak omvat dit de omschrijving van de website, het logo en de navigatie. Het belangrijkste doel van de header is het identificeren ervan en de gebruiker over te halen om de website te blijven gebruiken. Als je de gebruiker wilt overtuigen om iets te doen (bijvoorbeeld een account aanmaken of geld doneren) dan noem je dat een call-to-action (oproep tot actie).
Een website header kun je in principe voor elke (landings)pagina maken, maar de belangrijkste bevindt zich op jouw homepage.
Wat staat er in een website header?
Zoals gezegd is er vaak een titel te zien, dit is de belangrijkste kop op de pagina. Hierin laat je de bezoeker weten:
Wat je te bieden hebt;
Waarom je te vertrouwen bent;
Wat de voordelen zijn om met jou samen te werken;
Welke actie ze moeten ondernemen.
Dit lijkt heel moeilijk om al deze punten te verwerken, maar dat valt reuze mee. Je hoeft ook niet altijd alles te verwerken, als je maar de belangrijkste vragen beantwoordt. Hieronder lees je hoe je deze punten op een goede manier verwerkt in je header.
Hoe ontwerp je een goede header voor op je website?
Als je aan de slag gaat met je hero section zijn er meerdere elementen die je kunt gebruiken. Hieronder een aantal veelgebruikte ingrediënten die je helpen.
Gebruik een sterke kop
Je kop (heading) is het belangrijkste wat je wilt zeggen over je website. Benoem dus vooral je dienst of product. Ook is het belangrijk dat deze kop niet te lang is. Maak gebruik van een krachtige headliner.
Maak het af met een subkop
Direct onder je kop zet je een subkop neer, die verder gaat op je eerste kop. Waar je in je kop je product benoemt, zeg je in je subkop iets over je service of wat je uniek maakt. Benoem specifiek de belangrijkste voordelen van jouw bedrijf.
Voeg een call-to-action toe
Een call-to-action is een oproep tot actie. Is de belangrijkste actie het aanmaken van een account? Of het doneren van geld aan een goed doel? Zorg dan voor een opvallende knop met een wervende tekst zoals ‘Maak account aan’ of ‘Doneer’. Geef je knop een andere achtergrondkleur zodat deze de aandacht trekt.
Maak gebruik van een sfeervolle afbeelding of video
Het cliché ‘Een goed beeld zegt meer dan 1000 woorden’ is hierbij waar. Plaats een foto of video in je website header die past bij je onderneming. Als je deze op de achtergrond plaatst, zorg je er altijd voor dat de tekst goed leesbaar blijft, ook bij flikkerende beelden in het geval van drukke video’s. Verlaag bijvoorbeeld de doorzichtigheid of plaats de afbeelding in een apart vak. Voor een persoonlijkere uitstraling kun je kiezen voor afbeeldingen met mensen erop, maar vermijdt veelgebruikte stockfoto's die niet authentiek overkomen.
Combineer alles tot een krachtige hero section
Combineer nu al deze elementen en zorg dat ze goed samenwerken. Bijvoorbeeld zoals in dit voorbeeld van de website van Trivago.
In de kop beschrijft Trivago duidelijk hun website: ‘Bespaar tot 35% op je volgende hotelverblijf’. Ze noemen daar niet alleen hun product (hotelverblijf) maar ook een belangrijk voordeel (besparing). In de subkop eronder laten ze weten dat er honderden sites worden meegenomen in de vergelijking, waarmee wordt gesuggereerd dat de aanbiedingen echt voordelig zijn.
Het formulier om een hotelkamer te zoeken dient als call-to-action waarmee direct een zoekopdracht uitgevoerd kan worden.
Ten slotte is boven in de header een afbeelding te zien van een luxe hotelkamer, met op het bed een persoon geïllustreerd in een handgetekende stijl. Deze afbeelding trekt de aandacht en valt op, en past daarnaast perfect bij de rest van de website door dezelfde kleuren te gebruiken. Onder de subkop zijn logo’s geplaatst van de meest bekende websites, wat vertrouwen wekt.
Door al deze losse elementen met elkaar samen te laten werken heeft Trivago een superefficiënte header gemaakt.
Website header voorbeelden
Hierboven hebben we al een voorbeeld gegeven, hieronder vind je nog meer voorbeelden van goed ontworpen hero sections.
String Systems maakt gebruik van een grote titel die in het midden gecentreerd is. Door de levensgrote letters en de animaties trekt de typografie de aandacht. Naast de tekst worden er icoontjes en illustraties gebruikt om het geheel op te fleuren. Onder de grote titel zijn twee kleine knopen te zien die als call-to-action worden gebruikt. Deze knoppen lijken te klein, maar door veel witruimte eromheen te plaatsen, wordt het oog toch efficiënt naar de buttons geleid.
Deze header valt op door het kleurgebruik. Pikzwarte tekst op een felrode achtergrond trekken hier de aandacht. De kleurrijke illustratie eronder, die ook nog eens is geanimeerd, is de kers op de taart. Deze header laat zien dat meerdere call-to-action knoppen ook prima kunnen werken en gebruikt een lijstje met links naar de belangrijkste pagina’s op de website. Hierdoor is de navigatie bijna niet meer nodig voor degenen die op de homepage landen.
Ook deze website maakt gebruik van gecentreerde tekst en een grote kop. Door ook de afbeelding eronder te centreren ontstaat een spannende layout en lijkt alles in een driehoek te zijn geplaatst. Wel lijkt er hier een duidelijke call-to-action te missen (deze is overigens wel in de navigatie te vinden).
De Werken bij Defensie website gebruikt een minimalistische header met een schermvullende video op de achtergrond. Dit maakt de header dynamisch, terwijl de tekst eroverheen de video extra context geeft. Dat de tekst ‘Generatie D’ klikbaar is, is niet helemaal duidelijk. De drie knoppen eronder vallen goed op door hun kleur en grootte en nodigen uit tot klikken. Al komt dat maar omdat er verder weinig op de homepage staat.
De website van Roompot Vakantieparken combineert een traditionele header met een zoekfunctie. Vanuit de zoekfunctie kunnen onder andere de locatie, datum en reisgezelschap ingevoerd worden, waarmee het aanbod gefilterd kan worden. Op de achtergrond is een grote foto zichtbaar, die iets donkerder is gemaakt. Hierdoor is de witte tekst (die bestaat uit een kop en een subkop) goed leesbaar. Deze tekst is overigens ook klikbaar en leidt de bezoeker naar een andere pagina. Door een icoontje naast de tekst te verwerken is dit duidelijk, al missen we wel een hover-effect.
Deze website is al eens langsgekomen in onze lijst van mooiste websites en niet zonder reden!
De header is duidelijk, richt zich op een actie en wekt vertrouwen op. Door in de kop het belangrijkste voordeel te noemen (‘Privacy first Google Analytics alternatief’) is direct duidelijk voor wie de website is. De subkop benoemt direct een tweede USP (unique selling point), namelijk dat de software in Europa is gehost en privacyvriendelijk is.
Onder de subkop worden een aantal bekende klanten opgenoemd, waarna een duidelijke call-to-action volgt. De koraalrode knop valt goed op door de felle achtergrondkleur en ernaast zijn de stappen benoemd die je moet doorlopen om een website te bekijken. Ook de geruststelling dat de proefperiode gratis is en er geen betaalmethode nodig is, wekken extra vertrouwen op.
Squarespace laat zien dat een header ook minimalistisch kan worden vormgegeven. De kop is linksuitgelijnd en bestaat slechts uit 5 woorden. De call-to-action bestaat uit een eenvoudige, witte knop, met daarnaast een korte subkop. De afbeelding op de achtergrond steelt de show: een 3D model met warme kleuren en een laptop die het product van Squarespace laat zien.
Heb je nog steeds moeite met je website headers?
Het is niet makkelijk om een goede website header te ontwerpen. Maar met onze tips kom je hopelijk een heel eind:
Omschrijf je bedrijf in één zin: de kop;
Voeg unieke eigenschappen of voordelen toe in je subkop;
Roep op tot actie met een duidelijke call-to-action;
Plaats een aantrekkelijke afbeelding of video in je header.