Design af hero-sektion: den første skærm på din hjemmeside

Godt design af en hero-sektion besvarer tre spørgsmål, før nogen scroller: hvad er det her, er det til mig, og hvad gør jeg nu. Heroen er den første skærm på dit site, som regel en overskrift, én støttende sætning, én hovedknap og et visuelt element. Alt andet (logoer, mærker, en ekstra knap, en karrusel) skal retfærdiggøre den plads, det tager fra de fire. Denne guide dækker ordene, layoutet og opbygningen; for selve baggrunden, se hero-baggrunde til hjemmesider.

Hvad hører til i en hero-sektion

Skriv overskriften til heroen

Overskriften er den sværeste sætning på dit site. Smarte slogans fejler, fordi de kunne tilhøre hvem som helst. En god overskrift nævner, hvem det er til, hvad de får, eller hvilket problem det fjerner, med ord dine kunder faktisk bruger. Læs den højt ved siden af en konkurrents forside: hvis du kunne bytte dem om, uden at nogen opdagede det, er den ikke konkret nok.

Brug den støttende linje til hvordan eller beviset, ikke til en gentagelse. Mere om formuleringer finder du i tekst til visuelt indhold og visuelt hierarki.

Tre hero-layouts, der virker

• Centreret. Overskrift, linje og knap stablet i midten over en baggrund. Stærkt til brands, lanceringer og produkter, der mere er en følelse end en skærm.
• Delt. Ord til venstre, produktbillede eller skærmbillede til højre. Bedst, når det er produktet selv, der er argumentet: apps, fysiske varer, mad.
• Billede eller video i fuld bredde. Et foto eller en loop fylder skærmen med ord over et roligt område. Passer til hoteller, restauranter, events og porteføljer, hvis læsbarheden håndteres ordentligt.

Opfordringen til handling

Én primær knap, visuelt det stærkeste element efter overskriften. Giv den en tekst, der siger, hvad der sker nu, ikke et generisk verbum: »Start en gratis prøveperiode«, »Book et bord«, »Se menukortet«. Tilføjer du en sekundær mulighed, så gør den til et mere afdæmpet tekstlink, så de to aldrig konkurrerer.

Hero-baggrunde og læsbarhed

Baggrunden er halvdelen af indtrykket og den mest almindelige grund til, at en hero fejler. Travle fotos og klare gradienter kæmper mod overskriften, og et mørkt lag over det hele gør stemningen flad. Planlæg et roligt område bag ordene, hold de travleste detaljer væk fra dem, og tjek kontrasten i alle skærmbredder, for området bag teksten flytter sig, når layoutet ombrydes.

Her er en Gradiently Mark nyttig: dens roligste område med bedst kontrast flytter sig bag dine ord, og skriftfarven vælges fra dens egen palet, så overskriften kan læses i 1920×1080 og på en telefon uden en boks eller en skygge. Til CSS-tilgange, se gradient-overlay og tekst på en gradient.

Design heroen til telefoner

På en telefon er heroen smal og høj, så delte layouts stables, og billeder i fuld bredde beskæres hårdt. Beslut selv, hvad telefonen viser, i stedet for at lade det ske: overskriften og knappen skal være synlige uden at scrolle, mens det visuelle element kan flytte ned eller blive mindre.

.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;
}

En tjekliste til hero-sektionen

1. 1

   Skriv overskriften først

   Før du vælger billeder, så skriv fem overskrifter, og vælg den mest konkrete. Layoutet følger ordene.

2. 2

   Skær ned til én handling

   Vælg det ene næste skridt, du vil have de fleste besøgende til at tage, og gør det til den eneste knap.

3. 3

   Vælg et visuelt element, der beviser eller sætter stemningen

   Et skærmbillede, et produktfoto eller en baggrund, der bærer brandet. Ikke et stockfoto af folk, der peger på bærbare computere.

4. 4

   Tjek læsbarheden overalt

   Træk browseren fra bred til smal, og hold øje med teksten mod baggrunden hele vejen.

5. 5

   Hold den hurtig

   Herobilledet er ofte det største på siden. Giv det den rigtige størrelse, og server WebP eller AVIF.

Heroen åbner siden; resten af siden skal holde løftet. Design af landingssider dækker de sektioner, der følger.