Wat is het belangrijkste onderdeel van een website? Is het de inhoud? De afbeeldingen? Is het de structuur? Of is het de verzameling functies die de bruikbaarheid en het gemak bepalen? Als je websites vanuit verschillende perspectieven bekijkt, zouden deze allemaal correct zijn. Maar het zou verkeerd zijn om een cruciale functie die een website onderscheidt van de rest te negeren - de website-header.
Een website-header is als een kroon op iemands hoofd. Het geeft autoriteit aan, het weerspiegelt betekenis en het maakt de drager tot een prominente persoonlijkheid. Een website-header ontwerp moet een combinatie zijn van afbeeldingen en functies, en meestal moeten ze het best geplande gedeelte op een website zijn.
In deze blog zullen we het hebben over wat een website-header is en waarom het belangrijk is. We zullen ook enkele tips en toepassingen opsommen bij het ontwerpen van een website-header voor je eigen website.
Wat is een website-header?
Een website-header bevindt zich helemaal bovenaan je website, vandaar het woord 'header'. Het biedt verschillende doeleinden, vooral voor webbbezoekers. Ten eerste is het een sectie waar het logo van een bedrijf wordt geplaatst (soms ook de naam). Ten tweede heeft het een reeks menu's die gebruikers kunnen gebruiken om door een site te navigeren. En ten derde dient het als een "richting" voor waar webpagina's zich bevinden en hoe je daar kan komen.
Opmerking: afbeelding gehaald van Strikingly user website
Dit gedeelte is over het algemeen identiek aan alle pagina's van de website; bepaalde sjablonen geven de startpagina echter een subtiel ander uiterlijk van de website-header om de aandacht te vestigen op de uitgelichte delen van de site.
Algemene kenmerken van een website-header
Website-headers zijn meestal samengesteld uit verschillende elementen. Er zijn vaste website-headers die op dezelfde positie blijven en hetzelfde blijven, ongeacht welke webpagina een gebruiker bekijkt. Er is ook een zwevende header die de illusie geeft alsof hij je volgt terwijl je scrolt.
Voordat je algemene functies aan een header toevoegt, moet je eerst bepalen welk type header je wilt. Wil je een vaste of zwevende header? Overweeg het volgende om je te helpen kiezen welke het beste is voor je site:
1. Classificatie van je website (e-commerce, online portfolio, service, etc.)
2. Marketingdoel
3. Websitedoelen (bijv. conversieratio verhogen)
4. Inhoudsstructuur en organisatie
Hier zijn enkele veelvoorkomende functies voor website-headers die je vaak op veel websites ziet:
- Logo
Een website-header heeft meestal het logo van de website of het bedrijf. Het doel van het toevoegen van een logo aan de header is om identiteit vast te stellen. Naast merkdoelstellingen, zorgt het toevoegen van een logo ook voor onderscheid en merkherkenning.
Het logo wordt meestal in de linkerbovenhoek van de header geplaatst. Als alternatief kan je er ook voor kiezen om je bedrijfsnaam toe te voegen. Afhankelijk van je voorkeuren kan je zelfs beide toevoegen. Zorg er gewoon voor dat elk voldoende ruimte heeft om te worden bekeken en gelezen.
- Navigatie
Navigatie is het menu dat links bevat om van de ene pagina naar de volgende te springen. Dit is wat je webbezoekers zullen gebruiken om door je website te navigeren. Je kan ook gebruikmaken van vervolg keuzemenu's als er verschillende pagina's onder dezelfde categorie vallen. Wil je weten hoe je een naadloze navigatiefunctie kan maken? We zullen daar in een later gedeelte meer over praten.
- Winkelwagen
Deze functie is buitengewoon handig, vooral als je een e-commerce website hebt. Met het winkelwagentje kunnen gebruikers zien welke items ze aan hun winkelwagentje hebben toegevoegd. Als je een online winkel lanceert, vergeet dan niet om een winkelwagen functie toe te voegen aan de header van je website.
- Zoeken
Het zou moeilijk zijn om een zoekfunctie niet op te merken in het ontwerp van de header van een website. Dit wordt vaak gesymboliseerd door het vergrootglasbeeld. Met deze functie kunnen gebruikers eenvoudig typen waarnaar ze op zoek zijn. In tegenstelling tot navigatie, richt de zoekfunctie zich specifiek op bepaalde woorden op je website. De zoekheaderopdracht wordt meestal in de rechterbovenhoek van de header van de website geplaatst. Door een zoekfunctie toe te voegen aan de header van je site, wordt de gebruikerservaring veel beter.
- Gebruikersprofiel
Voor je headertekst achtergrond moet je vaak een gebruikersprofiel functie toevoegen. Waar is het voor? Ten eerste kan je deze functie toevoegen als je een website hebt waarvoor lidmaatschappen nodig zijn, zoals een online winkel of een sociaal netwerk platform. Ten tweede geeft het de gebruiker veel meer controle over zijn voorkeuren.
Het belang van een goede website-header
Hier zijn enkele voordelen van het hebben van een goede website-header:
- Het helpt bij zoekmachineoptimalisatie
Het hebben van de beste website-header betekent dat je inspanningen moet leveren om verkeer te genereren. Verkeer van hoge kwaliteit is de sleutel tot betere leads en mogelijk hogere inkomsten.
- Het is geweldig voor mobiele gebruikers
Navigeren door sites kan moeilijk zijn met kleinere schermen. Het toevoegen van een website-header maakt de ervaring veel makkelijker bij mobiel browsen.
- Het maakt webpagina's makkelijker te vinden
Met een website-header zouden gebruikers een duidelijke richting hebben van waar ze zich op een website bevinden. Als ze naar een ander gedeelte van een site willen gaan, hoeven ze alleen maar naar de header van de website te verwijzen.
Tips voor het maken van een goede website-header
Wil je een uitzonderlijke website header maken? Er zijn bepaalde tips die je moet volgen, afhankelijk van wat je op je site wilt bereiken. Er zijn ook toepassingen die wel of niet werken op je website. Onthoud dat header teksten van websites afhankelijk moeten zijn van de structuur en doelen van je website, en niet andersom.
- Maak het eenvoudig, maar benadruk een specifiek kenmerk
Bekijk de website header van Pet Milestone Cards. Het is heel eenvoudig en duidelijk. Het heeft zelfs geen elementen die het onderscheiden van de rest van de startpagina.
In de header van hun website hebben ze hun logo in de linkerbovenhoek, terwijl de rest van de menu's goed verspreid zijn over de bovenkant.
Maar als je naar de knop "koop nu" kijkt, zie je dat deze is ingesloten in een gele ovaal, waardoor de rest van de inhoud wordt gemarkeerd. Alleen al door naar de header van de website te kijken, zie je dat wat ze willen bereiken, is dat hun producten meer opvallen.
Zorg ervoor dat je bepaalde kenmerken van je header benadrukt die naar je doelen zouden leiden.
- Voeg een vervolgkeuzemenu toe voor links onder vergelijkbare categorieën
Eerder hadden we het over navigatie. Naast het toevoegen van links bovenaan, kan je zelfs een vervolgkeuzemenu toevoegen voor elke navigatie.
Een goed voorbeeld van vervolg keuzemenu's zijn die van Fighting Pretty. Zoals je in de bovenstaande afbeelding kan zien, kan elk hoofdmenu worden uitgebreid om specifieke webpagina's te bekijken. Plaats de muisaanwijzer op elk menu en je ziet de rest.
Fighting pretty maakte ook gebruik van andere principes van een uitstekende website-header. Ze hebben hun logo, bedrijfsnaam en een functie die op de pagina wordt gemarkeerd. Als je meer website-inspiraties zoals deze wilt krijgen, ga dan naar de sjablonen en ontdek geweldige websites en website-headers.
- Maak de header van je website minimaal over een boeiende achtergrondafbeelding
Meestal wil je een header afbeelding plaatsen om de visuals te vergroten. Maar soms kan jij je header eenvoudiger, kleiner en minder opvallend maken om plaats te maken voor een geweldige achtergrondafbeelding.
Dit is een van de gevallen waarin visuals de functie overtreffen. Kijk eens naar de afbeelding hieronder. De website-header van Live Lite bevat slechts drie links. Het is wit, met een kleine lettergrootte waardoor het lijkt alsof het er nauwelijks is.
De reden waarom je deze oefening misschien wilt gebruiken, is wanneer je de aandacht van de gebruikers wilt afleiden naar belangrijkere gedeelten.
Live Lite houdt zich bezig met levenscoaching, dus gebruikten ze een geruststellend beeld van een man die eenvoudig over stilstaand water rust. De afbeelding wordt ondersteund door de naam van de website aan de linkerkant. Als je iets soortgelijks wilt bereiken voor de header van je website, zorg er dan voor dat je een afbeelding gebruikt die de kleine header goedmaakt.
Opmerking: afbeelding gehaald van Strikingly user website
- Kies voor iets eenvoudigs en toch functioneels
De website van Repurposeful UK is op zijn eigen manier geweldig. Met een uiterst eenvoudige website-header is het makkelijk om te zien dat ze meer waarde hechten aan functionaliteit en gemak dan aan esthetiek.
Elk menu in de header van hun website is opgedeeld in blokken die de gebruiker makkelijk kan zien. Het is ook groot genoeg om toegankelijk en makkelijk op te merken.
Zoals je kan zien in de afbeelding hierboven, hebben ze hun bedrijfslogo op de perfecte plek toegevoegd. In plaats van symbolen gebruikten ze specifieke teksten om elk menu een naam te geven.
Hun header rust correct op de hoofdafbeelding van hun startpagina. Het contrast tussen de kleurrijke achtergrond en de witte website header zorgt voor een evenwichtige uitstraling van de website.
Een website kan je helpen om je te onderscheiden van de concurrentie. Het vertegenwoordigt ook je autoriteit, merk en identiteit als website. Het is belangrijk om een goede website-header te maken voor zoekmachineoptimalisatie, beter verkeer en mobiel gebruik.
Als je de tips en goede toepassingen gebruikt, kan je verwachten dat je website-header zo opmerkelijk mogelijk is. Om een goede ervaring te hebben bij het maken van een website-header, ga je naar Strikingly, maak jij je gratis account aan en gebruik je de tools om een uitzonderlijke website-header te bouwen.
