# Design av hero-seksjon: nettstedets første skjerm

[Canonical HTML page](https://gradiently.design/nb/guide/hero-section-design)

Besøkende bestemmer seg for å bli før de scroller. Hero-seksjonen er stedet de avgjør det, så hvert ord og hver piksel bør fortjene plassen sin.

## The short version

- En hero-seksjon er nettstedets første hele skjerm, og bør si hva produktet er, hvem det er for og hva man skal gjøre videre.
- Kjernedelene er en overskrift, en støttelinje, én hovedoppfordring og et visuelt element som viser produktet eller setter stemningen.
- Konkrete overskrifter som navngir et resultat, fungerer bedre enn slagord som kunne tilhørt hvilket som helst selskap.
- En hero-seksjon trenger én hovedhandling. En ekstra, roligere lenke er greit, men flere valg svekker den.
- Design telefonversjonen bevisst, siden mange besøkende først ser hero-seksjonen på en smal 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](https://gradiently.design/nb/guide/website-hero-background).

## Dette hører hjemme i en hero-seksjon

| Del | Oppgave | Vanlig lengde |
| --- | --- | --- |
| Overlinje (valgfri) | Sammenheng eller kategori: «For uavhengige kafeer» | 2 til 5 ord |
| Overskrift | Løftet, med leserens ord | 4 til 10 ord |
| Støttelinje | Slik fungerer det, eller det som gjør det annerledes | Én setning, 15 til 25 ord |
| Hovedknapp | Det ene neste steget | 2 til 4 ord |
| Sekundærlenke (valgfri) | En vei med lavere terskel: «Se hvordan det fungerer» | 2 til 4 ord |
| Visuelt element | Vis produktet, resultatet eller følelsen | Ett bilde, en videosløyfe eller en bakgrunn |

Hvis en del ikke hjelper besøkende med å velge om de vil bli, hører den hjemme lenger ned på siden.

## 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.

| Vagt | Konkret |
| --- | --- |
| Vi styrker veksten din | Regnskap for frilansere, ferdig hver fredag |
| Kaffens fremtid | Bønner fra ett opphav, brent mandag, hos deg torsdag |
| Design gjort enkelt | Sosiale innlegg med merkevarens uttrykk, i alle størrelser |
| Din velværereise begynner her | Pilates i små grupper i Leeds, seks per time |
| Innovative løsninger for moderne team | Delte kalendere for klinikker som hater dobbeltbestillinger |

De konkrete versjonene er lengre, og det er greit. Tydelighet slår korthet i en overskrift.

Bruk støttelinjen til fremgangsmåten eller beviset, ikke til en gjentakelse. [Skriv tekst til visuelle flater](https://gradiently.design/nb/guide/writing-copy-for-visuals) og [visuelt hierarki](https://gradiently.design/nb/guide/visual-hierarchy) 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.

En sentrert hero-seksjon for et kaffebrenneri med overskrift og støttelinje over en varm gradient

Sentrert: ordene bærer budskapet, bakgrunnen setter stemningen.

En delt hero-seksjon for klinikkplanleggingsprogramvare med tekst til venstre og plass til et produktbilde

Delt: ord på én side og plass til et produktskjermbilde på den andre.

## 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.

### Unngå

- Tre knapper med lik tyngde
- «Send», «Les mer» eller «Klikk her»
- En knapp i samme farge som bakgrunnen
- Knappen under bretten på telefon
- En karusell med ulike budskap som spiller automatisk

### Gjør dette

- Én knapp, én roligere lenke
- En etikett som sier hva som skjer videre
- En knappefarge som ikke brukes andre steder på skjermen
- Overskrift og knapp synlige på en 390 px bred telefon
- Ett budskap, sagt godt

## 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](https://gradiently.design/nb/guide/color-contrast-accessibility) 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](https://gradiently.design/nb/guide/gradient-overlay) og [tekst på en gradient](https://gradiently.design/nb/guide/text-on-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.

- Dataskjerm 1920×1080: 1920 × 1080
- Bærbar 1440×900: 1440 × 900
- Telefon 390×844: 390 × 844

Samme hero-seksjon i tre vanlige skjermstørrelser. Det som passer ved siden av overskriften på dataskjerm, må over eller under den på telefon.

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

`svh` måler etter telefonens synlige skjerm, `clamp()` skalerer tekst mellom telefon og dataskjerm, og `text-wrap: balance` balanserer overskriftens linjer.

## Sjekkliste for hero-seksjonen

1. **Skriv overskriften først** Skriv fem overskrifter før du velger bilder, og velg den mest konkrete. Layouten følger ordene.
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. **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. **Kontroller lesbarheten overalt** Endre nettleseren fra bred til smal og følg teksten mot bakgrunnen hele veien.
5. **Hold det raskt** Hero-bildet er ofte sidens største element. Gi det riktig størrelse og lever [WebP eller AVIF](https://gradiently.design/nb/guide/webp-images).

Hero-seksjonen åpner siden. Resten av siden må holde løftet. [Landingssidedesign](https://gradiently.design/nb/guide/landing-page-design) dekker seksjonene som følger.

## FAQ

### Hva er en hero-seksjon på et nettsted?

Sidens første hele skjerm, over bretten. Den inneholder vanligvis en overskrift, en støttelinje, en hovedknapp og et visuelt element.

### Hva bør en hero-overskrift si?

Hva produktet gjør og for hvem, med kundens egne ord. Konkrete resultater slår brede slagord.

### Hvor mange knapper bør en hero-seksjon ha?

Én hovedknapp. En ekstra, roligere tekstlenke til et alternativ med lavere terskel er greit, men flere valg svekker hovedvalget.

### Hvor stort bør et hero-bilde være?

Design ved 1920×1080 til dataskjerm, og tilby mindre versjoner til telefoner via `srcset`, slik at mobilbesøkende laster ned en lettere fil.

### Bør en hero-seksjon fylle hele skjermen?

Ikke nødvendigvis. En heldekkende hero passer til merkevaredrevne nettsteder. Produktsider har ofte nytte av en kortere hero som antyder innhold under.