Obrázky hrdinov sú to, čo tvorcovia webových stránok často používajú na privítanie návštevníkov svojich webových stránok v atraktívnom formáte.
Ak ste niekedy premýšľali „ čo je obraz hrdinu? ", Ste na správnom mieste. V tomto článku sa pozrieme na túto tému a na to, ako môžete vytvárať nádherné obrázky hrdinov s výkonnými vizuálnymi efektmi.
Obrázok hrdinu je termín, ktorý tvorcovia webových stránok používajú na opísanie nadrozmerného obsahu v hornej časti webovej stránky.
Úlohou hrdinského imidžu je privítať vašu návštevu hneď, ako stretne vašu spoločnosť resp organizácie. Množstvo typov obrázkov hrdinu v súprave nástrojov na tvorbu webu prináša toľko dôvodov, prečo zahrnúť obrázok hrdinu do vašej webovej lokality.
Poďme pochopiť hlavné výhody tohto postupu a prečo?
Čo je obraz hrdinu?
V objatí „dobrého prvého dojmu“ majú obrazy hrdinov zvyčajne jednu alebo viac z nasledujúcich charakteristík:
- Vysoko kvalitný obrázok
- Podmanivé video
- Posúvač obrázkov alebo multimediálny kolotoč
- Animované alebo statické ilustrácie
- Hlavičky a popisy vedľa alebo pred vizuálnym obsahom
Pokiaľ ide o štýl, medzi bežné detaily dizajnu, ktoré uvidíte pri obrázkoch hrdinov, patria:
- Obrázky na pozadí alebo videá s prekrytím pozadia
- Pevné alebo lepkavé umiestnenie
- Namierenie ovplyvňuje zmenu priehľadnosti alebo prekrytia
- Prvky kontrastu, ktoré odlišujú obraz od hlavičky nad alebo nasledujúceho obsahu
Novinkou obrázkov hrdinov vo webdizajne je, že na jednej strane pracujete s veľmi špecifickým a definovaným priestorom na webovej stránke. Na druhej strane, možnosti štýlu, efektov a techník, ktoré sa majú použiť pri navrhovaní tejto časti obsahu vašej stránky, sú absolútne nekonečné.
Prečo by ste mali používať obrázok hrdinu?
Keď je dizajn a funkčnosť vášho hrdinského obrazu na vysokej úrovni, automaticky dosiahnete dôveryhodnosť a dôveru používateľa. Obraz vášho hrdinu a jeho okolitý obsah často predstavujú vašu prvú príležitosť na odovzdanie vašej jedinečnej predajnej stránky organizácie a hlavný používateľský kontaktný bod pre konverziu.
Pri hľadaní spúšťania určitého správania používateľov je najlepším spôsobom, ako začať, prvotriedny a výkonný obraz hrdinu, ktorý na vašich návštevníkov urobí silný prvý dojem.
Môžete urobiť trvalý prvý dojem
Prvý dojem je dôležitý v mnohých oblastiach života, ale najmä pokiaľ ide o vzťah používateľov k estetike webových stránok.
Výsledky odborníkov na interakciu človek - stroj (HCI) a vizualizáciu na Výskum Google osvedčiť vplyv obrázkov hrdinov na úspešnosť webovej stránky:
Táto štúdia, " Úloha vizuálnej zložitosti a prototypu v prvých dojmoch webových stránok : práca na porozumení estetickým úsudkom ”, Štúdie toho, ako vizuálna zložitosť a prototypickosť ovplyvňujú návrh webovej stránky a prvé dojmy jej používateľov.
Autori ukázali účastníkom štúdie 119 aktuálnych snímok obrazovky z webu a zistili, že vizuálna zložitosť a prototypickosť ovplyvňujú estetické vnímanie používateľa na prvých 50 obrázkoch výstavy a niekedy dokonca do 17 ms.
Ako tvorcovia webových stránok je náš záver celkom jednoduchý: Obrázok hrdinu, ktorý si vyberieme, a spôsob, akým ho prezentujeme na našej stránke, zásadným spôsobom ovplyvňuje sentiment a správanie používateľov.
Nad záhybom stránky získate maximum zo svojho obsahu
Sekciu „nad záhybom stránky“ na webovej stránke je možné definovať jednoduchými slovami: obsah, ktorý vyplní vašu obrazovku / sa zobrazí nad dolným okrajom okna webového prehliadača po načítaní stránky. Ak obsah vyžaduje viditeľné posúvanie, znamená to, že je umiestnený „pod záhybom stránky“.
Koncept „over the fold“ vznikol v tlačenom dizajne a vydavateľstve dávno pred érou digitálnych médií. Všetci vieme, aké to je, okamžite si všimnúť niečo v hornej polovici prvej stránky, a dokonca sa dá povedať, že obsah na prvej stránke je často to, čo nás núti rozhodnúť sa, či si kúpime alebo nie. Noviny alebo jednoducho prestať v novinovom stánku.
To je presne dôvod, prečo môže byť váš obsah nad záhybom stránky zásadným zlomom v úspechu vášho webu.
Čo máme na mysli
Ak je návštevník webu zmätený vaším obsahom a obrázkami nad záhybom stránky, rýchlo opustí váš web. Ak je váš obraz hrdinu a jeho prostredie nad záhybom stránky jasné, pútavé a dobre reprezentujú vašu hodnotovú ponuku, bude mať väčšiu tendenciu zostať pri tom.
Čím viac investujete do obrazu a obsahu svojej hrdinskej sekcie, tým menej je pravdepodobné, že používatelia rýchlo odídu.
Nezabudnite na responzívny dizajn
Pamätajte, že umiestnenie ohybu obrazovky je subjektívne k veľkosti obrazovky zariadenia. Toto je dôležité zohľadnenie v responzívnom dizajne, pretože obsah nad záhybom stránky by mal byť prispôsobený a nakonfigurovaný spôsobom, ktorý je použiteľný pre viacero veľkostí zariadení.
Weboví dizajnéri a vývojári často používajú hraničné hodnoty špecifické pre dané zariadenie na zabezpečenie tejto odozvy. Získate tak úplnú kontrolu nad prispôsobivosťou dizajnu svojej webovej stránky príslušným veľkostiam obrazovky a vyhnete sa tak kompromitovanému vzhľadu alebo dopadu obrazu svojho hrdinu.
Uveďte svoju hodnotovú ponuku bez preťaženia informáciami
Možno poznáte pojem „prebytok informáciíV dizajne webových stránok a užívateľskú skúsenosť : Chceme sa vyhnúť používaniu príliš veľkého množstva obsahu, najmä písomného, pri reprezentovaní našej značky a našej obchodnej hodnoty.
V tomto zmysle má použitie obrázka, ilustrácie alebo videa hodnotu 1 000 slov. Doladenie efektívnych snímok značky zachytí celý váš príbeh v jednom vizuálnom médiu. Namiesto verbalizácie vášho príbehu a návrhu značky budete pravdepodobne môcť jednoduchým a užívateľsky príjemným spôsobom odľahčiť kognitívne zaťaženie používateľa.
Screenshot vyššie je prevzatý z Millbrookova konštrukcia, perthská stavebná spoločnosť špecializujúca sa na „rezidenčné stavby so špičkovými povrchovými úpravami a dôrazom na detail“. Pre svojich webových stránok Elementor obrázok hrdinu na domovskej stránke dokonale využíva rozhranie „nad záhybom stránky“. Pútavá a svieža fotografia šťastného moderného domáceho a vonkajšieho bazéna vyvoláva pozitívne, relaxačné vibrácie.
Pokiaľ ide o krok ďalej, výber štýlov obrázka na pozadí celej výšky a veľkosť „prikrývky“ naznačujú robustný talent firmy pre vytváranie luxusných rezidenčných nehnuteľností. Hodnota je jasná ako voda v bazéne a používatelia pohodlne absorbujú všetky potrebné informácie.
Vaše obrázky hrdinov môžu pomôcť pri konvertovaní potenciálnych zákazníkov
Atraktívne a viditeľné kontaktné body sú základnou ingredienciou pre tok používateľov konverzie a reprodukcie. To je dôvod, prečo vzťah medzi výzvou sekcie hrdinov a vašim obrázkom hrdinu môže spôsobiť alebo narušiť vaše ciele v oblasti budovania webových stránok.
Dajte svojim textom s výzvou na akciu povedať „ Zaregistrujte sa teraz "," čítať ďalej "," Contactez-nous »Atď., Váš obrázok hrdinu musí byť transparentne koordinovaný na všetkých frontoch: viditeľnosť, zasielanie správ, farebná schéma, vzhľad atď.
Dôveryhodné a efektívne rozhovory s potenciálnymi klientmi sú založené na príjemnej a prirodzenej atmosfére; vizuálne príjemná snímka je najlepší spôsob, ako to dosiahnuť.
To je presne to, čo vidíme na webovej stránke Elementor, ktorú vytvoril Karikatúra STL, tím kreslených umelcov, ktorí poskytujú zábavné služby pre udalosti. Animovaný nadpis (text hrdinu) zobrazuje spokojných zákazníkov na ich obrázkoch hrdinov a ukazuje, čo karikaturisti poskytujú každému človeku.
Akonáhle si teda vyhrniete rukávy a začnete sa zaoberať praktickými potrebami, čo ide do procesu rozhodovania, aký typ obrazu hrdinu použiť?
Poďme preskúmať štyri rôzne typy obrázkov hrdinov a ako posúdiť, ktorý z nich bude pre váš web najvhodnejší.
# 1 Obrázok hrdinu produktu
Obrázok hrdinu produktu je veľký vysoký obrázok definícia produktu značky. Tieto obrázky môžu byť prezentované v statickom stave alebo v pohybe/v akcii, pokiaľ umožňujú vizualizovať hodnotovú ponuku produktu.
Medzi populárne spôsoby, ako medzi webovými návrhármi predviesť a prispôsobiť svoje obrázky hrdinov produktov, patria:
- Podrobný / momentkový príklad jednotlivého produktu, ako vidíme vyššie na webových stránkach spoločnosti austrálske predplatné avo milenec.
- Screenshot z rozhrania digitálneho produktu, ako je napríklad informačný panel.
Obrázky produktových hrdinov sa zvyčajne nachádzajú na webových stránkach spoločnostie-Commerce (ale nie výlučne). Potenciálni zákazníci očakávajú, že uvidia príklady skutočných produktov, ktoré podporia informované rozhodovanie o vhodnosti obchodu pre ich nákupné potreby.
Avo lover použil Elementor na vytvorenie svojej webovej stránky elektronického obchodu, ktorú ich klienti používajú na nákup týždenného predplatného čerstvého avokáda doručeného k ich dverám.
Zákaznícka základňa Avo lover's je špecializovaným trhom v úzko definovanej oblasti záujmu, takže ich výber imidžu hrdinu produktu dáva zmysel. Potenciálni predplatitelia sú nadšenci avokáda; čo chcú vidieť, je detailná a zložitá fotografia produktov.
Osvedčené postupy:
- Investujte do kvality obrázkov na pozadí
Či už je vaším obrázkom na pozadí fotografia, video, ilustrácia atď., Obrazový súbor by mal byť čo najľahší s krištáľovo čistým rozlíšením.
- Venujte pozornosť úrovniam kontrastu
Ak pridáte text pred obrázok sekcie hrdinu (alebo akýkoľvek komponent), skontrolujte, či je kontrast medzi prvkami webových stránok silný a ľahko viditeľný. To je miesto, kde môžu byť prekrytia pozadia a efekty filtra mimoriadne užitočné.
# 2 Obrázok hrdinu klienta
Nasledujúci typ obrázka hrdinu, ktorý používajú online podniky, má alternatívny prístup k preukázaniu svojej pridanej hodnoty: pri ukazovaní svojho zákazníka používaním produktu. Táto perspektíva je strategickým spôsobom, ako sa vcítiť do vašich návštevníkov, a tým stručne preukázať, že rozumiete ich bolestivým bodom a môžete vyhovieť ich potrebám.
Vyššie uvedený videoklip je prevzatý z webu Elementor vytvoreného používateľom Alexander Fisher, osobný tréner so sídlom v Stuggartu, ktorý poskytuje celý rad služieb týkajúcich sa zdravia a fitnes.
Obrázok Alexanderovho hrdinu zákazníka ukazuje viac ako spokojného zákazníka, ktorý si užíva zdravý a fit životný štýl. Obrázok hrdinu postúpi o krok ďalej, keď predstaví video, ktoré predstavuje spojenie jeho klienta a spojenie s blízkymi.
Osvedčené postupy:
- Podeľte sa o svoje prípady použitia a zákaznícke skúsenosti
Odlíšte svoj produkt uvedením jeho najdominantnejšieho prípadu použitia. Obrázok, ktorý vyjadruje vaše obchodné ciele a hodnotu, ukazuje, ako bude mať návštevník z vašej jedinečnej ponuky úžitok.
- Vzťahujú sa na vaše cieľové publikum
Pri výbere typu osoby, ktorá sa má zobraziť na vašom obrázku, sa uistite, či je zohľadnené vaše cieľové publikum. Vyberte si obrázok, ktorý komunikuje s vašimi znalosťami oboru a schopnosťou potešiť vašich zákazníkov.
# 3 Obrázok zakladajúceho hrdinu
Obrázok zakladajúceho hrdinu je veľký obrázok zakladateľa vlastníka firmy, ktorý je umiestnený v sekcii hrdina na pozdrav návštevníkov webu.
Obrázky zakladajúcich hrdinov sa často používajú na portfóliových weboch pre nezávislých pracovníkov, majiteľov firiem ako psychológ, vizážista alebo hudobník, ako je uvedené na Web spoločnosti Elementor hore Jasmine Cain.
Najväčšou cnosťou obrazu zakladajúceho hrdinu je to, že dáva meno tvári; spája návštevníka webu s poskytovateľom služieb a vytvára medzi týmito dvoma osobami príjemnú dynamiku.
S výberom obrázkov pre obrázok vášho zakladajúceho hrdinu by sa malo zaobchádzať opatrne. S množstvom možností na výber, ktoré sa dajú rozdeliť na:
čo najsilnejším spôsobom sprostredkuje odkaz vašej značky?
Je to fotka zakladateľa, ktorý sa pozerá priamo do kamery a usmieva sa, alebo sa možno pozerá iným smerom?
Alebo by sa viac hodila úprimná fotografia pracovitého majiteľa firmy?
Osvedčené postupy:
- Venujte pozornosť dimenzovaniu a rozmerom
Použite jasný, dobre veľký obrázok (alebo video), ktorý návštevníkom ukáže presné podrobnosti, ktoré potrebujú, aby videli. Ak je to potrebné, môžete sa zamerať na väčšie oblasti svojich obrázkov ich orezaním a odstránením menej dôležitého obsahu.
- Zamerajte sa na to, čo by mal váš obraz vyjadrovať
Úlohou pozadia by malo byť zameranie sa na osobu pred ním, nie naopak. Najefektívnejšie obrázky zakladajúceho hrdinu ukážu usmievajúceho sa majiteľa firmy, čo naznačuje jeho vášeň pre spokojnosť zákazníkov.
# 4 Bezkontextový obraz hrdinu
Nekontextové obrázky hrdinov sú, ako už názov napovedá, sekvencie, ktoré zobrazujú niečo, čo zdanlivo „nesúvisí“ s vlastníkom produktu alebo podniku. Účelom bezkontextového obrazu hrdinu je urobiť dojem na návštevníka prostredníctvom vizuálnej asociácie alebo podprahovej správy. Prezeranie nekontextového obrázka ukazuje používateľovi, aký je produkt alebo značka, ale nepriamo.
Táto technika sa používa napríklad vo vyššie uvedenom príklade z webovej stránky Elementor vytvorenej spoločnosťou pre digitálny marketing Technológia AP, so sídlom v Oklahome. Webová stránka spoločnosti používa široký a jasný obrázok na pozadí, ktorý ukazuje jedinečný uhol mrakodrapov mesta Oklahoma City.
Táto fotografia predstavuje hodnotový návrh spoločnosti, ako sa uvádza v hrdinskom texte webovej stránky: Rozvíjajte svoje podnikanie a sledujte, ako rastie, rovnako vysoké ako najvyššie kancelárske veže v meste.
Hneď ako ľudské oko uvidí fyzické štruktúry, ktoré dominujú na oblohe, pochopí, že títo marketingoví odborníci pracujú na tom, aby sa podniky dostali do výšin.
Osvedčené postupy:
- Uistite sa, že návštevníci chápu, prečo je obrázok relevantný
Aj keď nezobrazujete priamy vizuál samotného produktu, uistite sa, že prepojenie hodnoty vášho produktu s vašim nekontextovým obrázkom hrdinu je stále ľahké identifikovať. Používatelia by nemali mať potrebu tráviť čas premýšľaním o jeho relevantnosti.
- Vytvorte zreteľné prepojenie medzi obrázkom hrdinu a textom hrdinu
Text hlavného hrdinu, ktorý umiestnite v spojení s vašim obrázkom, by mal priamo súvisieť s jeho vizuálnym obsahom. Je to nevyhnutnosť, aj keď to vyžaduje niekoľko opakovaní vášho textu a výber znenia.
- Vytvorte súdržnú schému návrhu
Farby, ktoré zvolíte pre texty tlačidiel a pozadia, hlavičky alebo popisy, by mali byť v súlade s obrázkom alebo kresbou hrdinu. To platí aj pre klikateľné akcenty na vašom webe:
prvky navigačnej ponuky, logo atď.
Všetci vieme, aký dôležitý je konzistentný vizuálny jazyk pre prestíž našich webových stránok, prítomnosť značky a profesionálnu dôveryhodnosť. To je miesto, kde môžu byť sprievodcovia dizajnovými štýlmi skutočne užitoční, najmä pri zabezpečovaní toho, aby obrázky vašich hrdinov boli v súlade s dizajnom vášho webu.
Ako otestovať váš obraz hrdinu: metódy, ktoré sa nám páčia
Len čo začnete experimentovať s niekoľkými možnosťami svojho hrdinského obrazu, môžete okamžite posúdiť, ktorá z možností generuje najväčšiu angažovanosť, a získať prehľad o najefektívnejšom dizajne - a nakoniec sa ho držať.
Tu je niekoľko nevyhnutných testovacích metód, ktoré sa dajú ľahko nastaviť a poskytujú množstvo vedomostí, aby ste sa uistili, že používate najlepší možný obrázok hrdinu.
A / B Otestujte si svoj obraz hrdinu
Testovanie A / B vyžaduje, aby dizajnér vytvoril pre sekciu hrdinov dve alebo viac možností (či už sú to dve verzie titulov a ich kópií, samotný obrázok hrdinu, časť rozloženia, veľkosť písma alebo čokoľvek iné, na čo si spomeniete) - je to úplne na vás.
Predstavte si, že ste sa rozhodli použiť režim prelínania, keď používatelia umiestnia kurzor myši na váš obrázok hrdinu, ale neviete, ktorý režim zlepší používateľský zážitok najviac.
Vykonajte a A / B test medzi dvoma rôznymi možnosťami režimu (koniec koncov je tu 13 možností režimu prelínania), vám umožní vyskúšať viac ako jeden režim a zistiť, ktorý z nich najviac vznáša, klikne a v konečnom dôsledku prináša väčšiu interakciu.
Jedným z najbežnejších a najdôležitejších krokov pri testovaní sekcie A / B vášho hrdinu je tiež otestovanie najmenej dvoch možností tlačidla CTA - aby ste určili, ktoré tlačidlo získa najviac konverzií.
Konkrétne je testovanie farby tlačidla CTA vždy užitočnou skúsenosťou, ktorá vám umožní pochopiť, ktorá farba tlačidla používateľov zaujme a zaujme najviac. Testovanie farieb tlačidiel A / B je medzi webovými dizajnérmi veľmi populárne, pretože je rýchle a ľahké na vykonanie a ťažko vyžaduje ďalšie prostriedky na návrh.
Na zistenie správania používateľov použite nástroje tepelnej mapy
Nástroje tepelnej mapy identifikujú a analyzujú miesta, kde používatelia klikajú na webovú stránku. Tieto nástroje umožňujú majiteľom webových stránok a vstupných stránok presne vidieť, ako používatelia aktívne prechádzajú obsahom. To sa dosiahne, keď nástroj identifikuje, či používatelia interagujú s kľúčovými prvkami (a ako), ako sú odkazy, tlačidlá, možnosti a samozrejme CTA.
Tu je niekoľko informácií, ktoré môžu vlastníci webových stránok získať pomocou nástrojov tepelnej mapy:
- Položky, na ktoré sa nedá kliknúť, odvádzajú pozornosť používateľov.
- Veľkosti gombíkov sú príliš veľké alebo príliš malé.
- Farby tlačidiel nie sú viditeľné.
Staňte sa hrdinom svojej webovej stránky
Trendy webových stránok sa neustále vyvíjajú a do možností webového dizajnu pridávajú nové funkcie. Vždy je dôležité, aby ste sekciu svojich hrdinov držali v popredí svojich úvah o dizajne - uistite sa, že vždy dosiahne svoj potenciál pri prezentácii svojej webovej stránky davom.
Získajte teraz prvok Elementor!
záver
Tu ! To je všetko pre tento článok, ktorý vám ukáže, ako vytvoriť obraz hrdinu. Ak máte nejaké obavy, ako sa tam dostať, fdajte nám vedieť v Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
