De website header, ook wel aangeduid als de boven de vouw sectie, is misschien wel het belangrijkste onderdeel van een website. Vooral omdat het het eerste deel van de website is dat bezoekers zien wanneer ze op de website aankomen.
Wanneer het op websites aankomt, is de eerste indruk van groot belang. En de header sectie speelt een grote rol in. In feite, volgens een studie, blijft de meerderheid van de websitebezoekers slechts ongeveer 15 seconden op een website voordat ze vertrekken.
Het headerontwerp van uw website zal een belangrijke rol spelen in de vraag of u een bezoeker kunt overtuigen om langer dan 15 seconden te blijven.
Met het juiste headerontwerp kunt u bezoekers beïnvloeden om op de website te blijven bladeren. U kunt ook een header ontwerpen op een manier die bezoekers overhaalt om ook actie te ondernemen.
Om u te helpen inspiratie op te doen en een paar trucs te leren over effectief headerontwerp, hebben we een aantal van de beste website headerontwerpvoorbeelden uitgekozen voor uw inspiratie. Deze ontwerpen zullen u zeker helpen om uw eigen headers te onderscheiden van de massa.
2 Miljoen+ Digitale Activa, Met Onbeperkte Downloads
Geef onbeperkte downloads van 2 miljoen+ ontwerpbronnen, thema’s, sjablonen, foto’s, afbeeldingen en meer. Envato Elements begint bij $16 per maand, en is het beste creatieve abonnement dat we ooit hebben gezien.
Explore Digital Assets
5 Tips Voor Effectief Website Header Design
Voordat we naar de voorbeelden gaan, laten we eerst eens kijken naar de belangrijkste elementen die een website header effectiever maken.
Gebruik het juiste lettertype
De titel of kop staat in het middelpunt van een website header design. Het is wat helpt bezoekers te begrijpen waar een website over gaat. Dit betekent dat de titel groot, vet en duidelijk zichtbaar moet zijn.
Met het juiste lettertype kunt u de perfecte koptitel ontwerpen die de aandacht trekt. Hoewel een vet, schreefloos lettertype de beste keuze is voor kopteksten, is een schreeflettertype voor sommige merken ook beter geschikt. Zorg er vooral voor dat je titel, subkoppen en tekst duidelijk zichtbaar zijn boven de achtergrond.
Een illustratie toevoegen
Afbeeldingen en video-achtergronden zijn nog steeds erg populair. Maar de nieuwste trend in het ontwerpen van websiteheaders is het gebruik van illustraties.
Een groot voordeel van het gebruik van illustraties in headerontwerpen is dat het u in staat stelt wat persoonlijkheid aan uw websiteontwerp toe te voegen. U kunt met de hand een illustratie die past bij uw bedrijf en branding. En gebruik vervolgens dezelfde stijl van illustraties in het hele website-ontwerp om een vloeiende gebruikerservaring te creëren.
Creëer een Call-To-Action (CTA)
De oproep tot actie is natuurlijk het op een na belangrijkste element (de titel komt op de eerste plaats) van het header-ontwerp. Met een CTA kunt u bezoekers overhalen actie te ondernemen en zich in te schrijven voor een dienst, artikelen te zoeken, zich in te schrijven voor een nieuwsbrief, een product te kopen en nog veel meer.
Maar u moet wel voorzichtig zijn met de plaatsing van de CTA. Een goede strategie is het A/B-splittesten van uw headerontwerpen om de perfecte kleurencombinatie en de juiste plek voor de CTA te vinden.
Kies een bijpassende menustijl
Navigatielinks zijn ook belangrijk, maar hoeven niet per se deel uit te maken van uw headerontwerp. Je kunt een header ontwerpen met een verborgen navigatiesysteem dat alleen zichtbaar is als je naar beneden scrollt. Of zelfs de navigatie verbergen in een hamburgermenu.
Het zal afhangen van de doelen die u met uw website wilt bereiken. Een duidelijk zichtbare navigatie helpt bezoekers sneller andere pagina’s op uw website te bekijken. Als u bezoekers niet wilt afleiden en ze wilt aanmoedigen meer over een product te lezen, kunt u overwegen de navigatie te verbergen.
Geef creativiteit maar volg standaarden
Ontwerpers worden vaak aangemoedigd creatief te zijn bij het ontwerpen van websites. Maar gebruik ook altijd de standaardrichtlijnen voor het ontwerp.
Bij het toevoegen van logo’s, knoppen en pictogrammen moet u bijvoorbeeld gebruikmaken van afmetingen. En volg ook de basisrichtlijnen voor webdesign om de juiste plaats voor elk element te vinden. Dit helpt bij het creëren van consistentie in het ontwerp van de website.
Kijk eens naar de voorbeeldkoppen hieronder om te zien hoe het moet.
PenzGidroMash
Geloof het of niet, dit is een website voor een bedrijf in Rusland dat industriële apparatuur produceert. En het heeft een van de meest creatieve website headers die we hebben gezien.
Ondanks dat de meeste corporate websites meestal voor old-school en klassieke website-ontwerpen gaan, is de moderne ontwerpbenadering van dit bedrijf verfrissend.
Alles, van de titel, lettertype keuzes, kleuren, en vooral het gebruik van afbeeldingen om een 3D-achtig ontwerp te creëren maakt deze website header echt een les in effectief web design.
Creative Dreams Design
Dit website header ontwerp is een geweldig voorbeeld van ontwerpen die zeggen “meer met minder”. De ultra-minimalistische look met een eenvoudige geanimeerde illustratie helpt deze website een belangrijk doel te bereiken: creativiteit uitstralen. En dat is precies waar een website van een creatief ontwerpbureau naar zou moeten streven.
De eenvoudige oproep tot actie, de schattige illustratie, de animaties en de kleuren bovenop de schone witte achtergrond geven deze header de aandacht die hij verdient.
Digital Horizon
De website voor het investeringsbedrijf Digital Horizon biedt een geweldige les in header-achtergrondontwerp. De geanimeerde achtergrond neemt een groot deel van de ruimte in beslag, wat perfect past bij de bedrijfsnaam en het concept. En ook de kop en de oproep tot actie komen goed uit de verf.
Het gebruik van afbeeldingen en geanimeerde achtergronden is nog steeds relevant. Je moet alleen de juiste manier vinden om het ontwerp van de header te laten samenvallen met de huisstijl van het bedrijf.
Okb Interactive Studio
Een vet header-ontwerp heeft een groot, vet lettertype voor de titel nodig. Deze ervaren ontwerpstudio heeft de perfecte combinatie gevonden van het lettertype voor de titel en de lettergrootte om een echt gedenkwaardig kopontwerp te maken.
Het gaat niet alleen om de grootte van de kop of de letterkeuze. Maar ook de manier waarop de tekst delen van de achtergrond onthult en het menu, links en zelfs de bedrijfsnaam verbergt om de header zijn broodnodige ruimte te geven, is wat dit ontwerp opmerkelijk maakt.
IdeaBuddy
Wanneer het aankomt op het ontwerpen van headers voor SaaS-landingspagina’s, is het soms gemakkelijker om gewoon te laten zien wat de app kan dan het alleen maar te zeggen. IdeaBuddy, de app voor het valideren van ideeën, heeft die eenvoudige benadering gebruikt om een effectievere header te ontwerpen.
Naast het creatieve gebruik van illustraties op de header en op de hele website, worden ook screenshots van de app gebruikt om te laten zien wat de service biedt.
Together For Animals
Bij het ontwerpen van websites en headers is het belangrijk om designpsychologie in het ontwerp op te nemen. Vooral als het gaat om non-profit en liefdadigheidswebsites, spelen dergelijke strategieën een cruciale rol bij het oproepen van emoties.
De website voor deze liefdadigheidswebsite voor dieren maakt goed gebruik van ontwerppsychologie door een enkele foto toe te voegen die de harten en zielen van de bezoekers raakt.
Stuart
Het gebruik van sliders is een ander populair concept dat wordt gebruikt in headerontwerpen voor websites. Echter, de oude manieren van het gebruik van beeld sliders zijn langzaam vervagen van de moderne we ontwerpen. Deze website voor bezorgdiensten heeft het oude slider-concept naar een nieuw niveau getild.
Het maakt gebruik van een perfecte combinatie van afbeeldingen van hoge kwaliteit met transparante achtergronden, pastelkleuren en geanimeerde koppen om een zeer onderhoudend header-ontwerp met een content slider te maken.
Handwrytten
Handwrytten is een zeer unieke dienst die aanbiedt om uw schrijfsels als handgeschreven notities te bezorgen. Het ontwerpen van een header voor zo’n dienst is zeker een uitdaging. En ze lijken het perfecte ontwerp te hebben gemaakt om het bedrijf op een aantrekkelijke manier te presenteren.
Met een echt voorbeeld van een handgeschreven briefje omringd door creatief geanimeerde illustraties, vangt de header perfect het doel van deze service en het bedrijf.
Wild Side Design
Deze website header is nog een goed voorbeeld van het gebruik van illustraties om een verhaal te vertellen. In dit geval maakt de header gebruik van een handgemaakte tekening die de boodschap van dit bedrijf visualiseert. Het is een les over hoe een unieke illustratie zoveel persoonlijkheid kan toevoegen aan een website header.
Stef Ivanov
De portfolio website van de freelance ontwerper Stef Ivanov heeft een van de meest unieke header ontwerpen waardoor het opvalt. Het is niet alleen de geweldige schetstekening van zijn foto of de zoemende bijen rond zijn hoofd. Maar vooral door de manier waarop hij alle elementen, lettertypes, kleuren en witruimte samen gebruikt om een onvergetelijke ervaring te creëren.
Pragmatic Brains
Het is moeilijk om een heel bedrijf samen te vatten of alle diensten van een bureau te presenteren op de beperkte ruimte die beschikbaar is in de header. Op de een of andere manier is de website van Pragmatic Brains erin geslaagd om al hun adviesdiensten in de header op te nemen.
Op het eerste gezicht ziet het eruit als een gewone website header met een bundel illustraties. Maar, de magie gebeurt wanneer je met de muis over die kaartontwerpen gaat. Ze onthullen details over elke dienst die het bureau aanbiedt. Een heel slim en effectief header-ontwerp.
AirPods Pro
We kunnen niet om de briljante website-ontwerpen van Apple-productpagina’s heen, vooral niet als we een lijst met creatieve header-ontwerpen maken. In de loop der jaren heeft Apple de kunst beheerst om de aandacht van gebruikers te trekken met zijn ongelooflijk simplistische website-ontwerpen.
Het header-ontwerp voor de AirPods Pro-productwebsite is ook voorzien van een radicaal ontwerp. Het is eenvoudig en stelt gebruikers in staat om snel te begrijpen waar de website over gaat.
Pixelwithin
Dit website-headerontwerp past perfect bij de merkboodschap van zijn webdesignbureau. Het gebruikt een zeer vereenvoudigde header zonder veel kleuren, afbeeldingen of tekst om de kracht van minimalistische en “ongecompliceerde” ontwerpen te laten zien.
Sheetal Ice Cream
De website voor dit Indiase ijsbedrijf ziet er net zo smakelijk uit als hun producten zelf. Vooral de header van de website weet effectief bezoekers te trekken met een strakke lay-out met een kleurrijke achtergrond die slechts een enkele afbeelding van ijs benadrukt. Niemand zou kunnen weerstaan aan het naar beneden scrollen op deze website, zelfs als je lactose-intolerant bent.
Courses Australia
Een van de meest effectieve header-ontwerpen op onze lijst behoort toe aan een Australische website die werkt als een doorzoekbare directory van online cursussen die worden aangeboden door Australische hogescholen.
Het eenvoudige ontwerp dat het zoeksysteem in het midden plaatst, fungeert als een effectieve oproep tot actie. Gevolgd door de index waarmee gebruikers cursussen in verschillende onderwerpen, industrie, en kwalificatie levels.
Dit zijn slechts een paar van de vele verbazingwekkende header ontwerpen die we hebben gezien. Blijf het web verkennen om meer verbazingwekkende ontwerpen te vinden. Bekijk ook onze website wireframing templates en Sketch website templates voor meer inspiratie.