Ako se pitate što je hero section, niste jedini.
Kada sam tek počinjao izrađivati web stranice, to je bio jedan od prvih izraza koji mi je neko vrijeme visio iznad glave kao veliki upitnik. Čitao sam članke, gledao tutorijale i stalno nailazio na isto:
„Dobar hero section treba imati ovo…“
„Promijeni headline u hero sectionu…“
„CTA u hero sectionu nije dovoljno jasan…“
A ja sam u jednom trenutku doslovno razmišljao:
Dobro, ali što je uopće taj hero section o kojem svi pričaju?
Danas mi je taj izraz potpuno normalan. Ne samo da ga koristim nego se igram s vlastitim hero sekcijama, mijenjam tekstove, boje, pozadine i animacije. Na jednom od svojih webova trenutno čak imam male međusobno povezane zvijezde koje plutaju kroz hero section.
Ali do toga ćemo doći.
Jer ako tek ulazite u web dizajn, izrađujete vlastitu stranicu ili ste nekome platili izradu weba, puno je važnije prvo razumjeti čemu hero section zapravo služi.
Što je hero section?
Hero section je veliki početni dio web stranice koji posjetitelj najčešće vidi odmah nakon zaglavlja i navigacije. Obično se nalazi u prostoru koji se na engleskom naziva above the fold — dijelu stranice koji možete vidjeti prije nego što počnete skrolati.
Najčešće sadrži nekoliko osnovnih elemenata:
- glavni naslov
- kratko dodatno objašnjenje ili podnaslov
- jedan glavni poziv na akciju
- fotografiju, ilustraciju, video ili neki drugi vizualni element
Ne mora svaki hero section imati baš sve navedeno. Ne postoji univerzalni predložak koji morate slijepo kopirati.
Ali trebao bi napraviti jednu vrlo važnu stvar:
pomoći osobi da brzo shvati gdje je došla i zašto bi trebala nastaviti gledati stranicu.
To mi je danas puno korisnija definicija od bilo kojeg stručnog izraza.
Hero section nije isto što i cijela naslovna stranica
Ovo je također dobro odmah razjasniti.
Hero section nije cijela početna stranica.
Nije navigacijski menu.
Nije običan banner.
Nije ni cijeli landing page.
To je uvodni blok stranice koji otvara priču, a ostatak sadržaja nastavlja se ispod njega.
Zamislite ulazak u fizičku trgovinu.
Izlog vas možda prvo privuče. Zatim uđete i tek onda vidite police, proizvode, cijene, osoblje i sve ostalo.
Hero section je pomalo poput tog prvog pogleda kroz izlog.
Ne mora vam odmah ispričati cijelu priču.
Ali trebao bi vam dati dovoljno dobar razlog da poželite vidjeti što je dalje.
Nedavno me jedan hero section ponovno podsjetio koliko je prvi dojam važan
Prošli tjedan imao sam vrlo ugodan razgovor s jednom gospođom iz Dalmacije.
Pokazala mi je projekt na kojem radi i njegovu web stranicu. O samom projektu neću ovdje puno otkrivati jer bih mu želio posvetiti zaseban članak.
Ali jedna od prvih stvari koju sam primijetio bio je upravo hero section.
Vizualno me privukao gotovo odmah.
Nakon toga mi je sam koncept projekta postao još zanimljiviji od dizajna, što je zapravo najbolji mogući scenarij.
Dobar hero vas privuče.
Ali ostatak stranice i ono što se iza nje nalazi moraju dati razlog da ostanete.
To je važna razlika.
Hero section ne može spasiti loš projekt, lošu ponudu ili stranicu bez smislenog sadržaja.
Može samo otvoriti vrata.
Što bi dobar hero section trebao odgovoriti?
Kada danas gledam nečiji hero section, ne pitam se samo:
„Je li lijep?“
Pitam se:
Shvaćam li što ova stranica predstavlja?
Shvaćam li kome je namijenjena?
Znam li što mogu napraviti sljedeće?
Ako posjetitelj nakon prvog pogleda mora proučavati stranicu kao da rješava križaljku, nešto vjerojatno nije dobro postavljeno.
Naslov zato ne mora biti revolucionarno pametan.
Treba biti dovoljno jasan.
Naslov je često najvažniji dio hero sectiona
Glavni naslov ili H1 obično je najveći tekst u hero sekciji.
On treba brzo dati glavnu ideju.
To ne znači da mora biti dosadan.
Možete biti kreativni, ali postoji granica nakon koje kreativnost počinje raditi protiv jasnoće.
Primjerice, naslov:
„Gradimo sutra zajedno.“
može zvučati lijepo.
Ali što vi zapravo radite?
Gradite kuće?
Web stranice?
Poslovne sustave?
Obrazovnu platformu?
Zajednicu?
Ako tekst ispod naslova mora spašavati potpuno nejasan headline, možda je naslov otišao malo predaleko u poeziju.
To ne znači da svaki naslov mora glasiti:
„Izrada web stranica Zagreb.“
Može imati karakter.
Samo mora imati smisla u kontekstu stranice.
Primjer s moje stranice Digitalna Franšiza
Na stranici digitalnafransiza.com trenutni hero počinje oznakom:
DIGITALNI EKOSUSTAV U RAZVOJU
a glavni naslov odmah zatim govori o SFT21 digitalnoj franšizi koja povezuje online poslovanje u jedan sustav. Ispod toga dolazi kratko objašnjenje koncepta i poziv na akciju „Upoznajte cijeli koncept“.
Tu mi nije cilj ispričati sve o projektu u prvih nekoliko centimetara ekrana.
To bi bilo nemoguće.
Cilj je da osoba shvati tri stvari:
radi se o SFT21,
radi se o digitalnom poslovnom ekosustavu,
i postoji mjesto na kojem može nastaviti istraživanje.
Ostatak stranice onda može objašnjavati SFoffice, SFnet, SFshop, zajednicu, mentorstvo, trenutačnu razvojnu fazu i sve ostalo.
To je posao ostatka stranice.
Hero samo otvara priču.
Podnaslov daje ono što naslov nema prostora objasniti
Ispod glavnog naslova često ćete vidjeti jednu ili dvije kraće rečenice.
To je podnaslov ili supporting copy.
Njegov posao nije ponoviti naslov drugim riječima.
Trebao bi dodati kontekst.
Ako headline govori što nudite, podnaslov može objasniti kome je namijenjeno ili kako pristup funkcionira.
Primjerice:
Web stranice koje pomažu malim poduzetnicima da jasnije predstave svoje usluge online.
Naslov je već prilično jasan.
Podnaslov onda može dodati:
Od strukture i sadržaja do responzivnog dizajna i osnovne SEO optimizacije.
Sada posjetitelj dobiva malo širu sliku, ali bez cijelog romana na vrhu stranice.
CTA: što želite da osoba napravi?
CTA znači Call to Action, odnosno poziv na akciju.
To je najčešće gumb.
Primjeri:
Saznajte više
Pogledajte ponudu
Kontaktirajte me
Preuzmite vodič
Započnite
Istražite projekt
Dobar hero ne bi trebao izgledati kao kokpit aviona s dvanaest jednako važnih tipki.
Ako posjetitelju nudite:
Kupi.
Rezerviraj.
Pretplati se.
Pogledaj video.
Pročitaj blog.
Prati Instagram.
Pošalji poruku.
Preuzmi PDF.
…sve odjednom, lako se dogodi da ne napravi ništa.
Zato većina dobrih hero sekcija ima jednu glavnu akciju, uz eventualno jednu sekundarnu. Web dizajn vodiči upravo jasnoću glavne akcije navode kao jedan od osnovnih elemenata hero sekcije.
Hero section ne mora biti statičan
Ovo je dio u kojem web dizajn postaje zabavan.
Hero section danas može imati:
fotografiju,
ilustraciju,
video,
animiranu pozadinu,
3D elemente,
tekst koji se mijenja,
gradijente,
male plutajuće elemente,
ili vrlo minimalističku pozadinu bez gotovo ikakvih ukrasa.
Na svom engleskom webu filipdoric.com trenutno imam hero koji govori o izgradnji online prihoda kroz Digital Franchise System, uz naglasak na strukturi umjesto nagađanja.
Na ovom screenshotu namjerno sam ostavio vidljivu i navigaciju. Ona tehnički nije dio hero sectiona, nego pripada headeru web stranice. Hero section počinje ispod nje, ali zajedno čine ono što posjetitelj vidi pri prvom otvaranju stranice.
Vizualni dio hero sectiona dodatno sam nadograđivao. Trenutno se u pozadini pojavljuju male zvijezde povezane linijama koje lagano plutaju kroz prostor.
Je li ta animacija nužna?
Nije.
Da je maknem, stranica bi i dalje mogla normalno funkcionirati.
Ali doprinosi atmosferi koju želim postići.
Tu je po meni glavna razlika između korisne animacije i animacije samo zato što možemo nešto animirati.
Ako pokret počne odvlačiti pažnju od naslova, otežava čitanje ili usporava stranicu, onda više ne pomaže hero sectionu. Moderni web-design vodiči zato preporučuju koristiti motion namjerno te istodobno paziti na brzinu i responzivnost.
I tekst može biti dio vizualnog efekta
Ne trebaju vam uvijek veliki video i posebni efekti.
Ponekad je dovoljno malo se poigrati tipografijom.
Na samom Filipovom Blogu glavni hero nosi poruku:
Internet nije samo za skrolanje.
Ispod nje objašnjavam da istražujem internet, online poslovanje, umjetnu inteligenciju i digitalne ekosustave kako bih ljudima pomogao lakše se snaći u digitalnom svijetu.
Na toj stranici koristim i efekt promjene boje određenog dijela teksta.
To je mala stvar.
Ali web dizajn se često sastoji upravo od takvih sitnih detalja.
Ne trebate svaki put napraviti vatromet.
Ponekad je jedna promjena boje, dobar razmak između elemenata ili kvalitetno odabrana fotografija sasvim dovoljna.
Što znači „above the fold“?
Kada istražujete što je hero section, vrlo brzo ćete naići i na izraz above the fold.
Izraz je nastao puno prije web stranica.
Kod novina je „fold“ bio fizički pregib novina. Najvažnije vijesti i naslovi pokušavali su se smjestiti u gornji dio koji je bio vidljiv i dok su novine bile presavijene.
Web je preuzeo isti izraz.
Danas above the fold označava ono što korisnik vidi prije prvog skrolanja.
Ali tu postoji jedna velika razlika.
Ne postoji jedna univerzalna visina tog prostora.
Netko gleda stranicu na velikom desktop monitoru.
Netko na laptopu.
Netko na tabletu.
Netko na malom telefonu.
Zato dobar hero section nije samo lijep na vašem monitoru dok ga uređujete.
Mora biti responzivan.
Hero section na mobitelu može biti potpuno druga priča
Ovo je jedna od stvari koju početnici često previde.
Napravite prekrasan hero na velikom monitoru.
Naslov lijevo.
Fotografija desno.
Dva gumba.
Dekoracije.
Animacije.
Sve izgleda fenomenalno.
Onda otvorite stranicu na telefonu.
Fotografija odreže pola lica.
Naslov zauzme cijeli ekran.
CTA završi negdje ispod.
Tekst prelazi preko vizuala.
Dekorativna zvijezda završi točno preko riječi koju pokušavate pročitati.
Zato hero morate provjeriti na različitim veličinama ekrana.
Ponekad se na telefonu elementi slažu jedan ispod drugoga.
Ponekad se slika smanji.
Ponekad se dio dekoracije potpuno sakrije.
I to je sasvim normalno.
Mobilna verzija ne mora biti identična desktop verziji. Mora biti funkcionalna.
Velika hero slika može biti lijepa – i usporiti cijelu stranicu
Još jedna česta zamka je ogromna fotografija od nekoliko megabajta.
Na brzom računalu možda sve izgleda dobro.
Ali osoba na sporijoj mobilnoj vezi čeka.
I čeka.
A hero je na samom vrhu stranice, pa težak vizual može izravno utjecati na doživljaj učitavanja. Zato se slike i video u hero sekciji trebaju optimizirati, posebno kada zauzimaju velik dio početnog viewporta.
Web stranica nije bolja samo zato što ima fotografiju rezolucije dovoljno velike za kino-platno.
Koristite format i veličinu koji imaju smisla.
Treba li hero section imati fotografiju osobe?
Ne mora.
Ali može biti vrlo učinkovit ako je osoba dio brenda.
Ako nudite konzultacije, mentorstvo, freelance uslugu ili gradite osobni brand, fotografija može odmah povezati web stranicu s čovjekom iza nje.
To je jedan od razloga zbog kojih često koristim vlastite fotografije na svojim stranicama.
Ne zato što vjerujem da svaka stranica mora imati moje lice.
Nego zato što kod osobnog brenda ima smisla da ljudi vide s kim komuniciraju.
Kod SaaS proizvoda bolji izbor možda će biti screenshot aplikacije.
Kod restorana hrana.
Kod turističkog projekta lokacija.
Kod webshopa proizvod.
Vizual bi trebao podržavati ono što hero govori.
Ne samo popuniti prazan prostor.
Najčešće greške koje primjećujem
Ne postoji jedan savršen hero section, ali neke greške stalno se ponavljaju.
Prva je nejasan naslov.
Druga je previše teksta. Ako ste u hero section ubacili cijeli esej o povijesti kompanije, nešto je vjerojatno otišlo u krivom smjeru.
Treća je previše akcija.
Četvrta je vizual koji nema nikakve veze s ponudom.
Peta je nedovoljan kontrast. Bijeli tekst preko vrlo svijetle fotografije može izgledati moderno u editoru, ali posjetitelj možda neće moći ništa pročitati.
Šesta je zanemarivanje mobitela.
Sedma je pretjerivanje s animacijama.
I dodao bih još jednu koju često primjećujem:
pokušaj da hero section objasni apsolutno sve.
Ne treba.
Ako je ostatak stranice dobro napravljen, hero treba posjetitelju dati dovoljno dobar razlog da napravi prvi scroll.
Što je važnije: dizajn ili poruka?
Ako baš moram birati, izabrao bih poruku.
Prekrasan hero koji ne mogu razumjeti možda će me impresionirati pet sekundi.
Jednostavniji hero koji jasno kaže što mi nudite može me odvesti puno dalje kroz stranicu.
Najbolji rezultat, naravno, dolazi kada imate oboje:
dobru poruku i dobar dizajn.
Zato mi je bio zanimljiv i razgovor s gospođom iz Dalmacije koji sam spomenuo na početku.
Prvo me privukao dizajn.
Onda me zainteresirao koncept.
Da je bilo obrnuto – prekrasan web bez zanimljive priče iza njega – vjerojatno ne bih razmišljao o tome da napišem poseban članak.
O njezinom projektu više uskoro.
Hero section treba odgovarati ostatku web stranice
Ako vam hero obećava jedno, a ostatak stranice govori potpuno drugo, imate problem.
Primjerice:
Hero:
„Najjednostavniji način da pokrenete svoj webshop.“
Ostatak stranice:
dvadeset paragrafa o povijesti firme, tri fotografije ureda i nikakvo objašnjenje webshopa.
Posjetitelj će se pitati je li završio na pravoj stranici.
Hero zato nije zaseban poster zalijepljen na vrh weba.
Trebao bi biti uvod u ono što slijedi.
To je možda i najbolji način na koji danas gledam cijelu temu.
Ne morate napraviti savršen hero section iz prve
Ovo bih posebno naglasio svima koji sami rade svoju prvu stranicu.
Hero section možete promijeniti.
I vjerojatno ćete ga promijeniti.
Ja sam svoje mijenjao više puta.
Naslov koji vam danas zvuči odlično za šest mjeseci možda više neće opisivati ono čime se bavite.
Promijenit ćete ponudu.
Promijenit ćete publiku.
Dodati novu uslugu.
Promijeniti CTA.
Pronaći bolju fotografiju.
Napraviti novu animaciju.
Web stranica nije tiskani katalog koji jednom pošaljete u tiskaru i više ga ne možete dirati.
Jedna od najvećih prednosti weba upravo je to što se može razvijati zajedno s vama.
Kako bih danas složio jednostavan hero section?
Ako ste početnik, ne bih komplicirao.
Počeo bih ovako:
Mali tekst iznad naslova
Što je ovo? Kategorija, područje ili kratak kontekst.
Glavni naslov
Što nudite ili koju vrijednost osoba ovdje može pronaći?
Jedan kratak odlomak
Kome pomažete i kako?
Glavni CTA
Što želite da osoba napravi sljedeće?
Vizual
Fotografija, proizvod, screenshot ili ilustracija koja podržava poruku.
To je sasvim dovoljno za početak.
Kasnije možete dodavati animacije, trust elemente, ocjene, sekundarni CTA i druge detalje.
Prvo napravite da hero ima smisla.
Tek onda ga ukrašavajte.
Što je hero section? Najjednostavniji odgovor
Ako ste do ovog članka došli upravo zato što ste na nekom tutorialu deseti put čuli taj čudni izraz, evo najjednostavnijeg odgovora:
Hero section je prvi veliki sadržajni blok na vrhu web stranice koji posjetitelju predstavlja glavnu poruku i pokazuje mu kamo može krenuti dalje.
To je to.
Nije nikakva tajna web dizajnera.
Nije poseban WordPress plugin.
Nije tehnologija.
To je dio strukture stranice.
Može biti vrlo jednostavan.
Može biti vizualno spektakularan.
Može imati fotografiju, animaciju, video ili samo dobar tekst.
Ali ako osoba nakon prvog pogleda razumije gdje je došla i poželi nastaviti dalje, hero radi ono zbog čega postoji.
Za kraj
Kada sam tek počinjao raditi web stranice, izraz hero section zvučao mi je puno kompliciranije nego što zapravo jest.
Danas se igram zvijezdama koje plutaju kroz njega.
Mijenjam boje teksta.
Testiram naslove.
Premještam gumbe.
Mijenjam fotografije.
Ali jedna stvar ostaje ista.
Tehnologija i dizajnerski efekti dolaze nakon osnovnog pitanja:
Što želim da osoba razumije kada prvi put otvori ovu stranicu?
Ako imate dobar odgovor na to pitanje, već ste napravili velik dio posla.
A ako tek gradite svoju web stranicu, nemojte se izgubiti u stručnim izrazima.
Svi smo jednom prvi put čuli za hero section.
Ja sam tada mislio:
„Kakav sad hero?“
Danas znam da je odgovor puno jednostavniji.
To je samo početak vaše web priče.
I zato vrijedi napraviti ga kako treba.
Ako vas zanima što dolazi nakon prvog ekrana i kako web stranicu povezati sa sadržajem, newsletterom, društvenim mrežama i drugim dijelovima online prisutnosti, pročitajte i:
👉 Što nakon izrade web stranice? Imate li sustav oko nje?
Jer web stranica nije samo hero section.
A hero section nije cijeli web.
On je samo mjesto na kojem priča počinje.
Internet nije samo za skrolanje.
