Design av hero-seksjon: nettstedets første skjerm

Godt design av hero-seksjon svarer på tre spørsmål før noen scroller: Hva er dette, er det for meg, og hva gjør jeg videre? Hero-seksjonen er nettstedets første skjerm, vanligvis med en overskrift, én støttesetning, én hovedknapp og et visuelt element. Alt annet, som logoer, merker, en ekstra knapp eller en karusell, må rettferdiggjøre plassen det tar fra disse fire. Denne guiden dekker ordene, layouten og byggingen. For bare bakgrunnen, se bakgrunner til nettstedets hero-seksjon.

Dette hører hjemme i en hero-seksjon

Skriv hero-overskriften

Overskriften er nettstedets vanskeligste setning. Smarte slagord svikter fordi de kunne tilhørt hvem som helst. En god overskrift sier hvem tilbudet er for, hva de får eller hvilket problem det fjerner, med ord kundene faktisk bruker. Les den høyt ved siden av en konkurrents forside. Kan du bytte dem uten at noen merker det, er den ikke konkret nok.

Bruk støttelinjen til fremgangsmåten eller beviset, ikke til en gjentakelse. Skriv tekst til visuelle flater og visuelt hierarki hjelper med ordvalg.

Tre hero-layouter som fungerer

• Sentrert. Overskrift, linje og knapp stablet i midten over en bakgrunn. Sterkt til merkevarer, lanseringer og produkter som er mer en følelse enn en skjerm.
• Delt. Ord til venstre, produktbilde eller skjermbilde til høyre. Best når synet av produktet er argumentet: apper, fysiske varer og mat.
• Heldekkende bilde eller video. Et bilde eller en sløyfe fyller skjermen med ord over et rolig område. Passer til hoteller, restauranter, arrangementer og porteføljer hvis lesbarheten håndteres godt.

Handlingsoppfordringen

Én hovedknapp, visuelt sterkest etter overskriften. Gi den en etikett som sier hva som skjer videre, ikke et generelt verb: «Start gratis prøveperiode», «Bestill bord», «Se menyen». Legger du til et annet alternativ, gjør det til en roligere tekstlenke så de to aldri konkurrerer.

Hero-bakgrunner og lesbarhet

Bakgrunnen utgjør halve inntrykket og er den vanligste grunnen til at hero-seksjonen svikter. Travle bilder og sterke gradienter kjemper mot overskriften, og et mørkt lag over alt flater ut stemningen. Planlegg et rolig område bak ordene, hold de travleste detaljene unna dem, og kontroller kontrast ved alle skjermbredder. Området bak teksten flytter seg nemlig når layouten endres.

Her er en Mark fra Gradiently nyttig: Det roligste området med best kontrast flytter seg bak ordene, og tekstfargen velges fra Markens egen palett. Dermed er overskriften lesbar ved 1920×1080 og på telefon uten boks eller skygge. For CSS-løsninger, se gradientoverlegg og tekst på en gradient.

Design hero-seksjonen for telefoner

På telefon er hero-seksjonen smal og høy, så delte layouter stables og heldekkende bilder beskjæres kraftig. Bestem hva telefonen skal vise fremfor å la det skje tilfeldig. Overskrift og knapp bør være synlige uten scrolling, mens det visuelle kan flyttes ned eller krympes.

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

Sjekkliste for hero-seksjonen

1. 1

   Skriv overskriften først

   Skriv fem overskrifter før du velger bilder, og velg den mest konkrete. Layouten følger ordene.

2. 2

   Kutt til én handling

   Velg det ene neste steget du vil at de fleste besøkende skal ta, og gjør det til eneste knapp.

3. 3

   Velg noe visuelt som beviser eller setter stemningen

   Et skjermbilde, et produktfoto eller en bakgrunn som bærer merkevaren. Ikke et standardbilde av folk som peker på bærbare datamaskiner.

4. 4

   Kontroller lesbarheten overalt

   Endre nettleseren fra bred til smal og følg teksten mot bakgrunnen hele veien.

5. 5

   Hold det raskt

   Hero-bildet er ofte sidens største element. Gi det riktig størrelse og lever WebP eller AVIF.

Hero-seksjonen åpner siden. Resten av siden må holde løftet. Landingssidedesign dekker seksjonene som følger.