Изображенията на героите често използват уеб създателите, за да приветстват посетителите на уебсайта си в атрактивен формат.
Ако някога сте се чудили " какво е образ на герой? ", Вие сте на правилното място. В тази статия ще разгледаме темата и как можете да създадете красиви герои с мощни визуални ефекти.
Изображение на герой е терминът, използван от създателите на уеб, за да опише извънгабаритно съдържание в горната част на уеб страница.
Ролята на геройското изображение е да посрещне вашия посетител веднага щом се запознае с вашата компания или организация. Изобилието от типове геройски изображения в инструментариума за уеб авторство носи толкова много причини да включите геройско изображение във вашия уебсайт.
Нека да разберем основните предимства на това и защо?
Какво е образ на герой?
Възприемайки добродетелта на „доброто първо впечатление“, героите обикновено имат една или повече от следните характеристики:
- Висококачествено изображение
- Увлекателно видео
- Плъзгач за изображение или мултимедийна въртележка
- Анимирана или статична илюстрация
- Заглавки и описания до или пред визуалното съдържание
По отношение на стила, общите детайли за дизайна, които ще видите, приложени към изображенията на герои, включват:
- Фонови изображения или видеоклипове с фонови наслагвания
- Фиксирано или лепкаво позициониране
- Посочването влияе върху промяната в прозрачността или наслагването
- Елементи на контраста, които отличават изображението от горната част или следващото съдържание
Новостта на героите в уеб дизайна е, че от една страна работите с много специфично и определено пространство на уеб страницата. От друга страна, изборът на стил, ефекти и техники, които да използвате при проектирането на тази част от съдържанието на вашата страница, е абсолютно безкраен.
Защо трябва да използвате образ на герой?
Когато дизайнът и функционалността на вашето геройско изображение са с висок калибър, вие автоматично постигате потребителска достоверност и доверие. Вашето геройско изображение и заобикалящото го геройско съдържание често представляват първата ви възможност да предадете уникалната търговска точка на вашия организация и основната потребителска точка за контакт за преобразуването.
Когато търсите да задействате определено поведение на потребителя, най-добрият начин да започнете е първокласното, мощно изображение на героя, което прави силно впечатление на посетителите ви.
Можете да направите трайно първо впечатление
Първите впечатления имат значение в много области на живота, но особено що се отнася до това как потребителите се отнасят към естетиката на уебсайта.
Резултатите на експертите по взаимодействие човек-машина (HCI) и визуализация при Google Research свидетелство за влиянието на изображенията на героите върху успеха на уебсайт:
Това учение, " Ролята на визуалната сложност и прототипичност при първите впечатления на уебсайта : работа по разбиране на естетически съждения ”, Изучава как визуалната сложност и прототипността влияят върху дизайна на уебсайт и първите впечатления на неговите потребители.
Авторите показаха 119 действителни екранни снимки от уебсайта на своите участници в изследването и установиха, че визуалната сложност и прототипност влияят върху естетическото възприятие на потребителя в първите 50 изображения на експозицията, а понякога дори в рамките на 17 ms.
Като създатели на мрежата нашето заключение е съвсем просто: Избраното от нас изображение на героя и начинът, по който го представяме на нашата страница, влияе основно на настроенията и поведението на потребителите.
Ще извлечете максимума от съдържанието си в горната част на страницата
Разделът „над страницата“ на уеб страница може да бъде дефиниран с прости изрази: съдържание, което запълва екрана ви / се появява над долната граница на прозореца на уеб браузъра, след като страницата ви се зареди. Ако съдържанието изисква видимо превъртане, това означава, че то се намира „под гънката“.
Концепцията за „над гънката“ възниква в дизайна и издаването на печат, много преди ерата на цифровите медии. Всички знаем какво е да забележите веднага нещо в горната половина на първа страница и дори е безопасно да се каже, че съдържанието на първата страница често е това, което ни кара да решим дали да купим или не. Вестник, или просто да спрем на будка за вестници.
Точно поради това съдържанието ви в горната част на страницата може да бъде сериозен пробив в успеха на вашия уебсайт.
Какво имаме предвид?
Ако посетителят на уебсайта е объркан от вашето съдържание и изображения в горната част на страницата, той бързо ще напусне уебсайта ви. Ако образът на вашия герой и неговата среда над гънката са ясни, ангажиращи и добре представящи вашето ценностно предложение, той ще бъде по-склонен да се придържа.
В крайна сметка, колкото повече инвестирате в изображението и съдържанието на вашия раздел за герои, толкова по-малко вероятно е потребителите да направят бърз изход.
Не забравяйте за отзивчивия дизайн
Имайте предвид, че местоположението на гънка на екрана е субективно спрямо размера на екрана на устройството. Това е важно съображение при отзивчивия дизайн, тъй като съдържанието по-горе трябва да бъде персонализирано и конфигурирано по начин, приложим за множество размери на устройствата.
Уеб дизайнерите и разработчиците често използват специфични за устройството точки на прекъсване за да се гарантира тази отзивчивост. Това ви дава пълен контрол върху адаптивността на дизайна на вашия уеб сайт към съответните размери на екрана и избягва компрометирания външен вид или въздействието на вашето изображение на герой.
Заявете ценното си предложение без претоварване с информация
Може да сте запознати с понятието „претоварване с информацияВ дизайна на уебсайтове и потребителското изживяване : Искаме да избягваме да използваме твърде много съдържание, особено писмено съдържание, когато представяме нашата марка и нашата бизнес стойност.
В този смисъл използването на изображение, илюстрация или видео струва 1 думи. Фина настройка на ефективни изображения на марката ще заснеме цялата ви история в един визуален носител. Вместо да вербализирате вашата история и предложение за брандиране, може да сте в състояние да облекчите когнитивното натоварване на вашия потребител по прост и лесен за ползване начин.
Екранната снимка по-горе е взета от Строителство на Милбрук, базирана в Пърт строителна компания, специализирана в „жилищно строителство с висок клас покрития и внимание към детайлите“. За уебсайта на Elementor изображението на героя на началната страница използва перфектно интерфейса си „над страницата“. Привлекателната, свежа снимка на щастлив модерен дом и открит басейн създава положителни, релаксиращи вибрации.
Правейки крачка напред, изборът на стил на фоновото изображение с пълна височина и размерът на „одеяло“ показват солидните умения на фирмата да създава луксозни жилищни имоти. Предложението за стойност е ясно като водата в басейна и потребителите удобно усвояват цялата необходима информация.
Вашите герои могат да ви помогнат да конвертирате потенциални клиенти
Атрактивните и видими допирни точки са основна съставка за потребителския поток за преобразуване и възпроизвеждане. Ето защо връзката между призива към действие на секцията за герои и самото ви изображение на героя може да направи или наруши целите за изграждане на вашия уебсайт.
Нека вашите текстове на CTA казват „ Регистрирайте се сега "," Виж повече "," Свържете се с нас ”, и т.н., вашият образ на герой трябва да бъде безпроблемно координиран на всички фронтове: видимост, съобщения, цветова палитра, външен вид и т.н.
Достоверните и ефективни разговори с потенциални клиенти се основават на комфортна и естествена атмосфера; визуално приятните изображения са най-добрият начин да постигнете това.
Точно това виждаме на уебсайта на Elementor, създаден от STL карикатура, екип от карикатурни художници, които предоставят развлекателни услуги за събития. Анимираното заглавие (юнашки текст) изобразява щастливите клиенти в техните герои, показващи какво предлагат художниците на карикатурите за всеки човек.
И така, след като сте запретнали ръкави и сте започнали да навлизате в практиките, какво влиза в процеса на вземане на решение какъв тип образ на герой да се използва?
Нека изследваме четирите различни типа изображения на герои и как да преценим кой от тях ще е най-подходящ за вашия уебсайт.
# 1 Изображение на герой на продукта
Основното изображение на продукта е голямо високо изображение дефиниция от продукта на марката. Тези изображения могат да бъдат представени в статично състояние или в движение/в действие, стига да позволяват визуализиране на стойностното предложение на продукта.
Популярните начини сред уеб дизайнерите да демонстрират и персонализират своите продуктови герои могат да включват:
- Подробен / моментна снимка на отделен продукт, както виждаме по-горе на уебсайта на компанията австралийски абонамент.
- Екранна снимка на цифров продуктов интерфейс, като табло.
Изображенията на герои на продукти обикновено се намират на уебсайтове за електронна търговия (но не само). Потенциалните купувачи очакват да видят примери за реални продукти, насърчавайки вземането на информирано решение относно пригодността на магазина за техните нужди от покупки.
Любителят на Avo използва Elementor, за да създаде своя уебсайт за електронна търговия, който клиентите им използват, за да закупят седмични абонаменти за прясно авокадо, доставено до прага им.
Базата клиенти на Avo lover е пазарна ниша в тясно определена област на интерес, така че изборът на имидж на продуктовия герой е напълно логичен. Потенциалните абонати са ентусиасти на авокадо; да видят отблизо и сложна снимка на продуктите е точно това, което те искат да видят.
Най-добри практики:
- Инвестирайте в качеството на фоновите изображения
Независимо дали вашето фоново изображение е снимка, видео, илюстрация и т.н., файлът с изображението трябва да бъде възможно най-лек, с кристално чиста разделителна способност.
- Обърнете внимание на нивата на контраст
Ако добавяте текст пред изображението на секцията си герой (или компонент от всякакъв вид), уверете се, че контрастът между елементите на уебсайта е силен и лесно забележим. Това е мястото, където фоновите наслагвания и филтърните ефекти могат да бъдат изключително полезни.
# 2 Изображение на клиентския герой
Следният тип образ на героя, използван от онлайн бизнесите, използва алтернативен подход за показване на добавената им стойност: показване на своите клиенти, използващи продукта. Тази перспектива е стратегически начин да съпреживеете посетителите си, като накратко демонстрирате, че разбирате тяхната болка и можете да отговорите на техните нужди.
Горният видеоклип е взет от сайта на Elementor, създаден от Александър Фишер, базиран на Stuggart личен треньор, който предоставя набор от услуги, свързани със здравето и фитнеса.
Клиентският образ на Александър показва повече от доволен клиент, който се радва на здравословен и годен начин на живот. Изображението на героя прави още една крачка напред, като включва видеоклип, който показва връзката на клиента му и свързването с близки.
Най-добри практики:
- Споделете вашите случаи на използване и опит на клиентите
Разграничете продукта си, като покажете най-доминиращия му случай на употреба. Изображение, което предава вашите бизнес цели и стойност показва как посетителят ще се възползва от вашето уникално предложение.
- Свържете се с вашата целева аудитория
Уверете се, че вашата целева аудитория е отчетена, когато избирате типа човек, който да присъства във вашето изображение. Изберете изображение, което съобщава вашето разбиране за полето и способността ви да зарадвате клиентите си.
# 3 Изображение на основателя
Основният герой е голямо изображение на основателя на собственика на бизнеса, поставено в секцията за герои, за да поздрави посетителя на уебсайта.
Основните герои често се използват в портфолио уебсайтове за фрийлансъри, собственици на бизнес като психолог, гримьор или музикант, както е показано на Уебсайт на Elementor от Жасмин Каин по-горе.
Най-голямата добродетел на образа на герой-основател е, че той поставя лице на име; той свързва посетителя на уебсайта с доставчика на услуги, създавайки приятна динамика между двамата индивиди.
Изборът на изображения за вашия герой-основател трябва да се третира внимателно. С много възможности за избор, които се свеждат до:
какво ще предаде посланието на вашата марка по възможно най-силния начин?
Това снимка ли е на основателя, който гледа право в камерата и се усмихва, или може би гледа в друга посока?
Или откровена снимка на трудолюбивия собственик на бизнес би била по-подходяща?
Най-добри практики:
- Обърнете внимание на размера и размерите
Използвайте ясно, добре оразмерено изображение (или видео), което показва на посетителите точните подробности, които трябва да видят. Ако е необходимо, можете да се съсредоточите върху по-големи области на вашите изображения, като ги изрежете и премахнете по-малко важно съдържание.
- Съсредоточете се върху това, което вашият образ трябва да предаде
Ролята на фона трябва да бъде да се съсредоточи върху човека пред него, а не обратното. Най -впечатляващите изображения на основополагащ герой ще покажат усмихнатия собственик на бизнес, което предполага неговата страст да поддържа клиентите щастливи.
# 4 Неконтекстуално изображение на герой
Неконтекстуалните изображения на героите са, както подсказва името, последователности, които показват нещо на пръв поглед „несвързано“ със собственика на продукта или бизнеса. Целта на неконтекстуалния образ на героя е да направи впечатление на посетителя чрез визуална асоциация или подсъзнателно съобщение. Разглеждането на неконтекстуално изображение показва на потребителя какъв е продуктът или марката, но по индиректен начин.
Тази техника се използва например в горния пример от уебсайта на Elementor, създаден от компанията за дигитален маркетинг AP технология, със седалище в Оклахома. Уебсайтът на компанията използва широко и ясно фоново изображение, което показва уникален ъгъл на небостъргачите на Оклахома Сити.
Тази снимка представя ценното предложение на компанията, както е посочено в текста на героя на уебсайта: Изградете своя бизнес и го наблюдавайте как расте, висок колкото най-високите офис кули в града.
Веднага след като човешкото око види физическите структури, доминиращи в небето, то разбира, че тези маркетингови специалисти работят, за да извадят бизнеса от земята, на висота.
Най-добри практики:
- Уверете се, че посетителите разбират защо изображението е уместно
Въпреки че не показвате директно визуално изображение на самия продукт, уверете се, че свързването на стойността на продукта ви с вашето неконтекстуално изображение на герой е все още лесно да се идентифицира. Потребителите не трябва да прекарват време в мислене за неговото значение.
- Направете ясна връзка между изображението на героя и текста на героя
Текстът на героя, който поставяте заедно с вашето изображение, трябва да се отнася пряко към визуалното му съдържание. Това е необходимост, дори ако изисква няколко повторения на вашия текст и избор на формулировката.
- Създайте сплотена схема за дизайн
Цветовете, които избирате за текстове на бутони и фонове, заглавки или описания, трябва да се съгласуват с изображението на героя или произведението на изкуството. Това се отнася и за щракащи акценти на вашия уебсайт:
елементите на менюто за навигация, логото и т.н. ...
Всички знаем колко е важен един последователен визуален език за престижа на нашия уебсайт, присъствието на марката ни и професионалната достоверност. Това е мястото, където ръководствата за дизайнерски стил могат да бъдат наистина полезни, особено за да сте сигурни, че вашите герои изображения са в съответствие с дизайна на вашия уебсайт.
Как да тестваме вашия образ на герой: методите, които харесваме
След като започнете да експериментирате с няколко опции за вашето изображение на герой, можете веднага да прецените коя опция генерира най-голяма ангажираност и да придобиете представа за най-ефективния дизайн - и в крайна сметка да се придържате към този.
Ето някои задължителни методи за тестване, които са лесни за настройка и предоставят богата информация, за да сте сигурни, че използвате възможно най-добрия образ на героя.
A / B Тествайте вашето изображение на герой
A / B тестването изисква от дизайнера да създаде две или повече опции за секцията за герои (независимо дали става въпрос за две версии на заглавията и тяхното копие, самото изображение на героя, секцията за оформление, оразмеряване на шрифта или каквото друго се сетите) - изцяло зависи от вас.
Представете си, че сте решили да използвате режим на смесване, когато потребителите преместват курсора на мишката върху вашето изображение на герой, но не знаете кой режим ще подобри потребителското изживяване най-много.
Изпълнете a A / B тест между две различни опции за режим (в края на краищата има 13 опции за режим на смесване), ви позволява да опитате повече от един режим, за да видите кой получава най -много движение, кликвания и в крайна сметка повече ангажираност.
Една от най-често срещаните и важни стъпки в A / B тестването на вашия герой раздел е също така да тествате поне две опции за бутон CTA - за да идентифицирате кой бутон получава най-много реализации.
По-конкретно, тестването на цвета на CTA бутон винаги е полезно изживяване, което ви позволява да разберете кой цвят на бутоните привлича и ангажира потребителите най-много. A / B тестването на цветни бутони е много популярно сред уеб дизайнерите, защото е бързо и лесно за изпълнение и едва ли изисква допълнителни дизайнерски ресурси.
Използвайте инструменти за топлинна карта, за да откриете поведението на потребителя
Инструментите за топлинна карта идентифицират и анализират местата, където потребителите кликват върху уеб страница. Тези инструменти позволяват на собствениците на уебсайтове и целеви страници да видят как точно потребителите навигират активно в съдържанието. Това се постига, след като инструментът идентифицира дали потребителите взаимодействат с ключови елементи (и как), като връзки, бутони, опции и, разбира се, CTA.
Ето малко информация, която собствениците на уебсайтове могат да извлекат от използването на инструменти за топлинна карта:
- Елементите, върху които не се кликва, отвличат вниманието на потребителите.
- Размерите на бутоните са твърде големи или твърде малки.
- Цветовете на бутоните не се виждат.
Бъдете герой на вашия уебсайт
Тенденциите в уебсайтовете непрекъснато се развиват, добавяйки нови функции към възможностите за уеб дизайн. Винаги е важно да държите раздела си за герои в челните редици на вашите съображения за дизайна - като се уверите, че той винаги достига своя потенциал при представянето на вашия уеб сайт пред тълпите.
Вземете Elementor Pro сега!
Заключение
Ето го ! Това е за тази статия, която ви показва как да направите образ на герой. Ако имате някакви притеснения как да стигнете до там fуведомете ни в Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...