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

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.

Mitä hero-osioon kuuluu

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.

Käytä tukilausetta toimintatavan tai näytön kertomiseen, älä otsikon toistamiseen. Lisää sanavalinnoista saat oppaista tekstin kirjoittaminen kuviin ja visuaalinen hierarkia.

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.

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.

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 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ä ja teksti liukuvärin päällä.

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

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

Hero-osion tarkistuslista

1. 1

   Kirjoita otsikko ensin

   Kirjoita viisi otsikkoa ennen kuvien valintaa ja valitse täsmällisin. Taitto seuraa sanoja.

2. 2

   Karsi yhteen toimintoon

   Valitse yksi seuraava askel, jonka haluat useimpien kävijöiden ottavan, ja tee siitä ainoa painike.

3. 3

   Valitse kuva, joka osoittaa hyödyn tai luo tunnelman

   Kuvakaappaus, tuotekuva tai brändiä ilmentävä tausta. Ei kuvapankkikuvaa kannettavia osoittelevista ihmisistä.

4. 4

   Tarkista luettavuus kaikkialla

   Muuta selaimen kokoa leveästä kapeaksi ja seuraa koko ajan tekstin erottumista taustasta.

5. 5

   Pidä lataus nopeana

   Hero-kuva on usein sivun suurin elementti. Mitoita se oikein ja tarjoa se WebP- tai AVIF-muodossa.

Hero-osio avaa sivun. Loppusivun pitää lunastaa lupaus. Laskeutumissivun suunnittelu käsittelee seuraavia osioita.