Hero-sektion: designa webbplatsens första skärm

Bra design av hero-sektionen svarar på tre frågor innan någon scrollar: vad är det här, är det för mig och vad gör jag härnäst. Hero-sektionen är sajtens första skärm, oftast en rubrik, en stödmening, en enda huvudknapp och en bild. Allt annat (logotyper, märken, en andra knapp, en karusell) måste motivera det utrymme det tar från de fyra. Den här guiden går igenom orden, layouten och bygget. För bara bakgrunden, se bakgrunder till hero-sektioner.

Vad som ingår i en hero-sektion

Att skriva rubriken i hero-sektionen

Rubriken är den svåraste meningen på din webbplats. Kvicka slagord faller eftersom de kunde tillhöra vem som helst. En bra rubrik nämner vem den är för, vad de får eller vilket problem den tar bort, med ord som dina kunder faktiskt använder. Läs den högt bredvid en konkurrents startsida: kan ni byta utan att någon märker det är den inte specifik nog.

Spara stödraden till hur eller beviset, inte en upprepning. För mer om formuleringar hjälper att skriva text till visuellt material och visuell hierarki.

Tre hero-layouter som fungerar

• Centrerad. Rubrik, rad och knapp staplade i mitten över en bakgrund. Stark för varumärken, lanseringar och produkter som är mer en känsla än en skärm.
• Delad. Ord till vänster, produktbild eller skärmbild till höger. Bäst när det är argumentet att se produkten: appar, fysiska varor, mat.
• Helbild eller video. Ett foto eller en loop fyller skärmen med ord över ett lugnt område. Passar hotell, restauranger, evenemang och portföljer, om läsbarheten sköts ordentligt.

Uppmaningen till handling

En primär knapp, visuellt det starkaste elementet efter rubriken. Döp den efter vad som händer härnäst, inte efter ett generiskt verb: ”Starta en gratis provperiod”, ”Boka bord”, ”Se menyn”. Om du lägger till ett andra alternativ, gör det till en lugnare textlänk så att de två aldrig konkurrerar.

Hero-bakgrunder och läsbarhet

Bakgrunden är halva intrycket och den vanligaste orsaken till att en hero-sektion fallerar. Röriga foton och klara gradienter slåss mot rubriken, och ett mörkt överdrag över allt plattar ut stämningen. Planera ett lugnt område bakom orden, håll de rörigaste detaljerna borta från dem och kontrollera kontrasten vid varje skärmbredd, eftersom området bakom texten flyttar sig när layouten flödar om.

Här är en Gradiently-Mark användbar: dess lugnaste, mest kontrasterande område flyttas bakom dina ord och textfärgen väljs ur dess egen palett, så rubriken läses i 1920×1080 och på en telefon utan ruta eller skugga. För CSS-lösningar, se gradientöverdrag och text på en gradient.

Designa hero-sektionen för telefoner

På en telefon är hero-sektionen smal och hög, så delade layouter staplas och helbilder beskärs hårt. Bestäm vad telefonen visar i stället för att låta det ske: rubriken och knappen ska synas utan att scrolla, bilden kan flyttas ner eller krympa.

.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 checklista för hero-sektionen

1. 1

   Skriv rubriken först

   Innan du väljer bilder, skriv fem rubriker och välj den mest specifika. Layouten följer orden.

2. 2

   Skär ner till en handling

   Välj det enda nästa steg du helst vill att de flesta besökare tar, och gör det till den enda knappen.

3. 3

   Välj en bild som bevisar eller sätter stämningen

   En skärmbild, ett produktfoto eller en bakgrund som bär varumärket. Inte ett arkivfoto på människor som pekar på bärbara datorer.

4. 4

   Kontrollera läsbarheten överallt

   Ändra webbläsarens storlek från bred till smal och följ texten mot bakgrunden hela vägen.

5. 5

   Håll den snabb

   Hero-bilden är ofta det största på sidan. Dimensionera den ordentligt och leverera WebP eller AVIF.

Hero-sektionen öppnar sidan. Resten av sidan måste hålla löftet. Design av landningssidor går igenom avsnitten som följer.