Herojske slike ono su što kreatori web stranica često koriste kako bi pozdravili posjetitelje svoje web stranice u atraktivnom formatu.
Ako ste se ikad pitali " što je slika heroja? ", Na pravom ste mjestu. U ovom ćemo članku pogledati temu i kako možete stvoriti prekrasne herojske slike s moćnim vizualnim efektima.
Junačka slika izraz je koji izrađuju web stvaratelji za opisivanje prevelikog sadržaja na vrhu web stranice.
Uloga glavne slike je poželjeti dobrodošlicu vašem posjetitelju čim upozna vašu tvrtku ili organizacija. Obilje tipova glavnih slika u kompletu alata za web-autorstvo donosi toliko mnogo razloga da uključite glavne slike na svoje web mjesto.
Razumijemo glavne prednosti ovoga i zašto?
Što je slika heroja?
Prihvaćajući vrlinu "dobrog prvog dojma", herojske slike obično imaju jednu ili više sljedećih karakteristika:
- Slika visoke kvalitete
- Zanosan video
- Klizač slike ili multimedijski vrtuljak
- Animirani ili statični prikaz
- Zaglavlja i opisi pored ili ispred vizualnog sadržaja
Što se tiče stila, uobičajeni detalji dizajna koje ćete primijeniti na herojske slike uključuju:
- Pozadinske slike ili videozapisi s pozadinskim prekrivačima
- Fiksno ili ljepljivo pozicioniranje
- Pokazivanje utječe na promjenu prozirnosti ili prekrivanja
- Elementi kontrasta koji razlikuju sliku od zaglavlja iznad ili sljedećeg sadržaja
Novost slika heroja u web dizajnu je što s jedne strane radite s vrlo specifičnim i definiranim prostorom na web stranici. S druge strane, odabir stila, efekata i tehnika koje ćete koristiti prilikom dizajniranja ovog dijela sadržaja vaše stranice apsolutno je beskrajan.
Zašto biste trebali koristiti herojsku sliku?
Kada dizajn i funkcionalnost vaše glavne slike imaju visoki kalibar, automatski postižete vjerodostojnost i povjerenje korisnika. Vaša glavna slika i herojski sadržaj koji je okružuje često predstavljaju vašu prvu priliku da prenesete svoju jedinstvenu prodajnu prednost organizacija i glavna korisnička točka kontakta za konverziju.
Kada želite pokrenuti određeno ponašanje korisnika, najbolji način za početak je vrhunska, moćna slika heroja koja ostavlja snažan prvi dojam na vaše posjetitelje.
Možete ostaviti trajni prvi dojam
Prvi dojmovi bitni su u mnogim područjima života, ali posebno kada je riječ o tome kako se korisnici odnose prema estetici web stranica.
Rezultati stručnjaka za interakciju čovjek-stroj (HCI) i vizualizacija na Google istraživanje svjedoče o utjecaju slika heroja na uspjeh web stranice:
Ova studija, " Uloga vizualne složenosti i prototipičnosti u prvim dojmovima web stranice : rad na razumijevanju estetskih prosudbi ”, Proučava kako vizualna složenost i prototipičnost utječu na dizajn web stranice i prve dojmove korisnika.
Autori su sudionicima istraživanja pokazali 119 stvarnih snimaka zaslona s web stranice i otkrili da vizualna složenost i prototipičnost utječu na estetsku percepciju korisnika u prvih 50 slika izložbe, a ponekad čak i u roku od 17 ms.
Kao web kreatori naš je zaključak vrlo jednostavan: Slika heroja koju odaberemo i način na koji je predstavljamo na našoj stranici utječe na raspoloženje i ponašanje korisnika u velikoj mjeri.
Izvući ćete maksimum iz svog sadržaja iznad preloma
Odjeljak "iznad preloma" web stranice može se definirati jednostavnim riječima: sadržaj koji ispunjava vaš zaslon / pojavljuje se iznad donje granice prozora web preglednika nakon učitavanja vaše stranice. Ako sadržaj zahtijeva da se vidi pomicanje, to znači da se nalazi "ispod nabora".
Koncept "iznad preloma" nastao je u dizajnu tiska i izdavaštvu, puno prije ere digitalnih medija. Svi znamo kako je to odmah primijetiti nešto na gornjoj polovici prve stranice, a čak je sigurno reći da je sadržaj na prvoj stranici često ono zbog čega odlučujemo hoćemo li kupiti novine ili ne. na kiosku s novinama.
To je upravo razlog zašto vaš sadržaj na gornjoj polovici stranice može biti važan prekidač u uspjehu vaše web stranice.
Na što mislimo?
Ako je posjetitelj web stranice zbunjen vašim sadržajem i slikama iznad preloma, brzo će napustiti vaše web mjesto. Ako su slika vašeg junaka i njegovo okruženje iznad nabora jasni, privlačni i dobro predstavljaju vašu vrijednost, on će biti skloniji zadržavanju.
U konačnici, što više ulažete u sliku i sadržaj svog odjeljka za heroje, to je manja vjerojatnost da će korisnici brzo izaći.
Ne zaboravite na Responsive Design
Imajte na umu da je mjesto savijanja zaslona subjektivno u odnosu na veličinu zaslona uređaja. To je važno u responzivnom dizajnu, jer sadržaj na preklop treba prilagoditi i konfigurirati na način koji je primjenjiv na više veličina uređaja.
Web dizajneri i programeri često koriste točke prekida specifične za uređaj kako bi se zajamčila ova reakcija. To vam daje potpunu kontrolu nad prilagodljivošću dizajna vaše web stranice odgovarajućim veličinama zaslona i izbjegava ugroženi izgled ili utjecaj vaše slike heroja.
Iznesite svoj prijedlog vrijednosti bez preopterećenja informacijama
Možda vam je poznat koncept "previše informacijaU dizajnu web stranica i korisničko iskustvo : Želimo izbjeći upotrebu previše sadržaja, posebno pisanog, kada predstavljamo našu marku i poslovnu vrijednost.
U tom smislu upotreba slike, ilustracije ili videozapisa vrijedi 1 riječi. Fino podešavanje učinkovitih slika brendiranja snimit će cijelu vašu priču u jedan vizualni medij. Umjesto da verbalizirate svoju priču i prijedlog za brendiranje, možda ćete moći olakšati kognitivno opterećenje svom korisniku na jednostavan i jednostavan način.
Gornji snimak zaslona preuzet je iz Gradnja Millbrook, građevinska tvrtka sa sjedištem u Perthu, specijalizirana za "stambenu izgradnju s vrhunskim završnim obradama i pažnjom prema detaljima". Za njihovu web stranicu Elementor, slika heroja na početnoj stranici savršeno koristi sučelje "iznad preklopa". Upečatljiva, oštra fotografija sretnog modernog doma i otvorenog bazena stvara pozitivne, opuštajuće vibracije.
Idući korak dalje, odabir stilova pozadinske slike pune visine i veličine "pokrivača" ukazuju na čvrst smisao tvrtke za stvaranje luksuznih stambenih objekata. Prijedlog vrijednosti jasan je poput vode u bazenu, a korisnici udobno upijaju sve potrebne informacije.
Slike vaših heroja mogu vam pomoći pretvoriti potencijalne kupce
Atraktivne i vidljive dodirne točke osnovni su sastojak korisničkog toka konverzije-reprodukcije. Zbog toga odnos između poziva na akciju u odjeljku za heroje i same vaše slike junaka može stvoriti ili razbiti ciljeve izgradnje vaše web stranice.
Neka vaši CTA tekstovi kažu " Inscrivez-vous održavatelj "" Opširnije "" Contactez-nous », Itd., Vaša slika heroja mora biti transparentno koordinirana na svim frontama: vidljivost, slanje poruka, shema boja, izgled itd.
Vjerodostojni i učinkoviti razgovori s potencijalnim klijentima temelje se na ugodnoj i prirodnoj atmosferi; vizualno ugodne slike najbolji su način da se to postigne.
Upravo to vidimo na web stranici Elementor koju je izradio STL karikatura, tim crtanih umjetnika koji pružaju usluge zabave za događaje. Animirani naslov (tekst junaka) prikazuje sretne kupce na njihovim junačkim slikama, pokazujući što crtači pružaju svakoj osobi.
Dakle, nakon što zasučete rukave i počnete ulaziti u praktične stvari, što ulazi u proces odlučivanja koju vrstu herojske slike koristiti?
Istražimo četiri različite vrste slika heroja i kako procijeniti koja je najbolja za vaše web mjesto.
# 1 Slika heroja proizvoda
Glavna slika proizvoda velika je visoka slika definicija proizvoda marke. Te slike mogu biti predstavljene u statičnom stanju ili u pokretu/u akciji, sve dok omogućuju vizualizaciju ponude vrijednosti proizvoda.
Popularni načini među web dizajnerima da predstave i personaliziraju svoje slike heroja proizvoda mogu uključivati:
- Detaljan / trenutni primjer pojedinačnog proizvoda, kao što vidimo gore na web mjestu tvrtke australska pretplata avo lover.
- Snimka zaslona digitalnog sučelja proizvoda, poput nadzorne ploče.
Slike heroja proizvoda obično se nalaze na web stranicamae-trgovina (ali ne isključivo). Potencijalni kupci očekuju vidjeti primjere stvarnih proizvoda, podržavajući informirano donošenje odluka o prikladnosti trgovine za njihove potrebe kupnje.
Ljubitelj Avoa koristio je Elementor za izradu web stranice za e-trgovinu, kojom njihovi klijenti kupuju tjedne pretplate svježeg avokada dostavljenog na njihov kućni prag.
Baza kupaca ljubavnika Avo predstavlja nišu na tržištu u usko definiranom području interesa, tako da njihov odabir slike heroja proizvoda ima sasvim smisla. Potencijalni pretplatnici su entuzijasti avokada; vidjeti izbliza i zamršenu fotografiju proizvoda je upravo ono što oni žele vidjeti.
Najbolje prakse:
- Uložite u kvalitetu pozadinskih slika
Bez obzira je li vaša pozadinska slika fotografija, video, ilustracija itd., Slikovna datoteka mora biti što lakša, kristalno jasne razlučivosti.
- Obratite pažnju na razinu kontrasta
Ako dodate tekst ispred slike odjeljka heroja (ili bilo koje komponente), pobrinite se da kontrast između elemenata web stranice bude jak i lako uočljiv. Tu prevlake u pozadini i efekti filtra mogu biti izuzetno korisni.
# 2 Slika klijentskog heroja
Sljedeća vrsta herojske slike koju internetska poduzeća zauzimaju alternativni pristup pokazivanju njihove dodane vrijednosti: prikazivanje svog kupca koji koristi proizvod. Ova je perspektiva strateški način suosjećanja s posjetiteljima, sažeto pokazujući da razumijete njihovu bolnu točku i da možete zadovoljiti njihove potrebe.
Gornji video isječak preuzet je s web mjesta Elementor koji je kreirao Aleksandar Fischer, osobni trener sa sjedištem u Stuggartu koji pruža niz zdravstvenih i fitness usluga.
Aleksandrova slika heroja kupaca pokazuje više od zadovoljnog kupca koji uživa u zdravom i fit obliku. Junačka slika ide korak dalje prikazivanjem videozapisa na kojem se njegov klijent veže i povezuje s voljenima.
Najbolje prakse:
- Podijelite svoje slučajeve upotrebe i korisničko iskustvo
Diferencirajte svoj proizvod pokazujući njegov najdominantniji slučaj upotrebe. Slika koja prenosi vaše poslovne ciljeve i vrijednost pokazuje kako će posjetitelj imati koristi od vaše jedinstvene ponude.
- Odnesite se na svoju ciljnu publiku
Pri odabiru vrste osobe koja će se pojaviti na vašoj slici pripazite da vaša ciljna publika bude uzeta u obzir. Odaberite sliku koja komunicira vaše razumijevanje polja i vašu sposobnost da oduševite svoje kupce.
# 3 Slika heroja utemeljitelja
Slika heroja utemeljitelja velika je slika osnivača vlasnika poduzeća, smještena u odjeljak heroja za pozdrav posjetitelju web stranice.
Osnivačke herojske slike često se koriste na web mjestima portfelja za slobodnjake, vlasnike tvrtki poput psihologa, šminkera ili glazbenika kako je prikazano na Web stranica tvrtke Elementor Jasmine Cain gore.
Najveća vrlina imidža utemeljitelja je što imenu daje lice; posjetitelja web stranice povezuje s pružateljem usluga, stvarajući ugodnu dinamiku između dviju osoba.
Treba pažljivo postupati s izborom slika za vašu sliku heroja utemeljitelja. Uz mnoštvo mogućnosti za odabir, što se svodi na:
što će na najjači mogući način prenijeti poruku vašeg brenda?
Je li ovo fotografija osnivača koji gleda ravno u kameru i smiješi se ili možda gleda u drugom smjeru?
Ili, bi li više odgovarala iskrena fotografija vrijednog vlasnika poduzeća?
Najbolje prakse:
- Obratite pažnju na veličinu i dimenzije
Upotrijebite jasnu sliku velike veličine (ili videozapis) koja posjetiteljima pokazuje točne detalje koje trebaju vidjeti. Ako je potrebno, možete se usredotočiti na veća područja vaših slika obrezujući ih i uklanjajući manje važan sadržaj.
- Usredotočite se na ono što bi vaša slika trebala prenijeti
Uloga pozadine trebala bi biti usredotočena na osobu ispred nje, a ne obrnuto. Najuticajnije slike heroja osnivača prikazat će nasmijanog vlasnika poduzeća, implicirajući njegovu strast prema održavanju zadovoljstva kupaca.
# 4 Nekontekstualna slika heroja
Nekontekstualne slike heroja su, kako i samo ime kaže, sekvence koje prikazuju nešto naizgled 'nepovezano' s vlasnikom proizvoda ili tvrtke. Svrha nekontekstualne slike heroja je ostaviti dojam na posjetitelja vizualnom asocijacijom ili podsvjesnom porukom. Pregled nekontekstualne slike pokazuje korisniku što je proizvod ili marka, ali na neizravan način.
Ova se tehnika koristi, na primjer, u gornjem primjeru s web stranice Elementara koju je izradila tvrtka za digitalni marketing AP tehnologija, sa sjedištem u Oklahomi. Web stranica tvrtke koristi široku, jasnu pozadinsku sliku koja prikazuje jedinstveni kut nebodera Oklahoma Cityja.
Ova fotografija predstavlja vrijednosni prijedlog tvrtke, kako je navedeno u herojskom tekstu web stranice: Izgradite svoj posao i gledajte ga kako raste, visok kao najviši uredski tornjevi u gradu.
Čim ljudsko oko vidi fizičke strukture koje dominiraju nebom, shvaća da ti marketinški profesionalci rade na tome da tvrtke podignu sa zemlje, na visinu.
Najbolje prakse:
- Osigurajte da posjetitelji razumiju zašto je slika relevantna
Iako ne prikazujete izravan vizualni prikaz samog proizvoda, pobrinite se da je povezivanje vrijednosti vašeg proizvoda s vašom nekontekstualnom slikom heroja i dalje lako prepoznati. Korisnici ne bi trebali trošiti vrijeme razmišljajući o njegovoj relevantnosti.
- Napravite jasnu vezu između slike junaka i teksta junaka
Junački tekst koji postavljate zajedno sa svojom slikom trebao bi se izravno odnositi na njegov vizualni sadržaj. To je nužno, čak i ako zahtijeva nekoliko ponavljanja vašeg teksta i izbor formulacije.
- Stvorite kohezivnu shemu dizajna
Boje koje odaberete za tekstove i pozadine gumba, zaglavlja ili opise trebaju se usklađivati sa slikom heroja ili umjetničkim djelom. To se također odnosi na akcente koji se mogu kliknuti na vašoj web stranici:
elementi navigacijskog izbornika, logotip, itd ...
Svi znamo koliko je dosljedan vizualni jezik važan za prestiž naše web stranice, prisutnost marke i profesionalnu vjerodostojnost. Tu vodiči za stil dizajna mogu biti od velike pomoći, pogotovo u osiguravanju usklađenosti vaših herojskih slika s dizajnom vaše web stranice.
Kako testirati sliku svog heroja: metode koje volimo
Jednom kad započnete eksperimentirati s nekoliko opcija za vašu sliku junaka, možete odmah procijeniti koja opcija stvara najviše angažmana i steći uvid u najučinkovitiji dizajn - i na kraju se držati te.
Evo nekoliko nužnih metoda ispitivanja koje je jednostavno postaviti i pružaju bogatstvo znanja kako biste bili sigurni da koristite najbolju moguću sliku heroja.
A / B Testirajte svoju herojsku sliku
A / B testiranje zahtijeva od dizajnera da stvori dvije ili više opcija za odjeljak heroja (bilo da se radi o dvije verzije naslova i njihovoj kopiji, samoj slici junaka, odjeljku izgleda, veličini fonta ili bilo čemu drugom što vam padne na pamet) - to je potpuno na vama.
Zamislite da ste odlučili koristiti blend način kada korisnici lebde iznad vaše slike heroja, ali ne znate koji će način najviše poboljšati korisničko iskustvo.
Izvršite a A / B test između dvije različite opcije načina rada (na kraju krajeva postoji 13 opcija načina miješanja), omogućuje vam da isprobate više od jednog načina da vidite koji ima najviše lebdenja, klikova i na kraju više angažmana.
Jedan od najčešćih i najvažnijih koraka u A / B testiranju odjeljka vašeg heroja je i testiranje najmanje dvije opcije CTA gumba - kako bi se utvrdilo koji gumb ostvaruje najviše konverzija.
Točnije, testiranje boje CTA gumba uvijek je korisno iskustvo koje vam omogućuje da shvatite koja boja gumba najviše privlači i angažira korisnike. A / B testiranje boje gumba vrlo je popularno među web dizajnerima jer se brzo i lako izvodi i teško da zahtijeva dodatne resurse za dizajn.
Koristite alate toplinske karte za otkrivanje ponašanja korisnika
Alati toplinske karte identificiraju i analiziraju mjesta na kojima korisnici kliknu na web stranicu. Ovi alati omogućuju vlasnicima web stranica i odredišnih stranica da vide kako se korisnici aktivno kreću po sadržaju. To se postiže nakon što alat identificira stupaju li korisnici u interakciju s ključnim elementima (i kako), poput veza, gumba, opcija i, naravno, CTA -ova.
Evo nekoliko podataka koje vlasnici web stranica mogu dobiti pomoću alata za toplinsku kartu:
- Stavke na koje se ne može kliknuti odvlače pažnju korisnika.
- Veličine gumba su prevelike ili premale.
- Boje gumba nisu vidljive.
Budite heroj svoje web stranice
Trendovi web stranica neprestano se razvijaju, dodajući nove značajke mogućnostima web dizajna. Uvijek je važno da vaš odjeljak s junacima bude u prvom planu vaših dizajnerskih razmatranja - pazeći da uvijek ostvari svoj potencijal u predstavljanju vašeg web mjesta mnoštvu.
Nabavite Elementor Pro odmah!
Zaključak
Ovdje! To je to za ovaj članak koji vam pokazuje kako napraviti herojsku sliku. Ako imate bilo kakvih nedoumica kako doći tamo fjavite nam u Komentari.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
