In het verleden verwees een “header” in webdesign meestal naar de altijd aanwezige strook bovenaan websites die het logo, de navigatiebalk en misschien wat contactgegevens en een zoekbalk bevatte. Tegenwoordig verwijst een “header” vaker naar de volledige ruimte boven de vouw op de startpagina.
Niet als iemand uw site heeft gevonden via een blogbericht dat is gedeeld op sociale media of via een verwijzing op een andere site, is de kans groot dat ze uw site binnenkomen via de startpagina. En het eerste wat ze zullen zien is dat prime onroerend goed bovenaan, blootgelegd.
Ik heb eerder geschreven over hoe bezoekers beter reageren op de voorspelbare plaatsing van bepaalde elementen op uw website (zoals het logo en de CTA). Door een website te ontwerpen met het doel om aan hun verwachtingen te voldoen en hun comfort te vergroten door de ervaring wat voorspelbaarder te maken, kun je het aantal doorkliks en conversies effectief verbeteren.
Nou denken aan die headerruimte op de startpagina.
De meeste mensen vertrouwen op startpagina’s om ze in vogelvlucht te laten zien waar een bedrijf of website over gaat, wat betekent dat u het zich niet kunt veroorloven deze kans te missen om aan die verwachting te voldoen. Natuurlijk kan het ontwerp van de header van uw startpagina uniek zijn voor uw merk, maar de elementen die erin voorkomen zouden dat echt niet moeten zijn. Bezoekers verwachten dat ze niet hoeven te scrollen om te weten te komen wat een site voor hen gaat doen. In wezen moet uw header een verhaal van 10 seconden zijn dat uw bezoekers bewijst welke waarde de site voor hen zal zijn.
Dus, wat gaat u doen met deze ruimte om de interesse van uw bezoekers te boeien?
Laten we het hebben over enkele van de trends in headerontwerp in 2017, wat u kunt doen om gebruik te maken van dit zeer zichtbare onroerend goed, en een kijkje nemen naar enkele interessante voorbeelden van headers langs de weg.
14 Trends in Header Web Design in 2017
Het is niet alsof uw bezoekers zich niet bewust zijn van hun vermogen om naar beneden te scrollen op een pagina of door een navigatie te klikken om meer te weten te komen over het merk achter een site. Maar waarom zouden ze dat moeten doen? Er is genoeg ruimte in de header om een beknopte boodschap te geven die hen alles vertelt wat ze moeten weten. En als 50 woorden of minder niet genoeg is, zal de achtergrondafbeelding of het ontwerp de rest van het verhaal communiceren.
Voor alles kan de header van de startpagina de eerste indruk van uw bezoekers maken of breken, daarom is het zo belangrijk om dit gedeelte te nagelen.
Als je moeite hebt om een manier te vinden om je site met een knal te beginnen, vind je misschien wat inspiratie in de volgende headerontwerptrends van 2017:
Oversized Hero Image
Dankzij de modulaire stijl van het ontwerpen van sites om responsief te zijn, zijn de meeste ontwerpen nu opgedeeld in afzonderlijke blokken en secties. Deze ontwerpstijl leent zich toevallig goed voor de heldenafbeeldingen over de volle breedte die op zoveel websites te zien zijn.
Neem bijvoorbeeld de website van Cleverbird Creative. Het maakt gebruik van een enkelvoud en opvallende beeld overlaid met eenvoudige tekst om bezoekers te verwelkomen. Het is duidelijk waar ze hier voor gaan: vereenvoudigde schoonheid.
Sliding Images
Ik denk dat er een tijd is geweest, niet al te ver in het verleden, dat velen van ons vraagtekens zetten bij de slider als een levensvatbaar ontwerpelement. Veel ontwerpers hebben er echter goed gebruik van gemaakt in headers. Er zijn schuifafbeeldingen die automatisch van de ene mooie hoge-resolutie afbeelding naar de volgende scrollen en er zijn er zoals die van Pierre die bezoekers smeken om die ervaring zelf in de hand te nemen.
Transformatieve Parallax-afbeeldingen
Parallax scrolling is nog steeds sterk in opkomst en de header heeft bewezen de perfecte plaats te zijn om dit soort visuele “illusie” toe te passen op webontwerpen. Wat je de laatste tijd echter het meest ziet, is dat ontwerpers hun parallax scroll een transformerend randje geven, waarschijnlijk om bezoekers te verrassen met het onverwachte resultaat van de scroll. Het Australische UX-designbureau August heeft precies dat gedaan met hun header.
Video-achtergronden
De video-achtergrond is nog zo’n recente trend die echt het beste werkt als hij wordt toegepast op de header van de startpagina. Deze van Le 28 zet de toon voor de website van het restaurant, met video’s van de voor- en achterkant van de eetgelegenheid.
Verborgen navigatie
Hoewel men zou kunnen aanvoeren dat het hamburgermenu thuishoort op websites die op mobiele apparaten worden bekeken (zoals oorspronkelijk de bedoeling was), valt er wel iets te zeggen over wat een dergelijk minimalistisch navigatiesysteem voor de header doet. De website van +rehabstudio is daar een mooi voorbeeld van. Door de navigatie weg te stoppen, wordt je aandacht direct getrokken door de spannende beelden binnen het plusteken… en dan realiseer je je dat er kleine animaties omheen zitten.
Brand Mascot
Als de header de plaats is om bezoekers aan uw site voor te stellen, is er dan geen betere manier om dit te doen dan door ze voor te stellen aan de “personages” die ze onderweg zullen ontmoeten? Als uw site gebruikmaakt van merkmascottes, zoals op de site van WPMU DEV, is dit het moment en de plaats om ze te laten zien.
Oogstrelende typografie
Er kan veel worden gedaan om de typografie van uw site een facelift te geven. Soms gaat het er echter niet om het mooiste cursieve lettertype te kiezen dat je de mensen voor de voeten kunt werpen. Als je naar het voorbeeld van Slack hierboven kijkt, zie je dat het allemaal om de grootte van het lettertype gaat. Er is niet echt iets speciaals aan de typografie die ze hebben gekozen, maar het is zo schoon en duidelijk. Dat in combinatie met de grootte van de hoofdboodschap maakt het zo opvallend.
Content first
Voor websites die zich primair richten op het leveren van massa’s content aan bezoekers (denk aan een grote nieuwssite of blog), is een content-first-strategie voor de header het meest zinvol. Het heeft echt geen zin om hier woorden aan vuil te maken. Mensen zijn naar uw site gekomen om uw inhoud te lezen, ze hoeven niet te worden opgehouden door extra leesvoer op de startpagina, dus u kunt meteen ter zake komen zoals Glamour doet.
Products first
Op dezelfde manier hoeven e-commercesites de header niet te gebruiken om een pakkende kop te schrijven of een video met uitleg over het bedrijf te tonen. Bezoekers weten waarvoor ze naar de site zijn gekomen, dus je kunt er meteen mee aan de slag. In tegenstelling tot aanbieders van inhoud, kunnen verkopers van producten dit onroerend goed gebruiken om hun best verkopende producten of nieuwste releases te tonen en bezoekers verder te verleiden, zoals Apple doet.
CTA Front-and-Center
Er kan een moment komen dat uw site iets heel bijzonders heeft om aan bezoekers te laten zien, iets wat u wilt dat ze downloaden of kopen. Ook al is dat misschien niet de belangrijkste attractie van je site, je kunt de header tijdelijk of permanent gebruiken om deze speciale call-to-action onder de aandacht te brengen, zoals de blogger van Everywhereist doet met haar boek.
Vibrante kleuren en texturen
Een van de leukste dingen die uit Google Material Design is voortgekomen, is misschien wel onze bereidheid om meer levendige kleuren, lagen en kleurverlopen te gebruiken in webdesign. Ze hoeven niet langer beperkt te blijven tot call-to-action-knoppen, maar kunnen worden gebruikt voor hele blokken op de website, zoals Stripe doet met hun kleurrijke en getextureerde header.
Animation
Er is absoluut niets mis met een statisch headerontwerp voor de startpagina, vooral niet als u de aandacht wilt vestigen op een CTA of video. Houd het eenvoudig, zodat er geen afleidingen zijn die bezoekers ervan weerhouden de actie te ondernemen die u voor ogen hebt. Maar voor websites die een interessante manier willen om hun boodschap met lezers te delen, kunnen animaties een verstandige keuze zijn. De Baianat gebruikt een kleine animatie om een aantal boodschappen binnen dezelfde ruimte te delen, waardoor het er niet rommelig of overvol met informatie uitziet.
Geometrische ontwerpen
Geometrisch webdesign is op dit moment heel populair, omdat het zich goed leent voor de logische en strakke lijnen die nodig zijn voor responsive design. Het is dan ook geen verrassing dat we steeds meer websites zien, zoals die van Perspective API, die geometrische elementen integreren in het ontwerp van de header. Er zijn andere websites, zoals Stripe en WPMU DEV, die diagonale lijnen gebruiken om een uniek en onverwacht visueel landschap voor bezoekers te creëren.
Experimenteel
Ten slotte komen we bij experimentele headerontwerpen. Het belangrijkste hierbij is meestal niet dat de header bizar vreemd en ongewoon is. Dat zou te afleidend zijn voor bezoekers. In plaats daarvan moet je je richten op het creëren van een onverwacht effect, veroorzaakt door de simpele beweging over de header.
Neem bijvoorbeeld het Teamgeek ontwerp. U kunt zien dat er iets “off” over het logo en de boodschap in het midden van de pagina, maar het is niet totdat je bezig bent met het dat je je realiseert dat er een speciale twist ingebouwd.
Wrapping Up
Zoals u kunt zien, zijn er een verscheidenheid van manieren waarop u een header voor een WordPress-site kunt ontwerpen. Als u goed kijkt naar de bovenstaande voorbeelden, zult u zien dat de ontwerpers zeer strategisch waren over welke stijl van header ze gebruikten en welke elementen erin werden opgenomen. Wanneer het tijd is om een header te ontwerpen voor uw volgende websiteproject, bedenk dan of u het volgende nodig hebt:
- Logo
- Traditioneel vs. verborgen
- Hero header gedeelte vs.
- Tagline of mission statement
- Contactinformatie
- links naar sociale media
- Zoekbalk
- Meertalige toggle
- Winkelwagentje
- Brand mascotte
- Stockfotografie vs. Echte fotografie van het bedrijf, de mensen of het product
- Statische afbeelding vs. verschuifbare afbeeldingen vs. achtergrondvideo
- Embedded promo video
- Call-to-action knop
- Contactformulier
- Hallobalk
U vindt misschien ook andere items die in deze bovenste header-sectie van uw startpagina thuishoren. Het komt er eigenlijk op neer wat het meest zinvol is voor je site. Met andere woorden, welke elementen vertellen het verhaal van uw merk, informeren en binden uw publiek direct vanaf het begin, en wekken voldoende vertrouwen om hen door uw site te leiden?
Tags:
- design
- headers