Met een goede header kom jij heel wat verder

De website header is één van de belangrijkste designonderdelen van een website. Het speelt een grote rol in het trekken van de aandacht van bezoekers. Je krijgt maar één kans om een eerste indruk te maken zegt het spreekwoord. Volgens Google duurt het slechts 50 milliseconden om een mening te vormen over een website. Daarom is het erg belangrijk om ervoor te zorgen dat jouw header design uniek en aantrekkelijk is. Jouw header moet de bezoeker informeren dat hij of zij op de juiste plaats terecht is gekomen is en tegelijkertijd de bezoeker begeleiden om de website verder te verkennen volgens Mockplus. De header dient dus als een soort uitnodiging.

Leer hoe je een headerdesign voor jouw website ontwerpt die echt werkt, welke elementen ervoor nodig zijn en wat inspirerende voorbeelden zijn door snel verder te lezen.

Header elementen

De belangrijkste elementen van een header zijn:

  • Logo:

Door je logo weten bezoekers met wie ze te maken hebben en creëer je herkenbaarheid volgens Mijnwebwinkel.

  • Call to action:

Een call to action plaatsing op een strategisch belangrijke locatie is de perfecte gelegenheid om gebruikers aan te sporten om direct in het begin actie te ondernemen volgens Uxplanet.

  • Zoekfunctie:

Zo vinden bezoekers sneller waar ze precies naar op zoek zijn, wat de gebruiksvriendelijkheid van jouw website zal verhogen.

  • Navigatie-elementen:

Laat bezoekers gemakkelijk begrijpen waar ze zich bevinden en hoe ze hun weg op jouw website kunnen vinden door navigatie-elementen aan de header toe te voegen.

  • Tekst of kop

Het is belangrijk om voor bedrijf verstrekte informatie zoals contactgegevens duidelijke en leesbare lettertypes te kiezen. Gebruik korte woorden wanneer mogelijk. Voor de homepageheader kan je daarentegen kiezen voor gedurfde en grote typografie om de aandacht van de gebruikers te trekken.

  • Hero image of video/animatie:

Een hero image plaatsen kan erg mooi zijn voor jouw header. Zorg ervoor dat de afbeelding informatie geeft over jouw merk. Maar je hoeft je zeker niet alleen op een statische afbeelding te focussen. Het plaatsen van een video of een animatie is ook een efficiënte manier om je header erg aantrekkelijk te maken.

Het is niet nodig om deze elementen allemaal tegelijk toe te voegen. Zorg ervoor dat je een evenwicht vind tussen de informatie en de ordening ervan. Een te drukke en overbelaste header wil niemand. Een gebruiker die jouw interface niet binnen enkele seconden kan achterhalen zal snel weer vertrekken volgens Uxplanet.

De boodschap van een header

Voordat je begint met het ontwerpen van jouw header is het belangrijk om rekening te houden met de algemene stijl van de website en het hoofddoel ervan. Er zijn verschillende mogelijke boodschappen die een header kan overbrengen:

-een consument aansporen om iets te doen

-werken aan het opbouwen van vertrouwen

-een bezoeker aanmoedigen om meer te weten te komen

Of simpelweg om de aandacht van bezoekers te trekken en ze nieuwsgierig te maken naar jouw website. De keuze is afhankelijk van het doel van een jouw website.

Een e-commerce website heeft bijvoorbeeld andere design functies dan een promotionele website. Bij een promotionele website is het hoofddoel om het product effectief te presenteren. Bij een e-commerce of zakelijke website kan de situatie anders zijn. Een gebruiker moet makkelijk kunnen navigeren, in dit geval kan de koptekst beknopter zijn om plaats te maken voor andere categorieën volgens Uxplanet.

Originele header voorbeelden ter inspiratie

Woven gebruikt een verborgen navigatie wat ook wel een hamburger menu wordt genoemd. Hierdoor blijft de hele pagina visueel en eenvoudig. De header bevat alleen de kernelementen. Daarnaast gebruikt Woven een grote hero image om de aandacht van bezoekers te trekken.

De website van Supreme brengt minimalisme op een hoger level. De website heeft een onzichtbare header. De homepage bestaat alleen uit een menu met een zwarte achtergrond, heel minimalistisch dus.

De video-achtergrond van Le 28 brengt in een geweldige manier de sfeer van het restaurant over op de website.

Als je de header van Balenciaga ziet lijkt het alsof je door de ogen van een ander kijkt. Wanneer je op ‘play video’ klikt krijg je een 360 graden video te zien van één van Balenciaga’s schoenen in 3D.

Comme des Garcons gebruikt een grote hero image van een schilderij om de aandacht van bezoekers te trekken. Een bijzondere keuze omdat het een kledingmerk is maar hierdoor wekken zij wel een bepaalde nieuwsgierigheid. De onderdelen van de header zijn onzichtbaar.

Conclusie

In dit artikel ben ik ingegaan op de designelementen van een header, de boodschap die je met een header kan overbrengen en ik heb inspirerende voorbeelden van header designs laten zien. Ik hoop dat jij met deze informatie het maximale uit jouw header design kan halen door het jouw unieke visitekaartje te maken.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *