Přejít k hlavnímu obsahu

Jak vytvořit obrázek hrdiny: Osvědčené postupy a příklady

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

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 obrazu hrdiny je pozdravit návštěvníka, jakmile se setká s vaší firmou nebo organizací. Množství typů obrázků hrdinů v sadě nástrojů pro webový design poskytuje tolik důvodů, proč je třeba na svůj web přidat obrázek hrdiny.

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ž je design a funkčnost vašeho obrazu hrdiny vysoce kvalitní, automaticky dosáhnete důvěryhodnosti a důvěryhodnosti uživatele. Vaše image hrdiny a okolní obsah hrdinů jsou často vaší první příležitostí k přenosu jedinečného prodejního místa vaší organizace a primárního kontaktního místa uživatele pro převod.

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

nad záhybem web design
Převzato z: crazyegg.com

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í

jak vytvořit obraz hrdiny

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.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Snímek obrazovky výše je převzat z Millbrook Construction, 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

jak vytvořit obraz hrdiny

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

jak vytvořit obraz hrdiny

Obrázek hrdiny produktu je velký obrázek produktu značky ve vysokém rozlišení. Tyto obrázky mohou být prezentovány staticky nebo v pohybu / v akci, pokud pomáhají 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 hrdinů produktů se obvykle nacházejí na webových stránkách elektronického obchodování (ale ne výlučně). Potenciální kupci očekávají, že uvidí skutečné příklady produktů, které jim pomohou činit informovaná rozhodnutí 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 Fischer, 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.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

# 3 Obrázek zakládajícího hrdiny

jak vytvořit obraz 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

jak vytvořit obraz 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

Navrhování sekce hrdiny a jejího obrazu hrdiny je jedním z nejdůležitějších a nejvlivnějších rozhodnutí v procesu webového designu. Tvůrci webu často označují sekci hrdinů na webu jako „úvodní akt“ vaší prezentace na webu, v podstatě jako vaše uvítací gesto.

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!

závěr

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.

...

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat