Hero-sectie ontwerpen: het eerste scherm van je website

Een goed hero-sectieontwerp beantwoordt drie vragen voordat iemand scrolt: wat is dit, is het iets voor mij en wat doe ik nu. De hero is het eerste scherm van je site: meestal een kop, één ondersteunende zin, één hoofdknop en een beeld. Al het andere (logo’s, badges, een tweede knop, een carrousel) moet de ruimte rechtvaardigen die het van die vier afsnoept. Deze gids behandelt de woorden, de lay-out en de bouw; voor alleen de achtergrond zie je hero-achtergronden voor websites.

Wat er in een hero-sectie staat

De hero-kop schrijven

De kop is de moeilijkste zin op je site. Slimme slogans falen omdat ze bij iedereen kunnen horen. Een goede noemt voor wie het is, wat ze krijgen of welk probleem verdwijnt, in woorden die je klanten echt gebruiken. Lees hem hardop naast de homepage van een concurrent: kun je ze verwisselen zonder dat iemand het merkt, dan is hij niet specifiek genoeg.

Bewaar de ondersteunende regel voor het hoe of het bewijs, niet voor een herhaling. Voor meer over formuleren helpen teksten schrijven voor beeld en visuele hiërarchie.

Drie hero-lay-outs die werken

• Gecentreerd. Kop, regel en knop gestapeld in het midden boven een achtergrond. Sterk voor merken, lanceringen en producten die meer een gevoel zijn dan een scherm.
• Gesplitst. Woorden links, productbeeld of screenshot rechts. Het best als het product zien het argument is: apps, fysieke producten, eten.
• Beeld of video over de volle breedte. Een foto of loop vult het scherm met woorden over een rustig gebied. Past bij hotels, restaurants, evenementen en portfolio’s, mits de leesbaarheid goed geregeld is.

De oproep tot actie

Eén hoofdknop, visueel het sterkste element na de kop. Label hem met wat er daarna gebeurt, niet met een algemeen werkwoord: ‘Start een gratis proef’, ‘Reserveer een tafel’, ‘Bekijk het menu’. Voeg je een tweede optie toe, maak er dan een rustigere tekstlink van, zodat de twee nooit concurreren.

Hero-achtergronden en leesbaarheid

De achtergrond is de helft van de indruk en de meest voorkomende reden waarom een hero faalt. Drukke foto’s en felle gradiënten vechten met de kop en een donkere overlay over alles vlakt de sfeer af. Plan een rustig gebied achter de woorden, houd het drukste detail daarvandaan en controleer het contrast bij elke schermbreedte, want het gebied achter de tekst verschuift als de lay-out herschikt.

Hier is een Gradiently Mark nuttig: zijn rustigste, best contrasterende zone schuift achter je woorden en de letterkleur wordt gekozen uit zijn eigen palet, zodat de kop leest op 1920×1080 en op een telefoon, zonder vak of schaduw. Voor CSS-aanpakken zie je gradiëntoverlay en tekst op een gradiënt.

De hero ontwerpen voor telefoons

Op een telefoon is de hero smal en hoog, dus gesplitste lay-outs stapelen en beelden over de volle breedte worden fors bijgesneden. Beslis wat de telefoon toont in plaats van het te laten gebeuren: kop en knop moeten zichtbaar zijn zonder scrollen, het beeld kan eronder of kleiner.

.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}

Een checklist voor je hero-sectie

1. 1

   Schrijf eerst de kop

   Schrijf voordat je beelden kiest vijf koppen en kies de meest specifieke. De lay-out volgt de woorden.

2. 2

   Kort in tot één actie

   Kies de ene volgende stap die de meeste bezoekers moeten zetten en maak die de enige knop.

3. 3

   Kies een beeld dat bewijst of de sfeer zet

   Een screenshot, een productfoto of een achtergrond die het merk draagt. Geen stockfoto van mensen die naar laptops wijzen.

4. 4

   Controleer de leesbaarheid overal

   Verklein de browser van breed naar smal en let de hele weg op de tekst tegen de achtergrond.

5. 5

   Houd het snel

   De heroafbeelding is vaak het grootste op de pagina. Geef hem het juiste formaat en lever WebP of AVIF.

De hero opent de pagina; de rest van de pagina moet de belofte waarmaken. Landingspagina ontwerpen behandelt de secties die volgen.