# Hero-osion suunnittelu: verkkosivusi ensimmäinen näkymä

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

Kävijä päättää jo ennen vierittämistä, jääkö sivulle. Päätös syntyy hero-osiossa, joten jokaisen sanan ja pikselin pitää ansaita paikkansa.

## The short version

- Hero-osio on verkkosivun ensimmäinen koko näytön näkymä. Sen tulee kertoa, mikä tuote on, kenelle se sopii ja mitä tehdä seuraavaksi.
- Keskeiset osat ovat otsikko, tukilause, yksi ensisijainen toimintakehotus sekä kuva, joka näyttää tuotteen tai luo tunnelman.
- Konkreettisen tuloksen kertova otsikko toimii paremmin kuin iskulause, joka voisi kuulua mille tahansa yritykselle.
- Hero-osio tarvitsee yhden päätoiminnon. Toinen, hillitympi linkki käy, mutta useammat vaihtoehdot heikentävät päätoimintoa.
- Suunnittele puhelinnäkymä huolellisesti, sillä moni kävijä näkee hero-osion ensimmäisen kerran kapealla näytöllä.

Hyvä **hero-osion suunnittelu** vastaa kolmeen kysymykseen ennen vierittämistä: mikä tämä on, sopiiko se minulle ja mitä teen seuraavaksi. Hero on sivustosi ensimmäinen näkymä, jossa on yleensä otsikko, yksi tukilause, yksi pääpainike ja kuva. Kaiken muun, kuten logojen, merkkien, toisen painikkeen tai karusellin, pitää perustella näiltä neljältä viemänsä tila. Tämä opas käsittelee sanoja, taittoa ja toteutusta. Pelkistä taustoista kerrotaan oppaassa [verkkosivun hero-taustat](https://gradiently.design/fi/guide/website-hero-background).

## Mitä hero-osioon kuuluu

| Osa | Tehtävä | Tyypillinen pituus |
| --- | --- | --- |
| Yläotsikko (valinnainen) | Tausta tai ryhmä: ”Itsenäisille kahviloille” | 2-5 sanaa |
| Otsikko | Lupaus lukijan omilla sanoilla | 4-10 sanaa |
| Tukilause | Miten tuote toimii tai mikä erottaa sen muista | Yksi virke, 15-25 sanaa |
| Pääpainike | Yksi seuraava askel | 2-4 sanaa |
| Toissijainen linkki (valinnainen) | Kevyempi vaihtoehto: ”Katso, miten se toimii” | 2-4 sanaa |
| Kuva | Näytä tuote, lopputulos tai tunnelma | Yksi kuva, videosilmukka tai tausta |

Jos osa ei auta kävijää päättämään, jääkö sivulle, se kuuluu alemmaksi.

## Hero-osion otsikon kirjoittaminen

Otsikko on sivustosi vaikein lause. Nokkelat iskulauseet epäonnistuvat, koska ne voisivat kuulua kenelle tahansa. Hyvä otsikko kertoo asiakkaidesi käyttämillä sanoilla, kenelle tuote on, mitä he saavat tai minkä ongelman se poistaa. Lue otsikko ääneen kilpailijan etusivun otsikon rinnalla: jos ne voisi vaihtaa keskenään huomaamatta, oma otsikkosi ei ole tarpeeksi täsmällinen.

| Epämääräinen | Täsmällinen |
| --- | --- |
| Vauhtia kasvuusi | Freelancerin kirjanpito valmiiksi joka perjantai |
| Kahvin tulevaisuus | Yhden alkuperän pavut, paahdettu maanantaina, ovellasi torstaina |
| Helppoa suunnittelua | Brändisi näköiset somejulkaisut joka koossa |
| Hyvinvointimatkasi alkaa tästä | Pienryhmäpilatesta Leedsissä, kuusi osallistujaa tunnilla |
| Innovatiivisia ratkaisuja nykyaikaisille tiimeille | Yhteiset kalenterit klinikoille, jotka eivät siedä päällekkäisiä varauksia |

Täsmälliset versiot ovat pidempiä, ja se sopii. Otsikossa selkeys voittaa lyhyyden.

Käytä tukilausetta toimintatavan tai näytön kertomiseen, älä otsikon toistamiseen. Lisää sanavalinnoista saat oppaista [tekstin kirjoittaminen kuviin](https://gradiently.design/fi/guide/writing-copy-for-visuals) ja [visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy).

## Kolme toimivaa hero-taittoa

- **Keskitetty.** Otsikko, tukilause ja painike ovat päällekkäin taustan keskellä. Sopii brändeille, julkaisuille ja tuotteille, joita kuvaa paremmin tunnelma kuin ruutunäkymä.
- **Jaettu.** Sanat vasemmalla, tuotekuva tai kuvakaappaus oikealla. Paras silloin, kun tuotteen näkeminen vakuuttaa: sovellukset, fyysiset tuotteet ja ruoka.
- **Reunoihin ulottuva kuva tai video.** Valokuva tai videosilmukka täyttää näytön, ja sanat ovat rauhallisen kohdan päällä. Sopii hotelleille, ravintoloille, tapahtumille ja portfolioille, kun luettavuus on kunnossa.

Kahvipaahtimon keskitetty verkkosivun hero-osio, jossa otsikko ja tukilause ovat lämpimän liukuvärin päällä

Keskitetty: sanat kantavat viestin, tausta luo tunnelman.

Klinikan ajanvarausohjelman jaettu hero-osio, jossa teksti on vasemmalla ja tuotekuvalle on tilaa oikealla

Jaettu: sanat yhdellä puolella, toisella tilaa tuotteen kuvakaappaukselle.

## Toimintakehotus

Yksi pääpainike on otsikon jälkeen visuaalisesti vahvin osa. Kerro painikkeessa, mitä tapahtuu seuraavaksi, yleisen verbin sijaan: ”Aloita maksuton kokeilu”, ”Varaa pöytä”, ”Katso ruokalista”. Jos lisäät toisen vaihtoehdon, tee siitä hillitympi tekstilinkki, jotta ne eivät kilpaile.

### Vältä

- Kolme yhtä vahvaa painiketta
- ”Lähetä”, ”Lue lisää” tai ”Klikkaa tästä”
- Painike taustan värissä
- Puhelimessa näkymän alle jäävä painike
- Automaattisesti vaihtuva karuselli eri viesteillä

### Tee näin

- Yksi painike ja yksi hillitympi linkki
- Teksti, joka kertoo seuraavan tapahtuman
- Painikeväri, jota ei käytetä muualla näkymässä
- Otsikko ja painike näkyvät 390 px leveässä puhelimessa
- Yksi hyvin kerrottu viesti

## Hero-taustat ja luettavuus

Tausta luo puolet vaikutelmasta ja on tavallisin syy hero-osion epäonnistumiseen. Levottomat valokuvat ja kirkkaat liukuvärit kilpailevat otsikon kanssa, ja koko kuvan tummentava kerros latistaa tunnelman. Varaa sanojen taakse rauhallinen alue, sijoita runsaimmat yksityiskohdat muualle ja tarkista [kontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility) jokaisella näyttöleveydellä. Tekstin takana oleva alue vaihtuu, kun taitto mukautuu.

Tässä Gradientlyn Mark auttaa: sen rauhallisin ja kontrastiltaan paras alue siirtyy sanojesi taakse, ja tekstiväri valitaan sen omasta paletista. Otsikko pysyy luettavana 1920×1080-koossa ja puhelimessa ilman laatikkoa tai varjoa. CSS-tapoja käsittelevät [liukuväri kuvan päällä](https://gradiently.design/fi/guide/gradient-overlay) ja [teksti liukuvärin päällä](https://gradiently.design/fi/guide/text-on-gradient).

## Hero-osion suunnittelu puhelimille

Puhelimessa hero-osio on kapea ja korkea, joten jaetut taitot pinoutuvat ja reunasta reunaan ulottuvat kuvat rajautuvat voimakkaasti. Päätä, mitä puhelimessa näkyy, älä jätä sitä sattumalle: otsikon ja painikkeen tulee näkyä ilman vierittämistä. Kuva voi siirtyä niiden alle tai pienentyä.

- Tietokone 1920×1080: 1920 × 1080
- Kannettava 1440×900: 1440 × 900
- Puhelin 390×844: 390 × 844

Sama hero-osio kolmessa yleisessä näkymäkoossa. Tietokoneella otsikon viereen mahtuva osa pitää puhelimessa siirtää sen ylä- tai alapuolelle.

```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` mitoittaa osion puhelimen näkyvän näytön mukaan, `clamp()` skaalaa tekstin puhelimesta tietokoneeseen ja `text-wrap: balance` tasaa otsikon rivit.

## Hero-osion tarkistuslista

1. **Kirjoita otsikko ensin** Kirjoita viisi otsikkoa ennen kuvien valintaa ja valitse täsmällisin. Taitto seuraa sanoja.
2. **Karsi yhteen toimintoon** Valitse yksi seuraava askel, jonka haluat useimpien kävijöiden ottavan, ja tee siitä ainoa painike.
3. **Valitse kuva, joka osoittaa hyödyn tai luo tunnelman** Kuvakaappaus, tuotekuva tai brändiä ilmentävä tausta. Ei kuvapankkikuvaa kannettavia osoittelevista ihmisistä.
4. **Tarkista luettavuus kaikkialla** Muuta selaimen kokoa leveästä kapeaksi ja seuraa koko ajan tekstin erottumista taustasta.
5. **Pidä lataus nopeana** Hero-kuva on usein sivun suurin elementti. Mitoita se oikein ja tarjoa se [WebP- tai AVIF-muodossa](https://gradiently.design/fi/guide/webp-images).

Hero-osio avaa sivun. Loppusivun pitää lunastaa lupaus. [Laskeutumissivun suunnittelu](https://gradiently.design/fi/guide/landing-page-design) käsittelee seuraavia osioita.

## FAQ

### Mikä on verkkosivun hero-osio?

Sivun ensimmäinen koko näytön näkymä ennen vierittämistä. Siinä on yleensä otsikko, tukilause, pääpainike ja kuva.

### Mitä hero-osion otsikon pitäisi sanoa?

Mitä tuote tekee ja kenelle, asiakkaan omilla sanoilla. Täsmälliset tulokset toimivat paremmin kuin laajat iskulauseet.

### Montako painiketta hero-osiossa pitäisi olla?

Yksi pääpainike. Toinen, hillitympi tekstilinkki kevyempään vaihtoehtoon käy, mutta useammat valinnat heikentävät päätoimintoa.

### Minkä kokoinen hero-kuvan pitäisi olla?

Suunnittele tietokoneelle 1920×1080-koossa ja tarjoa puhelimille pienemmät versiot `srcset`-määritteellä, jotta mobiilikävijät lataavat kevyemmän tiedoston.

### Pitäisikö hero-osion täyttää koko näyttö?

Ei välttämättä. Koko näytön hero sopii brändivetoisille sivustoille. Tuotesivuilla lyhyempi osio voi toimia paremmin, koska se vihjaa alempana odottavasta sisällöstä.