De header speelt een sleutelrol in het ontwerp van een website en zet de toon voor elk ander aspect ervan. Vooral nu in het tijdperk van het triomfantelijke minimalisme, waarin verschillende oogsnoepjes vaak meedogenloos maar eerlijk worden uitgewist. Soms is er niets anders meer voor het oog om op te vallen, dus de rol van website header design is aanzienlijk toegenomen.
Web ontwerpers steken veel moeite in het ontwerpen van dit deel van een website met creativiteit en productiviteit in het achterhoofd. Volgens Google duurt het slechts 50 ms om een mening over een website te vormen en sommige meningen ontwikkelen zich binnen de ongelofelijke 17 ms. De kennismaking van consumenten met een merk begint hier.
Om te leren hoe je een website header die werkt te ontwerpen, en welke elementen het moet omvatten, lees dan verder, er zullen voorbeelden.
“Het leven is een eerste indruk. You get one shot at it.
Make it everlasting.”
– J.R. Rim
Een website header is het bovenste gedeelte van de webpagina. Vroeger zagen mensen headers als smalle stroken in de bovenste delen van de websites die een logo, een oproep tot actie en contactinformatie bevatten. Maar in modern design wordt de hele ruimte boven de vouw van de homepage beschouwd als een header.
Als het strategische deel van de pagina dat mensen zien in de eerste seconden van het laden van een website, fungeert een header als een soort uitnodiging. Het moet basisinformatie geven over een site, zodat gebruikers binnen enkele seconden kunnen begrijpen wat de site te bieden heeft.
Sommige ontwerpers maken aparte headers voor verschillende secties van de site. U kunt bijvoorbeeld een grote header maken voor een homepage en een kleine strook laten voor andere pagina’s. Maar houd het consistent. Het ontwerp van de header op de binnenpagina moet een verkorte versie zijn van de header op de hoofdpagina. Dit is een goede praktijk voor het ontwerpen van websites.
- Wat houdt de header van een website in?
- Best website header design practices
- Headergrootte
- Visuele hiërarchie
- Vaste (sticky) header
- De boodschap die door een header wordt overgebracht
- Relevante afbeeldingen
- Video of animatie
- Een goed ontworpen call to action
- Beste lettertypen voor websiteheaders
- Simpel ontwerp van de header
- Verborgen navigatie (hamburger menu)
- Mobiel headerontwerp
- In conclusie
Wat houdt de header van een website in?
Het is de taak van de header om gebruikers antwoorden te geven op de basisvragen: welk merk wordt vertegenwoordigd, welke goederen en diensten worden aangeboden, hoe kan men in contact komen met de medewerkers van het bedrijf, zijn er lopende aanbiedingen, enzovoort.
Naast dat, vertegenwoordigt het ook de kwaliteit en zelfs de identiteit van een website. Als de header een goede emotionele reactie oproept, en de kijker het gevoel heeft dat er iets van waarde staat, dan heb je de eerste test doorstaan.
De belangrijkste elementen van een website header zijn meestal:
- logo of brand identifier
- call to action
- tekst of headline
- navigatie-elementen
- search.
Je hoeft ze niet allemaal in één keer toe te voegen. Het is noodzakelijk een evenwicht te vinden tussen de overvloed aan informatie en de harmonieuze rangschikking ervan. Gebruik alleen de gegevens die je nodig hebt, overladen van een header zou niet gunstig blijken, hoe belangrijk alle links ook lijken.
De header te leeg laten is ook geen goed idee. Een gebruiker die uw interface niet in een paar seconden doorgrondt, zal hoogstwaarschijnlijk vertrekken en niet terugkeren. Een slechte header kan bezoekers wegduwen naar een andere site met inferieure inhoud.
In minimalistische headers’ ontwerpen, worden alleen de links naar de belangrijkste secties van de website en het bedrijfslogo gepresenteerd. Deze techniek is vooral handig bij het ontwerpen van landingspagina’s.
Best website header design practices
Niets beperkt uw creativiteit als het gaat om het ontwerpen van de header sectie. De kop van de site is een gebied dat open staat voor een breed veld van creatieve ontwerpbeslissingen, die gedenkwaardig, beknopt en nuttig moeten zijn.
Laten we de belangrijkste punten doornemen.
Headergrootte
Er is geen definitief antwoord op de vraag hoe groot de headerafbeelding van een website moet zijn. Sommige bronnen proberen reeksen nauwkeurige cijfers te verstrekken, maar vandaag de dag is een van de moeilijkste aspecten van het bouwen van websites het waarborgen van de effectiviteit van elke schermgrootte. En zelfs als twee schermen dezelfde grootte hebben, kan de resolutie verschillen, zodat de gebruikers niet hetzelfde zullen zien.
Dus fixeer je niet op het exacte pixelconcept, maar volg beter eenvoudige regels van gezond verstand.
De header moet een zodanige hoogte hebben dat het niet interfereert met de perceptie van de inhoud. Voor informatieve bronnen zou een kleine header een goede keuze zijn, terwijl voor landingsplaatsen de header groter mag zijn.
In het geval van volumineuze headers is het beter wat ruimte onder de vouw te laten, zodat een gebruiker een glimp opvangt van wat er verder op de pagina komt en begint te scrollen.
Visuele hiërarchie
Nielsen Norman Group formuleerde zijn theorie over het F-vormige patroon van lezen op het web voor het eerst in 2006, en deze heeft tot op de dag van vandaag zijn relevantie niet verloren.
Een persoon die zich op een nieuwe, onbekende site bevindt, begint zijn visuele reis altijd vanuit de linkerbovenhoek van het scherm. En als ze daar niet de verwachte informatie vinden, dan wordt de pagina automatisch gezien als lastig en niet-standaard, wat te veel inspanning vraagt om te begrijpen.
Logo. Uit een ander onderzoek, uitgevoerd door de NN/g, is gebleken dat gebruikers merken waarvan het logo links is geplaatst veel beter onthouden dan merken die in het midden of rechts zijn geplaatst.
Als u een rond logo hebt, is het aanvaardbaar om het in het midden van het scherm te plaatsen, hoewel het nog steeds minder effectief zal zijn in vergelijking met merken die links zijn geplaatst.
Navigatie. Let goed op dat dit deel van de website niet te vol is. Te veel links overweldigen bezoekers. Soms is een hele make-over van de structuur van een website op zijn plaats om wat ruimte vrij te maken voor de belangrijkste categorieën.
Maak het bezoekers gemakkelijk te begrijpen waar ze zijn, en hoe ze hun weg verder kunnen vinden. Gebruik hover-effecten om gebruikers te begeleiden terwijl ze navigeren.
Oproep tot actie. Pas de principes van visuele hiërarchie toe om een CTA op natuurlijke wijze te markeren.
Vaste (sticky) header
Persistente navigatiebalken, of met andere woorden “sticky headers”, houden in dat de navigatie u over de pagina volgt terwijl u scrollt. Dit is nu een standaard in webdesign.
Maak de header vast als het niet in strijd is met je algemene ontwerpconcept. Het is een goed idee voor zowel desktop- als mobiele ontwerpen:
- E-commerce websites – het winkelwagentje staat altijd voor de gebruiker.
- Service websites – het telefoonnummer of een CTA zijn constant in beeld.
Vaste headers verbeteren de klantervaring, houden gebruikers georiënteerd en geven ze meer controle.
De boodschap die door een header wordt overgebracht
Voordat u een header ontwerpt, moet u rekening houden met de algehele stijl van de website en het belangrijkste doel ervan.
Als het een promotionele website is die bedoeld is voor de presentatie van een product, kan het ontwerp van de header links bevatten naar de belangrijkste secties, gecombineerd met een grote hero-afbeelding op het eerste scherm, aangezien het belangrijkste doel van een dergelijke website is om het product effectief te presenteren. In het geval van e-commerce of zakelijke websites, kan de situatie anders zijn. Een gebruiker moet gemakkelijk navigeren, weten over de laatste aanbiedingen, hoe snel contact op te nemen met de manager en waar de bestellingen die ze al hebben gemaakt te zien, dus in dit geval, de header kan meer beknopt plaats te maken voor andere categorieën.
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
- leuk zijn, enz.
De keuze hangt af van het doel van een bepaalde website.
Relevante afbeeldingen
De afbeelding in de header moet direct informatie over het bedrijf overbrengen. Bijvoorbeeld, als het de voedselleveringsdienst vertegenwoordigt, dan zou het beeld een keurige koerier met esthetisch aantrekkelijk voedsel kunnen afbeelden. In het algemeen moet de bezoeker, na het zien van uw site, iets van u willen kopen.
Hoge kwaliteit foto’s. Fotografie is een krachtig instrument voor webdesigners. Het kan een verhaal vertellen, emotie oproepen en uw bezoekers motiveren om verder te scrollen. Voor sites met krachtig opvallende beelden kunt u proberen een transparante header te maken. Zo worden de afbeeldingen beter weergegeven, terwijl de belangrijkste links behouden blijven.
Sliding images. Als u een aantal geweldige foto’s hebt die het bedrijf van de website vertegenwoordigen, ga uw gang! Gebruikers kunnen scrollen door een set van prachtige hoge-resolutie afbeeldingen.
Illustraties. Headerafbeeldingen voor websites moeten de juiste snaar raken en een persoonlijke band tot stand brengen. Beter als een afbeelding is duidelijk en gemakkelijk herkenbaar, zelfs als uitgesneden uit de website header. U kunt dit bereiken door in te spelen op de huidige trend voor illustraties.
Video of animatie
Geef niet alleen aandacht aan statische afbeeldingen.
Het toevoegen van video behoort tot de meest efficiënte website header-ideeën. Indien mogelijk, probeer een thematische video materiaal toe te voegen in een header. Veel websites gebruiken het om het publiek te boeien terwijl ze hun bedrijf of product op de best mogelijke manier presenteren.
Een andere manier om uw ontwerp nog aantrekkelijker, levendiger en gedenkwaardiger te maken, is door animatie toe te voegen. Het kan echt cool website headers te maken. Als u op zoek bent naar een interactieve webpagina die kijkers boeit, is de animatie een geweldig alternatief.
Een goed ontworpen call to action
Tijdens het ontwerpen van een webheader voegt de ontwerper enkele call to action-elementen toe, zoals “log in”, “sign-in”, “get in touch”, enzovoort. Om de aandacht van de gebruiker te trekken, zodat het resulteerde in de benodigde actie, moet de knop een inscriptie bevatten die begrijpelijk is voor de klant en opvallen tussen andere inhoud.
Een call to action plaatsen op een strategisch belangrijke locatie is een perfecte gelegenheid om gebruikers aan te sporen om direct in het begin actie te ondernemen, waardoor uw conversiepercentage wordt verhoogd. Sommige CTA’s kunnen gedurende een bepaalde periode worden gebruikt om speciale aanbiedingen te promoten, andere hebben een langdurige aanwezigheid.
Beste lettertypen voor websiteheaders
In de eerste plaats ziet de klant de namen van de rubrieken en de informatie die door het bedrijf wordt verstrekt: contactgegevens, interessante aanbiedingen. Daarom moet u duidelijke, leesbare lettertypen kiezen, die de waarneming niet belemmeren en op het eerste gezicht begrijpelijk zijn.
Voor grote homepage-headers kunt u wat vetgedrukte typografie en fantasievolle elementen gebruiken om de aandacht van de gebruikers te trekken, anders kunt u beter geen fancy lettertypen kiezen die moeilijk leesbaar kunnen zijn.
Simpel ontwerp van de header
Door een header goed afgebakend en netjes te houden, zullen uw bezoekers het gevoel krijgen dat u hen niet probeert te belasten met uw aanbiedingen. Een creatieve header voor een website kan er heel eenvoudig uitzien.
Dit is een oplossing die steeds vaker wordt gebruikt voor het ontwerpen van websites. Het hamburgermenu is een klein pictogram met drie strepen, dat het volledige menu weergeeft wanneer erop wordt geklikt. Deze techniek wordt gebruikt door ontwerpers wanneer zij zich moeten concentreren op het hoofdscherm.
Vanuit het oogpunt van bruikbaarheid van de site, is dit een goede optie. Een dergelijk menu is afkomstig van mobiel ontwerp en is al bekend bij gebruikers. De hamburger is geschikt voor promotiesites, waar de nadruk vooral ligt op de hoogwaardige presentatie van het product met behulp van foto’s of video’s. Voor online winkels is deze optie wellicht minder geschikt, omdat het voor de klant belangrijk is om snel toegang te hebben tot een winkelmandje, geselecteerde producten en een zoekveld.
Mobiel headerontwerp
De header moet niet alleen op de desktopversie van de website goed worden weergegeven, maar ook op de mobiele. Hij moet dus responsive zijn en zich goed kunnen aanpassen aan elk mobiel apparaat.
Het dagelijkse gebruik van mobiele apparaten heeft geleid tot website-ontwerpen die er zelfs in hun desktop-incarnaties mobiel-georiënteerd uitzien. Bijvoorbeeld, de implementatie van grote hero afbeeldingen en hamburger menu’s heeft zijn oorsprong in mobiel ontwerp.
In conclusie
De website wordt gepresenteerd door zijn header. Het is als een uniek visitekaartje. Besteed daarom bij het ontwerpen van een website maximale aandacht aan de header.
En nog een laatste best practice van een website header design: breng regelmatig wijzigingen aan om uw website fris en up-to-date te houden. Gebruik enkele inzichten uit dit artikel.