Wat is de hero section op een website + 30 voorbeelden van hero section designs

Wat is een hero section?

De hero section is het eerste dat iemand ziet die als ze op je site komen. De hero section is namelijk het bovenste gedeelte van een webpagina, vaak direct onder de navigatiebalk. Wat hier staat is belangrijk want net is de eerste indruk die je bezoekers krijgen van wie je bent en wat je doet.

De hero section bevat meestal een opvallende afbeelding of video, een pakkende koptekst, een korte beschrijving en/of een call-to-action (CTA), zoals een knop waarmee bezoekers direct door kunnen klikken naar bijvoorbeeld je diensten.

Een goede Nederlandse term voor “hero section” bestaat trouwens niet echt. Daarom wordt vaak de Engelse term behouden, ook in Nederlandse context.

De belangrijkste elementen van een effectieve hero section

Een sterke hero section trekt niet alleen de aandacht, maar maakt ook meteen duidelijk waar de site over gaat en zorgt ervoor dat bezoekers blijven hangen. Deze elementen kunnen er allemaal staan op een hero section van een website:

  1. Een pakkende koptekst Het beste zijn korte, krachtige zinnen die je doelgroep aanspreken. Het is verleidelijk om hier iets leuks en taal technisch grappigs /cryptisch neer te zetten maar dan is de kans groot dat mensen niet snappen wat het betekent. Maak die keuze dus wel bewust.
  2. Korte informatieve tekst Wil je meteen wat meer vertellen over je site, zet dan een korte tekst in je hero section. Let op, hou het kort anders leest niemand het.
  3. Foto, video of illustratie Let er altijd op dat je foto of video van hoge kwaliteit is. Natuurlijk wat betreft het beeld maar zeker ook qua resolutie want als je het beeld over de hele breedte van je de hero section wil laten zien moet deze minimaal 1600 pixels breed zijn.
  4. Een duidelijke call-to-action Wil je dat je bezoekers een bepaalde actie nemen op je site, zet dit dan meteen in je hero section. Bijvoorbeeld een knop naar je diensten, je nieuwste producten of aankomend event.

 

Een combinatie van een of meerdere van deze elementen kan natuurlijk ook.

Belangrijk bij het ontwerpen van een hero section

  1. Consistentie in branding
    Zorg ervoor dat kleuren, lettertypes en stijlelementen consistent zijn met de rest van je website en jouw merkidentiteit.
  2. Responsief ontwerp
    De hero section moet er goed uitzien op zowel desktop, tablet als mobiel.

7 soorten designs voor hero sections, met voorbeelden

Het ideale ontwerp van een hero section hangt af van je huisstijl en branding, het doel van je website en je doelgroep. Ik heb een onderverdeling gemaakt met soorten designs voor hero sections. Natuurlijk zijn er ook designs die niet helemaal vallen in een van deze categorieën of die meer een combi zijn van meerdere categorieën.

01

Twee kolommen

Deze zie je waarschijnlijk het vaakst: de hero section bestaat uit twee ‘kolommen’. In de ene kolom staat een titel, een korte tekst en eventueel een button (CTA), en in de andere kolom staat een afbeelding. Dit type is overzichtelijk en zorgt voor een goede balans tussen tekst en beeld.

Voorbeelden websites met een hero met twee kolommen

02

Video/foto op beeldvullend

Bij dit type hero section wordt een grote video of afbeelding als achtergrond gebruikt, terwijl de eventuele inhoud zoals bijvoorbeeld tekst en call-to-actions daar bovenop geplaatst worden.

Voorbeelden websites met beeldvullend foto/video

03

Gestapeld

Hier worden de elementen (tekst, afbeelding en call-to-action) onder elkaar geplaatst, in plaats van naast elkaar. Dit werkt goed op mobiele apparaten en geeft een strakke, verticale presentatie die makkelijk te scannen is.

Voorbeelden websites met de content gestapeld in de hero section

04

Beeld om tekst

In deze opzet wordt beeld niet als achtergrond of in een aparte kolom gebruikt, maar rondom de tekst geplaatst. Dit zorgt voor een speels en creatief ontwerp dat vaak opvalt en de aandacht trekt.

Voorbeelden websites met een hero section met beeld om tekst

05

Big text

Een grote titel met opvallende vormgeving, eventueel geanimeerd vult deze hero section. Eventueel staat er ook nog andere aanvullende tekst op en/of beeld in de vorm van illustraties of animaties om de grote titel heen.

Voorbeelden websites met grote tekst in de hero section

06

Alleen tekst

Niet te verwarren met de Big Text hero section waar een (korte) tekst met opvallende vormgeving en eventueel animatie vooral visueel moet opvallen. In een hero section met alleen tekst gaat het juist en vooral om de inhoud van de tekst en deze optie is dus goed om informatie (over de site) over te brengen.

Voorbeelden websites met alleen tekst in de hero section

07

Keuzes

Wil je de bezoeker meteen een bepaalde richting opsturen op je site, zet dan in de hero section meerdere items waaruit gekozen moet worden. Bij een webshop voor kleding kan je bezoekers bijvoorbeeld meteen een keuze geven tussen heren-, dames- en kinderkleding. Als het niet heel duidelijk is wat mensen moeten kiezen en ze bijvoorbeeld eerst willen lezen wat verschillende diensten inhouden dan is deze soort hero section niet geschikt.

Voorbeelden websites met een hero section met keuzes

Maak indruk met je hero section!

De hero section is dé plek waar je de aandacht van je bezoekers wint én vasthoudt. Door te kiezen voor een ontwerp dat opvalt en perfect aansluit bij jouw merk en doelgroep, maak je niet alleen een goede eerste indruk, maar vergroot je ook de kans dat bezoekers verder de website verkennen.

Welke stijl je ook kiest, zorg ervoor dat je hero section consistent, helder en aantrekkelijk is.

Ben jij blij met je huidige site en hero section? Of denk je na het zien en lezen over de vele mogelijkheden van een hero section dat daar wel wat spanneders van te maken is? Dan help ik je graag verder!

Lees meer over de mogelijkheden van webdesign.

hero section
volgende

de laatste posts

De toolkit is onderweg naar je mailbox!

Maar wacht even! Ik heb nog iets leuks voor je.

Volg nu de cursus Canva Basics voor Instagram met 50% korting!
basis canva cursus voor instagram

Leer de ins & outs van Canva om eindelijk echt goede en mooie ontwerpen te maken voor Instagram (of voor iets anders). 

Met de code tools betaal je nu maar €25 ipv €50 voor de cursus!

De toolkit is onderweg naar je mailbox!

Maar wacht even! Ik heb nog iets leuks voor je.

Volg nu de cursus Canva Basics voor Instagram met 50% korting!
basis canva cursus voor instagram

Leer de ins & outs van Canva om eindelijk echt goede en mooie ontwerpen te maken voor Instagram (of voor iets anders). 

Vul bij het afrekenen de code doemijdiecanvakorting in en betaal €25 ipv €50 voor de cursus!

de canva template is onderweg naar je mailbox!

Maar wacht even! Ik heb nog iets leuks voor je.

Volg nu de cursus Canva Basics voor Instagram met 50% korting!
basis canva cursus voor instagram

Leer de ins & outs van Canva om eindelijk echt goede en mooie ontwerpen te maken voor Instagram (of voor iets anders). 

Vul bij het afrekenen de code doemijdiecanvakorting in en betaal €25 ipv €50 voor de cursus!