Vytvoření perfektního obrazu Hero pomocí kontrastu
Chcete udělat skvělý první dojem? Začíná se záhlavím vašeho webu. Obraz, který uživatel vidí, ponechá dobrý nebo špatný dojem - a zjistí, zda daný uživatel klikne a pokračuje, nebo úplně opustí web.
To je vysoká objednávka pro jeden obrázek.
Klíčovým prvkem pro vytváření obrazu hrdiny, který přitáhne uživatele a udržuje je kolem návrhu, je kontrast. (Vážně! To všechno jde zpět do teorie designu 101.) Hlava, která obsahuje kontrastní prvky ve velikosti, barvě a měřítku, poskytuje správnou kombinaci vizuálního zájmu a říká uživatelům, jak s projektem spolupracovat. Zde je několik způsobů, jak maximalizovat kontrast na cestě k vytvoření dokonalého obrazu hrdiny.
Crop strategicky
Obrázek hrdiny nemusí na zařízení zaplnit "první" obrazovku. Nenechte se chytit v té pasti.
Ořízněte snímek pro náraz založený na obsahu v něm. Zvažte další prvky, které jsou pro uživatele důležité, když přistávají na stránce a udělají ubytování i pro ty. V závislosti na tomto rámci by to mohlo znamenat, že obraz hrdiny je zmenšen na větší nebo menší než okno prohlížeče (pro zvážení argumentů zvažte pouze standardní rozlišení).
Než se na to podíváte, zvažte to na chvíli.
- Pomalý obrázek vám pomůže zobrazit náhled jiného obsahu.
- Neobvykle hluboký obraz povzbudí uživatele, aby procházeli více.
- Jakýkoli neobvyklý tvar přitáhne pozornost.
Zvažte animaci
Nemusíte vytvářet plnohodnotné kinematografické zážitky, abyste přidali obrázky do hrdiny. Nejmenší hmatové pohyby vytvářejí jen dost kontrastu, aby se ocitly.
Jemné pohyby, jako například letadlo, které letí přes obraz Bar Z Winery, poskytují tento kontrastní prvek, aniž by byli ohromující. Jedná se o jednoduchou alternativu k některým z nejvíce oslnivých záhlaví videa, které se staly populárními. Kontrastní prvek je dvojitý: design je jiný, než je tomu u mnoha ostatních, na které jsou uživatelé vystaveni, a jemný pohyb je příjemný a poměrně neočekávaný.
Na druhou stranu můžete jít všude s animací nebo videem pro hrdinu. Pohyb může být obzvláště pěkný a je oblíbenou volbou. Použijte jej stejným způsobem jako u statických snímků, pokud jde o přidávání efektů, jako je typografie a výzvy k akci.
Think Bold Typography
Typografie v obrazu hrdiny by měla uživatel uvést. Musí být odvážný, působivý a nezapomenutelný.
Můžete jej vytvořit pomocí výběru písma i slov na obrazovce. (Žádné hlavičky Arial, které zde uvádějí "Dobrý den").
Kombinace stylu nápisů a zpráv musí mít přímý dopad a apelovat na uživatele. Slyšeli jste, že lidé mají kratší pozornost než zlatá rybka; je to vaše práce, abyste je chytili s krásným písmem a jazykem.
Pokud jde o tučný typ, jsou klíčovým prvkem kontrastu barva a velikost.
- Typ musí být barva, která vyčnívá z pozadí. Světlo na tmavém nebo tmavém světle jsou nejlepšími možnostmi, pokud jde o čitelnost.
- Tučné je odklon od normy. Vezměte si na hlavičce hrdiny nadměrnou nebo podlimitní typografii pro náraz.
- Vyberte slova s významem. Není-li klíčem k vaší zprávě, nepotřebujete v hlavičce žádný odstavec. Vybírejte několik klíčových slov, která přitahují uživatele, aby se dozvěděli více. (Počet slov ovlivní, jak velké nebo malé písmo může být.)
Zvolte Barva opatrně
Hrdina nemusí být obrazem vůbec. Může to být barevný blok nebo studená struktura.
Vyberte si pečlivě barvu, která zobrazuje přesný význam, který zamýšlíte. Odvážný hlavičkový hrdina může uživateli zapůsobit, ale špatná barva může být vypnuta.
Jasné, trendové možnosti jsou dobrou alternativou. Pěkná věc o této možnosti je, že ji můžete čas od času mísit pouze změnou barvy pozadí. Velké barevné pozadí může také pomoci posílit identitu značky - zvláště pokud má silnou barevnou asociaci - a dá se číst díky jednoduché povaze návrhu.
Při použití s jiným obrázkem nebo videem je důležitá také barva. Od barevné typografie po barevné prvky uživatelského rozhraní je důležité zajistit, aby volby barev na obrázku odpovídaly zbytku návrhu. Většina z toho vychází z teorie barev a z pochopení barevného kolečka tak, aby obraz a barva pracovaly společně v návrhu.
Ale co když obraz hrdiny a barvy značky nezasahují? Tvořivě přemýšlejte o tom, jak používat součásti hrdiny společně. Zkuste barevnou překryv na fotografii; zvážit černobílý obraz nebo text. Přesuňte prvky s vysokým rozlišením do navigačního panelu, který je bílý nebo černý, aby se nezakrýval skutečný obraz. Když se obraz a barvy, které jsou pověřeny, nehrají dobře, nejlepší možností je odstranit nebo oddělit barvu.
Přemýšlejte o světle a tmavých prostorech
Účtování tmavých a světlých prostorů v obraze může být nejtěžším úkolem při přidávání prvků pro vytvoření kontrastu v obrazu hrdiny. Zejména s citlivými formáty a hraničními body může být umístění textu nebo tlačítek na obrázku změněno a nemůžete vždy najít skvělé umístění.
Co je to návrhář?
- Vyberte jiný obrázek;
- rozhodněte se pro jinou typovou rodinu, velikost nebo barvu;
- přidat překryvnou barvu;
- Využijte to nejlepší.
Každá z výše uvedených možností je životaschopná. Nejlepší možnost se může lišit podle projektu.
Společnost Inc. Řešení v jezdeckém snímku hrdiny - s velkým rozdílem mezi světlými a tmavými prostory - mělo zahrnovat logo překrytí s bílým textem v černém tvaru. Nijak neovlivňuje obrazy a je mnohem méně obtížnější, než byste si mysleli, že byste slyšeli tento nápad. Logo v centru také pomáhá vytvářet značku a vizuální identitu.
Zahrnout zvláštní výzvu k akci
Nezapomeňte na CTA!
Co byste chtěli uživatelé udělat, když se podívají na váš chladný obraz hrdiny? Řekni jim.
Výzva k akci by měla být jasná, ať už se jedná o vyplnění formuláře, posouvání pro další obsah nebo kliknutí na odkaz na jinou stránku. Mělo by obsahovat dostatečné rozlišení a kontrast, takže je snadno vidět na pozadí obrazu. (Jaký je ten bod v CTA, pokud ji nikdo nevidí?)
Barva a velikost jsou zde zvláště důležité. Barva tlačítka (společná CTA) by měla vyčnívat ze zbytku obrázku. Slova, která uživatelům říkají, co mají dělat, musí být výjimečně čitelná, jednoduchá a jasná.
Závěr
Kontrast je jednou z klíčových technik pro dobrý design. Vytváří oddělení prvků a pomáhá uživatelům směrovat k požadované akci.
Zvláštní pozornost věnujte vytvářením dostatečného kontrastu při navrhování obrázku hrdiny, aby uživatelé přesně věděli, jaké akce mají být na stránce provedeny. Podívejte se na metriky a pokud se tyto konverze nedají, přehodnoťte množství kontrastu v návrhu. Může to být čas, aby to ještě více zesílil.