Додавання головних зображень для веб-сайту WordPress: найкращі методи

Додавання головних зображень для веб-сайту WordPress: найкращі методи

Це мрія будь-якого веб-дизайнера: привернути увагу та зробити відвідувача відчувати ідея, атмосфера та мета веб-сайту з першого погляду, чи не так? Ось чому існують блоки героїв. Давайте поговоримо про найкращі практики та ідеї, які ви можете застосувати на своєму веб-сайті, щоб захопити серця ваших клієнтів за допомогою образ героя.

Зміст

Що таке зображення героя веб-сайту?

А образ героя це велике зображення або відео, розміщене у верхній частині головної сторінки. Зазвичай там також є текст і кнопка CTA. Мета цього елемента дизайну — привернути увагу та донести важливе повідомлення про бренд, продукт або послугу до відвідувача за допомогою візуального вмісту, який привертає увагу. Він може займати весь перший екран або мати розмір зображення банера веб-сайту.

Типи блоків героїв і коли їх використовувати

Зосередьтеся на продукті

Продукт в деталях

Годинники, ювелірні вироби, гаджети та автомобілі — це продукти, які можуть виглядати захоплююче, якщо їх сфотографувати зблизька, оскільки їх краса полягає в деталях. То чому б не скористатися цією функцією та не розмістити такі фотографії як зображення героя? До речі, ефект паралакса ідеально працюватиме з таким зображенням, щоб зробити його ще більш реалістичним і викликати у клієнтів бажання помацати його та спробувати.

Створення продукту за кадром

Бренди класу «люкс» часто використовують цю техніку, і не дарма. Коли важливо підкреслити, що це індивідуальний продукт, який потребує великої уваги до кожної деталі, показ за лаштунками є чудовим способом переконати клієнтів у тому, що висока ціна цілком виправдана.

Продукт у контексті

Ми всі бачили ці епічні повітряні відео автомобілів, які мчать до заходу сонця на тлі захоплюючих краєвидів, чи не так?

Це чудовий приклад показу продукту в контексті, і це змушує клієнтів думати не лише про продукт, а й про те, як їх життя стає кращим, коли вони володіють ним. Іншими прикладами є кухонний посуд або гаджети, які використовуються для приготування апетитної їжі; красиві люди, сповнені енергії, які використовують спортивний інвентар; список можна продовжувати нескінченно. Такі картинки в більшості випадків продають не просто товар, а мрію про краще життя, пропагують стиль життя.

Зосередьтеся на людині

Це може бути як той, хто представляє бренд (наприклад, професіонал, якщо це веб-сайт портфоліо, або засновник, якщо це більша компанія), або складений персонаж клієнта, зазвичай зображений за допомогою ілюстрації.

Такі образи-герої допомагають налагодити якийсь міжособистісний зв’язок і показують, що обслуговування продукту дуже доступне.

Акцент на емоційній залученості

Іноді послуга, яку рекламує веб-сайт, є нематеріальною, тому найкращий спосіб її відобразити – це показати емоції людей. Благодійні організації, фонди та деякі медичні установи часто використовують цей тип зображення героя.

Підкреслення ідеї

Деякі продукти та послуги ще більш нематеріальні. Показати емоції людей тут не вийде, тому потрібно використовувати абстрактні ілюстрації, анімацію, зображення. Веб-сайти компаній, що займаються програмним забезпеченням, або дослідницьких агенцій є хорошими прикладами того, коли може знадобитися таке зображення героя.

Жирна типографіка

Типографіка — це ще один спосіб зображення абстрактних понять, але не тільки. Мистецтво типографіки є потужним інструментом, який можна використовувати в будь-якій ніші, і ключем до успіху цього типу блоку героїв є талановитий дизайнер та ілюстратор, який спеціалізується на цьому виді ілюстрації та дизайну.

Слайдер героя

Використання повзунків у головному розділі корисно, коли потрібно показати варіації товару, підкреслити декілька переваг одночасно або показати великий асортимент товарів у магазині. У цьому випадку важливо проявити креативність, використовувати автозапуск і звернути увагу на технічну та SEO оптимізацію цього блоку.

Образи героїв: приклади та ідеї

Ілюстрації та типографіка

Це сайт дизайнера та ілюстратора. І з першого погляду сайт дає нам чітке розуміння, що це сторінка професіонала, який працює у сфері зору.

Зображення героя з ілюстраціями
Джерело: Lorelei Lebuhotel

Захоплюючий інтерактивний слайдер

Веб-сайт Mogu Mogu пропонує різноманітні напої, а також слайдер, який також має додатковий ефект паралакса. Цей слайдер добре оптимізований, тому сторінка завантажується швидко, він має автовідтворення, але зображення також можна змінювати клацанням.

Типографіка, яка розповідає історії

Це зображення героя та перший слайд цільової сторінки, який розповідає історію невеликої ремісничої компанії, яка виробляє спиртні напої та має плавучий льох на баржі. Безумовно, цей дизайн є чудовим початком цієї історії.

Зображення героя типографіки
Джерело: Баржа 166

Абстрактна ілюстрація з анімацією

Arcadia — це технологічна компанія, яка дає змогу інноваторам і споживачам енергетики боротися з кліматичною кризою. І ця абстрактна ілюстрація з деякою анімацією дуже добре передає цю місію. Подібну ілюстрацію можна створити за допомогою відеофону або анімації Лотті.

Ілюстрація в образі героя
Джерело: Аркадія

Захоплюючий блок героїв відео

