Obrázky hrdinů jsou to, co tvůrci webových stránek často používají, aby přivítali návštěvníky svého webu v atraktivním formátu.
Pokud jste někdy přemýšleli " co je obrázek hrdiny? ", Jste na správném místě. V tomto článku se podíváme na toto téma a na to, jak můžete vytvářet krásné obrazy hrdinů s výkonnými vizuálními efekty.
Obrázek hrdiny je termín používaný tvůrci webu k popisu nadměrně velkého obsahu v horní části webové stránky.
Úlohou image hrdiny je přivítat vaši návštěvu, jakmile se setká s vaší firmou resp organizace. Množství typů obrázků hrdinů v sadě nástrojů pro tvorbu webu přináší tolik důvodů, proč zahrnout obrázek hrdiny na váš web.
Pojďme pochopit hlavní výhody tohoto postupu a proč?
Co je to obrázek hrdiny?
Objímání ctnosti „dobrého prvního dojmu“ má obrazy hrdinů obvykle jednu nebo více z následujících charakteristik:
- Vysoce kvalitní obraz
- Podmanivé video
- Posuvník obrázku nebo multimediální kolotoč
- Animované nebo statické ilustrace
- Záhlaví a popisy vedle nebo před vizuálním obsahem
Pokud jde o styling, mezi běžné detaily designu, které uvidíte u obrázků hrdinů, patří:
- Obrázky na pozadí nebo videa s překryvnými pozadí
- Pevné nebo lepkavé umístění
- Ukázání ovlivňuje změnu průhlednosti nebo překrytí
- Prvky kontrastu, které odlišují obraz od záhlaví výše nebo následného obsahu
Novinkou obrázků hrdinů ve webovém designu je, že na jedné straně pracujete s velmi specifickým a definovaným prostorem na webové stránce. Na druhou stranu jsou možnosti stylu, efektů a technik, které se mají použít při navrhování této části obsahu stránky, naprosto nekonečné.
Proč byste měli používat obrázek hrdiny?
Když má design a funkčnost vašeho hrdinského obrazu vysokou úroveň, automaticky dosáhnete uživatelské důvěryhodnosti a důvěry. Váš obrázek hrdiny a jeho okolní obsah často představují vaši první příležitost, jak předat svůj jedinečný prodejní argument organizace a hlavním kontaktním místem uživatele pro konverzi.
Při pohledu na spuštění určitého chování uživatele je nejlepší začít prvotřídním a silným obrázkem hrdiny, který na vaše návštěvníky udělá silný první dojem.
Můžete udělat trvalý první dojem
První dojmy jsou důležité v mnoha oblastech života, ale zejména pokud jde o to, jaký vztah mají uživatelé k estetice webových stránek.
Výsledky odborníků na interakci člověk-stroj (HCI) a vizualizaci na Výzkum Google osvědčovat vliv obrázků hrdinů na úspěch webu:
Tato studie, " Role vizuální složitosti a prototypu v prvních dojmech webových stránek : pracovat na porozumění estetickým úsudkům ”, Studuje, jak vizuální složitost a prototypičnost ovlivňují design webové stránky a první dojmy jejích uživatelů.
Autoři účastníkům studie ukázali 119 skutečných snímků obrazovky z webových stránek a zjistili, že vizuální složitost a prototypičnost ovlivňují estetické vnímání uživatele v prvních 50 obrázcích exponátu a někdy dokonce do 17 ms.
Jako tvůrci webu je náš závěr docela jednoduchý: Obraz hrdiny, který si vybereme, a způsob, jakým jej prezentujeme na naší stránce, zásadním způsobem ovlivňují sentiment a chování uživatelů.
Ze záhybu svého obsahu vytěžíte maximum
Sekce „nad okrajem“ webové stránky lze definovat jednoduše: obsah, který vyplní vaši obrazovku / se zobrazí po dolním okraji okna webového prohlížeče po načtení stránky. Pokud obsah vyžaduje posouvání, znamená to, že je umístěn „pod okrajem“.
Koncept „nad okrajem“ má svůj původ v tiskovém designu a vydávání, dlouho před érou digitálních médií. Všichni víme, jaké to je, okamžitě si všimnout něčeho v horní polovině první stránky, a dokonce lze s jistotou říci, že obsah na první stránce je často to, co nás nutí rozhodovat se, zda koupit nebo ne. Noviny nebo prostě přestat v novinovém stánku.
To je přesně důvod, proč váš obsah nad okrajem může významně narušit úspěch vašeho webu.
Co máme na mysli
Pokud je návštěvník webu zmaten vaším obsahem a obrázky nad okrajem, rychle opustí váš web. Pokud je váš obraz hrdiny a jeho okolí nad záhybem jasný, poutavý a dobře reprezentuje vaši hodnotovou nabídku, bude mít větší tendenci se držet.
Nakonec, čím více investujete do obrazu a obsahu svého hrdinského oddílu, tím méně je pravděpodobné, že uživatelé rychle odejdou.
Nezapomeňte na responzivní design
Pamatujte, že umístění ohybu obrazovky je subjektivní vzhledem k velikosti obrazovky zařízení. Toto je důležitá úvaha v responzivním designu, protože nad záhybem obsahu by měl být přizpůsoben a nakonfigurován způsobem, který je použitelný pro více velikostí zařízení.
Weboví designéři a vývojáři často používají zarážky specifické pro zařízení zaručit tuto odezvu. Získáte tak úplnou kontrolu nad přizpůsobivostí designu vašeho webu příslušným velikostem obrazovky a vyhnete se kompromitovanému vzhledu nebo dopadu obrazu hrdiny.
Uveďte svou hodnotovou nabídku bez přetížení informací
Možná znáte koncept „informační přetíženíV designu webových stránek a User Experience : Chceme se vyhnout používání příliš velkého obsahu, zejména psaného obsahu, když reprezentujeme naši značku a naši obchodní hodnotu.
V tomto smyslu má použití obrázku, ilustrace nebo videa hodnotu 1 000 slov. Vyladění efektivních snímků značky zachytí celý váš příběh na jednom vizuálním médiu. Místo verbalizace vašeho příběhu a nabídky značky můžete být schopni odlehčit kognitivní zátěž svého uživatele jednoduchým a uživatelsky přívětivým způsobem.
Snímek obrazovky výše je převzat z Stavba Millbrooku, stavební společnost se sídlem v Perthu, specializující se na „rezidenční výstavbu se špičkovými povrchovými úpravami a důrazem na detail“. Pro jejich webové stránky Elementor obrázek hrdiny na domovské stránce dokonale využívá jeho rozhraní „nad okrajem“. Poutavá a svěží fotografie šťastného moderního domova a venkovního bazénu vyvolává pozitivní, uvolňující vibrace.
Pokud jde o krok dále, výběr stylů obrázku na pozadí v plné výšce a velikost „deky“ naznačují robustní talent firmy pro vytváření luxusních rezidenčních nemovitostí. Hodnota je jasná jako voda v bazénu a uživatelé pohodlně absorbují všechny potřebné informace.
Vaše obrázky hrdinů mohou pomoci převést potenciální zákazníky
Atraktivní a viditelné kontaktní body jsou základní ingrediencí pro tok uživatelů konverze a reprodukce. To je důvod, proč vztah mezi výzvou sekce hrdinů k akci a samotným vaším obrazem hrdiny může způsobit nebo zlomit vaše cíle v budování webových stránek.
Nechte své texty CTA říkat „ Zaregistrujte se nyní "" číst dál "" Contactez-nous »Atd., Váš obraz hrdiny musí být transparentně koordinován na všech frontách: viditelnost, zasílání zpráv, barevné schéma, vzhled atd.
Důvěryhodné a efektivní rozhovory s potenciálními klienty jsou založeny na pohodlné a přirozené atmosféře; nejlepší je toho dosáhnout vizuálně příjemnými snímky.
To je přesně to, co vidíme na webu Elementor vytvořeném uživatelem Karikatura STL, tým cartoonish umělců, kteří poskytují zábavní služby pro akce. Animovaný název (text hrdiny) zobrazuje šťastné zákazníky na jejich obrázcích hrdinů a ukazuje, co umělci karikatur poskytují pro každou osobu.
Jakmile jste si vyhrnuli rukávy a začali se věnovat praktičnostem, co jde do procesu rozhodování, jaký typ obrazu hrdiny použít?
Pojďme prozkoumat čtyři různé typy obrázků hrdinů a jak posoudit, který z nich je pro váš web nejlepší.
# 1 Obrázek hrdiny produktu
Obrázek produktového hrdiny je velký vysoký obrázek definice produktu značky. Tyto obrázky mohou být prezentovány staticky nebo v pohybu/v akci, pokud umožňují vizualizovat hodnotovou nabídku produktu.
Mezi oblíbené způsoby, jak mezi webovými designéry předvést a přizpůsobit obrázky hrdinů produktů, patří:
- Podrobný / ukázkový příklad jednotlivého produktu, jak vidíme výše na webových stránkách společnosti australské předplatné avo milenec.
- Screenshot rozhraní digitálního produktu, například řídicího panelu.
Obrázky produktových hrdinů se obvykle nacházejí na webových stránkách společnostie-Commerce (ale ne výhradně). Potenciální zákazníci očekávají, že uvidí příklady skutečných produktů, které podpoří informované rozhodování o vhodnosti obchodu pro jejich nákupní potřeby.
Avo lover použil Elementor k vytvoření svých webových stránek elektronického obchodování, které jejich klienti používají k nákupu týdenních předplatných čerstvých avokád dodávaných k jejich prahu.
Zákaznická základna Avo lover's je specializovaným trhem v úzce definované oblasti zájmu, takže jejich výběr image hrdiny produktu dává smysl. Potenciální předplatitelé jsou nadšenci avokáda; vidět detailní a složitou fotografii produktů je přesně to, co chtějí vidět.
Osvědčené postupy:
- Investujte do kvality obrázků na pozadí
Ať už je vaším obrázkem na pozadí fotografie, video, ilustrace atd., Obrazový soubor by měl být co nejsvětlejší s křišťálově čistým rozlišením.
- Věnujte pozornost úrovním kontrastu
Pokud přidáte text před obrázek sekce hrdiny (nebo jakékoli komponenty), ujistěte se, že kontrast mezi prvky webu je silný a snadno viditelný. To je místo, kde překryvy na pozadí a efekty filtrů mohou být mimořádně užitečné.
# 2 Obrázek hrdiny klienta
Následující typ obrazu hrdiny používaný online podniky má alternativní přístup k prokázání jejich přidané hodnoty: zobrazování jejich zákazníků pomocí produktu. Tato perspektiva je strategickým způsobem, jak se vcítit do vašich návštěvníků a stručně tak prokázat, že rozumíte jejich bodům bolesti a můžete uspokojit jejich potřeby.
Výše uvedený videoklip je převzat z webu Elementor vytvořeného uživatelem Alexander Fisher, osobní trenér se sídlem ve Stuggartu, který poskytuje řadu služeb souvisejících se zdravím a fitness.
Alexanderův obraz hrdiny zákazníka ukazuje více než spokojeného zákazníka, který si užívá zdravého a vhodného životního stylu. Obraz hrdiny jde o krok dále tím, že obsahuje video, které ukazuje, jak se jeho klient spojuje a spojuje s blízkými.
Osvědčené postupy:
- Sdílejte své případy použití a zkušenosti zákazníků
Odlište svůj produkt tím, že ukážete jeho nejvíce dominantní případ použití. Obrázek vyjadřující vaše obchodní cíle a hodnotu ukazuje, jak bude návštěvník těžit z vaší jedinečné nabídky.
- Vztahují se k vaší cílové skupině
Při výběru typu osoby, která se má objevit na vašem obrázku, se ujistěte, že je zohledněno vaše cílové publikum. Vyberte obrázek, který sděluje vaše chápání oboru a vaši schopnost potěšit vaše zákazníky.
# 3 Obrázek zakládajícího hrdiny
Obrázek zakládajícího hrdiny je velký obrázek zakladatele vlastníka firmy, který je umístěn v sekci hrdiny, aby pozdravil návštěvníka webu.
Obrázky zakládajících hrdinů se často používají na portfoliových webech nezávislých pracovníků, majitelů firem jako psycholog, vizážista nebo hudebník, jak je uvedeno na Web společnosti Elementor od Jasmine Cain výše.
Největší ctností obrazu zakládajícího hrdiny je to, že dává jméno tváři; propojuje návštěvníka webu s poskytovatelem služeb a vytváří příjemnou dynamiku mezi těmito dvěma osobami.
S výběrem obrázků pro váš obraz zakládajícího hrdiny je třeba zacházet opatrně. Se spoustou možností na výběr, které se scvrkávají na:
co nejsilnějším způsobem sdělí sdělení vaší značky?
Je to fotka zakladatele, který se dívá přímo do kamery a usmívá se, nebo se možná dívá jiným směrem?
Nebo by se lépe hodila upřímná fotografie pracovitého vlastníka firmy?
Osvědčené postupy:
- Věnujte pozornost dimenzování a rozměrům
Použijte jasný, dobře velký obrázek (nebo video), který návštěvníkům ukáže přesné podrobnosti, které potřebují vidět. V případě potřeby se můžete zaměřit na větší oblasti obrázků oříznutím a odstraněním méně důležitého obsahu.
- Zaměřte se na to, co by měl váš obraz vyjadřovat
Úlohou pozadí by mělo být soustředit se na osobu před ním, nikoli naopak. Nejpůsobivější obrázky zakladatelů hrdinů budou ukazovat usmívajícího se majitele firmy, což naznačuje jeho vášeň pro udržení zákazníků spokojených.
# 4 Bezkontextový obrázek hrdiny
Nekontextové obrázky hrdinů jsou, jak název napovídá, sekvence, které zobrazují něco, co se zdánlivě „nesouvisí“ s vlastníkem produktu nebo firmy. Účelem bezkontextového obrazu hrdiny je udělat dojem na návštěvníka prostřednictvím vizuální asociace nebo podprahové zprávy. Prohlížení nekontextového obrazu ukazuje uživateli, jaký je produkt nebo značka, ale nepřímo.
Tato technika se používá například ve výše uvedeném příkladu z webu Elementor vytvořeného společností digitálního marketingu Technologie AP, se sídlem v Oklahomě. Web společnosti používá široký a jasný obrázek na pozadí, který ukazuje jedinečný úhel mrakodrapů města Oklahoma City.
Tato fotografie představuje hodnotovou nabídku společnosti, jak je uvedeno v textu hrdiny webu: Rozvíjejte své podnikání a sledujte, jak roste, stejně vysoké jako nejvyšší kancelářské věže ve městě.
Jakmile lidské oko uvidí fyzické struktury dominující na obloze, pochopí, že tito marketingoví profesionálové pracují na tom, aby dostali podniky do země.
Osvědčené postupy:
- Zajistěte, aby návštěvníci pochopili, proč je obrázek relevantní
I když nezobrazujete přímý vizuál samotného produktu, ujistěte se, že propojení hodnoty produktu s vaším obrázkem hrdiny bez kontextu je stále snadné identifikovat. Uživatelé by neměli muset trávit čas přemýšlením o jeho relevanci.
- Vytvořte jasné spojení mezi obrázkem hrdiny a textem hrdiny
Text hrdiny, který umístíte ve spojení s vaším obrázkem, by měl přímo souviset s jeho vizuálním obsahem. Je to nezbytnost, i když to vyžaduje několik iterací vašeho textu a výběr formulace.
- Vytvořte soudržné návrhové schéma
Barvy, které vyberete pro texty tlačítek a pozadí, záhlaví nebo popisy, by měly odpovídat obrázku hrdiny nebo kresbě. To platí také pro klikatelné akcenty na vašem webu:
prvky navigační nabídky, logo atd.
Všichni víme, jak důležitý je konzistentní vizuální jazyk pro prestiž našeho webu, přítomnost značky a profesionální důvěryhodnost. To je místo, kde mohou být průvodci designovými styly opravdu užiteční, zejména při ověřování, zda jsou obrázky hrdinů v souladu s designem vašeho webu.
Jak otestovat váš obraz hrdiny: metody, které se nám líbí
Jakmile začnete experimentovat s několika možnostmi svého hrdinského obrazu, můžete okamžitě posoudit, která možnost generuje největší angažovanost, a získat přehled o nejúčinnějším designu - a nakonec se toho držet.
Zde jsou některé metody testování, které musíte mít, které lze snadno nastavit a poskytnout bohaté znalosti, abyste se ujistili, že používáte nejlepší možný obrázek hrdiny.
A / B Otestujte si svůj obraz hrdiny
Testování A / B vyžaduje, aby návrhář vytvořil dvě nebo více možností pro sekci hrdiny (ať už se jedná o dvě verze titulů a jejich kopií, samotný obrázek hrdiny, část rozložení, velikost písma nebo cokoli jiného, na co si vzpomenete) - je to zcela na vás.
Představte si, že jste se rozhodli použít režim prolnutí, když uživatelé najedou nad vaším obrázkem hrdiny, ale nevíte, který režim zlepší uživatelské prostředí nejvíce.
Proveďte a A / B test mezi dvěma různými možnostmi režimu (koneckonců existuje 13 možností režimu prolnutí), umožňuje vyzkoušet více než jeden režim a zjistit, který z nich se nejvíce pohybuje, klikne a nakonec více zapojí.
Jedním z nejběžnějších a nejdůležitějších kroků v A / B testování vašeho hrdinského oddílu je otestovat alespoň dvě možnosti tlačítka CTA - abyste určili, které tlačítko získá nejvíce konverzí.
Konkrétně je testování barvy tlačítka CTA vždy užitečným zážitkem, který vám umožní pochopit, která barva tlačítka uživatele nejvíce přitahuje a zaujme. Testování barev tlačítek A / B je mezi webovými designéry velmi oblíbené, protože je rychlé a snadné provedení a sotva vyžaduje další zdroje pro návrh.
K odhalení chování uživatelů použijte nástroje tepelné mapy
Nástroje tepelné mapy identifikují a analyzují místa, kde uživatelé klikají na webovou stránku. Tyto nástroje umožňují majitelům webových stránek a vstupních stránek přesně sledovat, jak uživatelé aktivně procházejí obsah. Toho je dosaženo, jakmile nástroj identifikuje, zda uživatelé interagují s klíčovými prvky (a jak), jako jsou odkazy, tlačítka, možnosti a samozřejmě CTA, či nikoli.
Zde je několik informací, které mohou vlastníci webových stránek získat pomocí nástrojů tepelné mapy:
- Neklikatelné položky odvádějí pozornost uživatelů.
- Velikosti tlačítek jsou příliš velké nebo příliš malé.
- Barvy tlačítek nejsou viditelné.
Staňte se hrdinou svého webu
Trendy webových stránek se neustále vyvíjejí a do možností webového designu přidávají nové funkce. Vždy je důležité, abyste svou hrdinskou sekci udrželi v popředí svých návrhových úvah - ujistěte se, že vždy dosáhne svého potenciálu při prezentaci vašeho webu davu.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Tady ! To je vše pro tento článek, který vám ukáže, jak udělat obrázek hrdiny. Pokud máte nějaké obavy, jak se tam dostat fdejte nám vědět v commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
