Imaginile erou sunt ceea ce utilizează adesea creatorii de web pentru a saluta vizitatorii site-ului lor într-un format atractiv.
Dacă te-ai întrebat vreodată " ce este o imagine de erou? ", Ești în locul potrivit. În acest articol, vom arunca o privire asupra subiectului și a modului în care puteți crea imagini de erou frumoase, cu efecte vizuale puternice.
O imagine erou este termenul folosit de creatorii web pentru a descrie conținutul supradimensionat din partea de sus a unei pagini web.
Rolul unei imagini de erou este de a vă întâmpina vizitatorul imediat ce vă întâlnesc compania sau organizație. Abundența de tipuri de imagini eroi din setul de instrumente de creație web aduce atât de multe motive pentru a include o imagine de erou pe site-ul dvs. web.
Să înțelegem principalele avantaje ale acestui lucru și de ce?
Ce este o imagine de erou?
Imbrățișând virtutea unei "prime impresii bune", imaginile eroilor au de obicei una sau mai multe dintre următoarele caracteristici:
- O imagine de înaltă calitate
- Un videoclip captivant
- Un glisor de imagine sau un carusel multimedia
- Ilustrație animată sau statică
- Anteturi și descrieri lângă sau în fața conținutului vizual
În ceea ce privește stilul, detaliile de design obișnuite pe care le veți vedea aplicate imaginilor erou includ:
- Imagini de fundal sau videoclipuri cu suprapuneri de fundal
- Poziționare fixă sau lipicioasă
- Arătarea afectează schimbarea transparenței sau a suprapunerii
- Elemente de contrast care diferențiază imaginea de antetul de mai sus sau conținutul ulterior
Noutatea imaginilor erou în designul web este că, pe de o parte, lucrați cu un spațiu foarte specific și definit pe pagina web. Pe de altă parte, alegerile de stil, efecte și tehnici de utilizat atunci când proiectați această parte a conținutului paginii dvs. sunt absolut nesfârșite.
De ce ar trebui să folosești o imagine de erou?
Când designul și funcționalitatea imaginii eroului tău au un calibru ridicat, obții automat credibilitatea și încrederea utilizatorilor. Imaginea dvs. de erou și conținutul de erou din jur reprezintă adesea prima dvs. oportunitate de a transmite punctul de vânzare unic al dvs organizație și principalul punct de contact al utilizatorului pentru conversie.
Atunci când căutați să declanșeze anumite comportamente ale utilizatorilor, cea mai bună modalitate de a începe este o imagine erou puternică de primă clasă, care face o impresie puternică vizitatorilor dvs.
Puteți face o primă impresie de durată
Primele impresii contează în multe domenii ale vieții, dar mai ales atunci când vine vorba despre modul în care utilizatorii se raportează la estetica site-ului web.
Rezultatele experților în interacțiunea om-mașină (HCI) și vizualizare la Google Research atestă influența imaginilor eroilor asupra succesului unui site web:
Acest studiu, " Rolul complexității vizuale și al prototipului în primele impresii ale site-ului web : lucrați la înțelegerea judecăților estetice ”, Studiază modul în care complexitatea vizuală și prototipul impactează designul unui site web și primele impresii ale utilizatorilor săi.
Autorii au arătat 119 capturi de ecran reale de pe site către participanții lor la studiu și au descoperit că complexitatea vizuală și prototipul afectează percepția estetică a utilizatorului în primele 50 de imagini ale expoziției și, uneori, chiar și în termen de 17 ms.
Ca creatori de web, concluzia noastră este destul de simplă: imaginea eroului pe care o alegem și modul în care o prezentăm pe pagina noastră influențează sentimentul și comportamentul utilizatorilor într-un mod major.
Veți profita la maximum de conținutul dvs. deasupra paginii
Secțiunea „deasupra paginii” a unei pagini web poate fi definită în termeni simpli: conținutul care vă umple ecranul / apare deasupra marginii de jos a ferestrei browserului web după încărcarea paginii. Dacă conținutul necesită derularea pentru a fi văzut, înseamnă că este situat „sub pli”.
Conceptul de „deasupra plăcii” își are originile în proiectarea tipărită și publicarea, cu mult înainte de era mediei digitale. Știm cu toții cum este să observăm imediat ceva în jumătatea superioară a primei pagini și este chiar sigur să spunem că conținutul de pe prima pagină este ceea ce ne face să decidem dacă cumpărăm sau nu. Un ziar sau doar să ne oprim la un chioșc de ziare.
Acesta este exact motivul pentru care conținutul dvs. de deasupra paginii poate constitui un factor important în succesul site-ului dvs. web.
La ce ne referim?
Dacă un vizitator al site-ului web este confuz de conținutul și imaginile dvs. de deasupra plajei, acesta va părăsi rapid site-ul dvs. web. Dacă imaginea eroului tău și împrejurimile sale deasupra fâșiei sunt clare, captivante și bine reprezentative pentru propunerea ta de valoare, el va fi mai înclinat să rămână.
În cele din urmă, cu cât investiți mai mult în imaginea și conținutul secțiunii erou, cu atât este mai puțin probabil ca utilizatorii să facă o ieșire rapidă.
Nu uitați de Responsive Design
Rețineți că locația unei pliuri a ecranului este subiectivă în funcție de dimensiunea ecranului dispozitivului. Acesta este un aspect important în proiectarea receptivă, deoarece conținutul de pliere ar trebui să fie personalizat și configurat într-un mod care să se aplice mai multor dimensiuni de dispozitiv.
Designerii și dezvoltatorii de web folosesc adesea puncte de întrerupere specifice dispozitivului pentru a garanta această reacție. Acest lucru vă oferă un control complet asupra adaptabilității designului site-ului dvs. web la dimensiunile relevante ale ecranului și evită aspectul compromis sau impactul imaginii eroului dvs.
Indicați propunerea dvs. de valoare fără supraîncărcare de informații
Este posibil să fiți familiarizați cu conceptul de „supraîncărcare informaționalăÎn proiectarea site-ului web și experiența utilizatorului : Vrem să evităm să folosim prea mult conținut, în special conținut scris, atunci când ne reprezentăm marca și valoarea afacerii.
În acest sens, utilizarea unei imagini, a unei ilustrații sau a unui videoclip merită 1 de cuvinte. Reglarea fină a imaginilor de branding eficiente vă va surprinde întreaga poveste într-un singur mediu vizual. În loc să vă verbalizați povestea și propunerea de branding, este posibil să puteți ușura sarcina cognitivă asupra utilizatorului dvs. într-un mod simplu și ușor de utilizat.
Captura de ecran de mai sus este preluată din Construcții Millbrook, o companie de construcții din Perth, specializată în „construcții rezidențiale cu finisaje high-end și atenție la detalii”. Pentru site-ul lor Elementor, imaginea erou de pe pagina de pornire folosește perfect interfața sa „deasupra paginii”. Fotografia atrăgătoare și clară a unei case moderne fericite și a unei piscine în aer liber declanșează vibrații pozitive și relaxante.
Făcând un pas mai departe, alegerile de stil ale imaginii de fundal pe toată înălțimea și dimensiunea unei „pături” indică abilitatea robustă a firmei de a crea proprietăți rezidențiale de lux. Propunerea de valoare este la fel de clară ca apa piscinei, iar utilizatorii absorb confortabil toate informațiile necesare.
Imaginile eroului dvs. vă pot ajuta să convertiți clienții potențiali
Punctele de contact atractive și vizibile sunt un ingredient de bază pentru un flux de utilizator de conversie-reproducere. Acesta este motivul pentru care relația dintre apelul la acțiune al secțiunii erou și imaginea eroului în sine poate face sau sparge obiectivele de construire a site-ului dvs. web.
Lăsați textele dvs. CTA să spună „ Înregistrează-te acum "" Citește mai mult "" Contactati-ne », Etc., imaginea eroului tău trebuie să fie coordonată în mod transparent pe toate fronturile: vizibilitate, mesagerie, schemă de culori, aspect etc.
Conversațiile credibile și eficiente cu potențialii clienți se bazează pe o atmosferă confortabilă și naturală; imagini plăcute vizual este cea mai bună modalitate de a realiza acest lucru.
Este exact ceea ce vedem pe site-ul web Elementor creat de Caricatură STL, o echipă de artiști cu desene animate care oferă servicii de divertisment pentru evenimente. Titlul animat (textul eroului) descrie clienții fericiți în imaginile lor erou, arătând ceea ce artiștii de desene animate oferă fiecărei persoane.
Deci, odată ce ți-ai suflecat mânecile și ai început să intri în practic, ce intră în procesul de a decide ce tip de imagine de erou să folosească?
Să explorăm cele patru tipuri diferite de imagini erou și cum să evaluăm care va fi cea mai potrivită pentru site-ul dvs. web.
# 1 Imagine erou produs
O imagine de erou de produs este o imagine mare mare definiție a produsului mărcii. Aceste imagini pot fi prezentate în statice sau în mișcare/în acțiune, atâta timp cât permit vizualizarea propunerii de valoare a produsului.
Modalitățile populare printre designerii de web de a-și prezenta și personaliza imaginile cu eroii produsului pot include:
- Un exemplu detaliat / instantaneu al unui produs individual, așa cum vedem mai sus pe site-ul companiei Abonament australian Avo Lover.
- Captură de ecran a unei interfețe digitale a produsului, cum ar fi un tablou de bord.
Imaginile eroilor produsului se găsesc de obicei pe site-urile web alee-Commerce (dar nu exclusiv). Cumpărătorii potențiali se așteaptă să vadă exemple de produse reale, care să sprijine luarea deciziilor informate cu privire la adecvarea magazinului pentru nevoile lor de cumpărături.
Iubitorul Avo a folosit Elementor pentru a-și crea site-ul web de comerț electronic, pe care clienții lor îl folosesc pentru a achiziționa abonamente săptămânale de avocado proaspăt livrat la ușa lor.
Baza de clienți a iubitorului Avo este o piață de nișă într-o zonă de interes limitată, așa că alegerea lor pentru imaginea eroului produsului are un sens perfect. Abonații potențiali sunt pasionați de avocado; a vedea o fotografie de aproape și complicată a produselor este exact ceea ce caută să vadă.
Cele mai bune practici:
- Investiți în calitatea imaginilor de fundal
Fie că imaginea de fundal este o fotografie, un videoclip, o ilustrație etc., fișierul de imagine ar trebui să fie cât mai ușor posibil, cu o rezoluție clară.
- Acordați atenție nivelurilor de contrast
Dacă adăugați text în fața imaginii secțiunii eroului (sau a unei componente de orice fel), asigurați-vă că contrastul dintre elementele site-ului web este puternic și ușor de văzut. Aici suprapunerile de fundal și efectele de filtrare pot fi extrem de utile.
# 2 Imaginea eroului client
Următorul tip de imagine erou utilizat de companiile online adoptă o abordare alternativă pentru a-și arăta valoarea adăugată: arătarea clienților folosind produsul. Această perspectivă este un mod strategic de a empatiza cu vizitatorii dvs., demonstrând succint că le înțelegeți durerea și că le puteți satisface nevoile.
Videoclipul de mai sus este preluat de pe site-ul Elementor creat de Alexander Fisher, un antrenor personal cu sediul în Stuggart, care oferă o serie de servicii legate de sănătate și fitness.
Imaginea eroului client al lui Alexander arată mai mult decât un client mulțumit care se bucură de un stil de viață sănătos și potrivit. Imaginea eroului face un pas mai departe prin prezentarea unui videoclip care prezintă legătura clientului său și conectarea cu cei dragi.
Cele mai bune practici:
- Împărtășiți-vă cazurile de utilizare și experiența clienților
Diferențiați produsul arătând cel mai dominant caz de utilizare. O imagine care vă transmite obiectivele și valoarea afacerii arată modul în care vizitatorul va beneficia de oferta dvs. unică.
- Relaționați-vă cu publicul țintă
Asigurați-vă că publicul țintă este luat în considerare atunci când selectați tipul de persoană pe care doriți să o prezentați în imaginea dvs. Alegeți o imagine care să vă comunice înțelegerea domeniului și capacitatea de a vă încânta clienții.
# 3 Imaginea eroului fondator
O imagine erou fondator este o imagine mare a fondatorului proprietarului afacerii, plasată în secțiunea erou pentru a saluta vizitatorul site-ului.
Imaginile eroilor fondatori sunt adesea folosite în portofoliile de site-uri web ale unor profesioniști independenți, proprietari de afaceri, cum ar fi un psiholog, artist de machiaj sau muzician, așa cum se arată pe Site-ul Elementor de Jasmine Cain de mai sus.
Cea mai mare virtute a unei imagini erou fondatoare este aceea că pune fața unui nume; conectează vizitatorul site-ului web la furnizorul de servicii, creând o dinamică plăcută între cele două persoane.
Alegerea imaginilor pentru imaginea eroului fondator ar trebui tratată cu grijă. Cu o mulțime de opțiuni din care să alegeți, care se rezumă la:
ce va transmite mesajul mărcii dvs. în cel mai puternic mod posibil?
Este o fotografie a fondatorului care privește direct camera și zâmbește sau poate că privește într-o altă direcție?
Sau, ar fi mai potrivită o fotografie sinceră a proprietarului de muncă harnic?
Cele mai bune practici:
- Acordați atenție dimensiunilor și dimensiunilor
Utilizați o imagine (sau un videoclip) clară, bine dimensionată, care arată vizitatorilor detaliile exacte pe care trebuie să le vadă. Dacă este necesar, vă puteți concentra pe zone mai mari ale imaginilor tăind-le și eliminând conținutul mai puțin important.
- Concentrați-vă pe ceea ce ar trebui să transmită imaginea dvs.
Rolul fundalului ar trebui să fie să te concentrezi pe persoana din fața sa, nu invers. Cele mai impactante imagini ale eroului fondator îl vor arăta pe zâmbitorul proprietar al afacerii, implicându-și pasiunea pentru a-i menține pe clienți fericiți.
# 4 Imagine de erou non-contextuală
Imaginile eroului non-contextuale sunt, după cum sugerează și numele, secvențe care afișează ceva aparent „fără legătură” cu proprietarul produsului sau al afacerii. Scopul unei imagini de erou non-contextuale este de a impresiona vizitatorul prin asociere vizuală sau printr-un mesaj subliminal. Vizualizarea imaginii non-contextuale arată utilizatorului care este produsul sau marca, dar într-un mod indirect.
Această tehnică este utilizată, de exemplu, în exemplul de mai sus de pe site-ul web Elementor construit de compania de marketing digital Tehnologia AP, cu sediul în Oklahoma. Site-ul web al companiei folosește o imagine de fundal largă și clară, care arată un unghi unic al zgârie-nori din Oklahoma City.
Această fotografie reprezintă propunerea de valoare a companiei, așa cum se menționează în textul eroului site-ului web: Construiește-ți afacerea și urmărește-o cum crește, la fel de înaltă ca cele mai înalte turnuri de birouri din oraș.
De îndată ce ochiul uman vede structurile fizice care domină cerul, înțelege că acești profesioniști în marketing lucrează pentru a ridica afacerile de la sol, la înălțime.
Cele mai bune practici:
- Asigurați-vă că vizitatorii înțeleg de ce este relevantă imaginea
Deși nu afișați o vizualizare directă a produsului dvs. în sine, asigurați-vă că conectarea valorii produsului dvs. cu imaginea eroului non-contextual este încă ușor de identificat. Utilizatorii nu ar trebui să aibă nevoie să petreacă timp gândindu-se la relevanța sa.
- Faceți o legătură clară între imaginea eroului și textul eroului
Textul erou pe care îl plasați împreună cu imaginea dvs. ar trebui să se raporteze direct la conținutul său vizual. Este o necesitate, chiar dacă necesită mai multe iterații ale textului dvs. și alegerea formulării.
- Creați o schemă de proiectare coerentă
Culorile pe care le alegeți pentru textele butoanelor și fundalurile, anteturile sau descrierile ar trebui să se coordoneze cu imaginea eroului sau cu opera de artă. Acest lucru se aplică și accentelor care pot fi făcute clic pe site-ul dvs. web:
elementele meniului de navigare, sigla etc ...
Știm cu toții cât de important este un limbaj vizual consistent pentru prestigiul site-ului nostru web, prezența mărcii noastre și credibilitatea profesională. Aici ghidurile de stil de proiectare pot fi cu adevărat utile, mai ales pentru a vă asigura că imaginile eroului dvs. sunt aliniate cu designul site-ului dvs. web.
Cum să vă testați imaginea eroului: metodele care ne plac
Odată ce începeți să experimentați mai multe opțiuni pentru imaginea eroului dvs., puteți evalua imediat ce opțiune generează cea mai mare implicare și puteți obține o perspectivă asupra celui mai eficient design - și, în cele din urmă, să rămâneți cu acea opțiune.
Iată câteva metode de testare obligatorii, ușor de configurat și care oferă o mulțime de cunoștințe pentru a vă asigura că utilizați cea mai bună imagine de erou posibilă.
A / B Testează imaginea eroului tău
Testarea A / B necesită proiectantului să creeze două sau mai multe opțiuni pentru secțiunea erou (indiferent dacă este vorba despre două versiuni ale titlurilor și ale copiei lor, imaginea eroului în sine, secțiunea de aspect, dimensionarea fontului sau orice altceva vă puteți gândi) - depinde complet de tine.
Imaginați-vă că ați decis să utilizați un mod de amestecare atunci când utilizatorii trec peste imaginea eroului dvs., dar nu știți ce mod va îmbunătăți cel mai mult experiența utilizatorului.
Efectuați un Test A / B între două opțiuni de mod diferite (există 13 opțiuni de mod de amestecare, la urma urmei), vă permite să încercați mai mult de un mod pentru a vedea care obține cele mai multe deplasări, clicuri și, în cele din urmă, mai multă implicare.
Unul dintre cei mai comuni și importanți pași din testarea A / B a secțiunii eroului dvs. este să testați, de asemenea, cel puțin două opțiuni de buton CTA - pentru a identifica care buton obține cele mai multe conversii.
Mai exact, testarea culorii unui buton CTA este întotdeauna o experiență utilă, care vă permite să înțelegeți ce culoare a butonului atrage și atrage cel mai mult utilizatorii. Testarea A / B a culorii butoanelor este foarte populară printre designerii de web, deoarece este rapidă și ușor de realizat și nu necesită resurse suplimentare de proiectare.
Utilizați instrumentele de hartă termică pentru a descoperi comportamentul utilizatorilor
Instrumentele Heatmap identifică și analizează locurile în care utilizatorii fac clic pe o pagină web. Aceste instrumente permit proprietarilor de site-uri web și pagini de destinație să vadă exact modul în care utilizatorii navighează activ în conținut. Acest lucru se realizează odată ce instrumentul identifică dacă utilizatorii interacționează sau nu cu elemente cheie (și cum), cum ar fi linkuri, butoane, opțiuni și, bineînțeles, CTA-uri.
Iată câteva informații pe care proprietarii de site-uri web le pot obține din utilizarea instrumentelor de hartă termică:
- Articolele care nu pot fi făcute clic distrează utilizatorii.
- Dimensiunile butoanelor sunt prea mari sau prea mici.
- Culorile butoanelor nu sunt vizibile.
Fii eroul site-ului tău
Tendințele site-urilor web sunt în continuă evoluție, adăugând noi caracteristici posibilităților de proiectare web. Este întotdeauna important să păstrați secțiunea erou pe primul plan în ceea ce privește aspectele de proiectare - asigurându-vă că își atinge întotdeauna potențialul în prezentarea site-ului dvs. mulțimilor.
Obțineți Elementor Pro acum!
Concluzie
Aici ! Gata pentru acest articol care vă arată cum să creați o imagine de erou. Dacă aveți nelămuriri cu privire la modul de a ajunge acolo fanunțați-ne în comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