Brandt Weine — це швейцарський винний інтернет-магазин, який пропонує колекцію авторських вин. Головне відео тут зациклене, але створює щось на зразок занурення та створює атмосферу.

Мінімалістичний зображення героя продукту

Ця компанія виробляє розумні різальні машини та аксесуари для майстерень. Спеціалізоване та високорегульоване освітлення є одним із таких продуктів. Це зображення надзвичайно мінімалістичне, але в той же час дає чітке уявлення про те, що освітлення є дуже гнучким, створеним для певних цілей, і є кнопка для його покупки.

Мінімалістичний образ героя
Джерело: Cricut Lighting

Детальний вигляд виробу з паралаксом

Класичний образ героя для годинникових брендів, але від цього він не стає менш привабливим, особливо якщо доповнити його ефектом паралакса. До речі, це зображення героя має гарну непомітну кнопку для відеопрезентації замість розміщення цього відео в блоці героя – справді чудове рішення.

Зображення основного продукту
Джерело: Tag Heuer

Поради щодо створення чудового блоку героя

Щоб створити кращий образ героя, важливо черпати натхнення з різних джерел, а також розуміти деякі основні принципи:

  1. Перш за все, потрібно створити образ або блок героя додану вартість і викликати емоції. Уявіть веб-сайт без блоку героїв і запитайте себе: «Чи виглядає цей веб-сайт гірше з точки зору користувача? Зараз чогось важливого не вистачає?» Якщо відповідь «так», ваш образ героя, швидше за все, чудовий і виконує свою роботу.
  2. Автентичність і репрезентація бренду. На жаль, у всьому Інтернеті можна знайти дуже багато дуже типових зображень героїв (в основному з безкоштовних ілюстрацій). Якщо немає бюджету, щоб створити цілий набір унікальних ілюстрацій або зробити чудову фотосесію, щоб використати їх для блоку героїв, ви завжди можете змінити безкоштовну графіку, щоб узгодити її з кольорами та візуальним стилем бренду. Це важливо, тому що мета головного зображення — створити унікальне візуальне враження, пов’язане з брендом, яке запам’ятається відвідувачам.
  3. Не використовуйте типові фотографії людей (я думаю, ми всі знаємо «Гарольд приховує біль», чи не так?), якщо ви не хочете, щоб зображення ваших героїв стали мемами. Використовуйте фотографії реальних людей замість цього. Або, принаймні, фотографії зі стоків, де люди, їхні емоції та вся обстановка виглядають більш-менш природно.
  4. Зображення героя має бути вирівняне із загальною ідеєю сайту і повідомлення. Інакше це просто спричинить відчуття непослідовності та поганий досвід користувача.
  5. Для розміщення використовуйте розділ героя CTA (Заклик до дії) і підкреслити USP (Унікальна торгова пропозиція).
  6. Якщо ви це зробите, і є текст із компанією USP або CTA кнопку в блоці героїв, важливо підкріпити її в іншому місці на тій самій сторінці, тож будуть наступні логічні кроки шляху клієнта.
  7. Не розміщуйте кілька CTA на різних слайдах, якщо ви використовуєте повзунок у блоці героя; точно не робіть цього, якщо є одне зображення чи відео.
  8. використання A/B тести щоб побачити, який образ героя працює краще.
  9. Не забувайте про оптимізація швидкості зображень і відео героїв. Пам’ятайте, що вони розміщені у верхній частині головної сторінки, там задіяні деякі сценарії та стилі, не кажучи вже про графіку, тому це може спричинити проблеми з блокуванням візуалізації та уповільнити завантаження сторінки, якщо не оптимізовано належним чином.
  10. Зверніть увагу на розмір зображення героя та на те, як воно виглядатиме на кожному типі пристроїв, включаючи великі екрани. Звичайно, так і повинно бути чуйнийтому краще створити версію для мобільних пристроїв, де блок героя виглядає просто ідеально, а не просто ховається там.

FAQ

Що таке кнопка героя?

Це кнопка, розташована у верхній частині розділу героїв, кнопка заклику до дії.

Наскільки важливо зробити образ героя чуйним?

Більше половини всіх відвідувачів веб-сайтів використовують для їх перегляду мобільні пристрої. Тому правильна мобільна версія сайту не просто важлива, а й необхідна.

Що є ключем до успішного розділу героїв?

Здоровий глузд, чудовий веб-дизайнер, який його створить, розумний фахівець з маркетингу, який працюватиме разом із веб-дизайнером, і талановитий веб-розробник разом із спеціалістом із SEO, щоб оптимізувати його.

Який найкращий розмір зображення героя веб-сайту?

Оптимальною вважається ширина зображення героя від 1200 до 1600 пікселів. Висота залежить від типу зображення героя: або воно має покривати весь перший екран, або бути близько 500 пікселів (якщо це банерний тип розділу героя).

Заключні думки

Використання образів-героїв — чудовий спосіб завоювати увагу цільової аудиторії та створити потрібну атмосферу. Є кілька правил UI/UX, яких слід дотримуватися, а також вказівки щодо продуктивності та оптимізації SEO, щоб він працював на реальному веб-сайті. Але креативність і сміливі ідеї все ще залишаються основними складовими розділу чудових героїв.

Якщо вас цікавить послуга “сайт візітка”, заказати можна тут, в веб-студії filandor. Студія працює багато років та надає комплексні послуги.

Джерело: https://crocoblock.com/blog/hero-image-basics/

Related posts