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

Мечта любого веб-дизайнера: привлечь внимание и заставить посетителя Чувствовать идея, атмосфера и цель сайта с самого первого взгляда, не так ли? Вот почему существуют блоки героев. Давайте поговорим о лучших практиках и идеях, которые вы можете реализовать на своем веб-сайте, чтобы завоевать сердца ваших клиентов с помощью образ героя.

Оглавление

Что такое главный образ веб-сайта?

А образ героя представляет собой большое изображение или видео, размещенное в верхней части главной страницы. Обычно там также есть текст и кнопка CTA. Цель этого элемента дизайна — привлечь внимание и донести до посетителя важное сообщение о бренде, продукте или услуге с помощью привлекающего внимание визуального контента. Он может занимать весь первый экран или иметь размер изображения баннера веб-сайта.

Типы блоков героев и когда их использовать

Сосредоточьтесь на продукте

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

Часы, ювелирные изделия, гаджеты и автомобили — это продукты, которые могут выглядеть очаровательно, если их сфотографировать вблизи, потому что их красота заключается в деталях. Так почему бы не воспользоваться этой возможностью и не разместить такие фотографии в качестве главного изображения? Кстати, эффект параллакса будет отлично работать с таким изображением, чтобы сделать его еще более реалистичным и вызвать у клиентов желание потрогать его и попробовать.

Создание продукта за кулисами

Люксовые бренды часто используют эту технику, и на то есть веская причина. Когда важно подчеркнуть, что это сделанный на заказ продукт, требующий большого внимания к каждой детали, показ за кулисами — отличный способ убедить клиентов в том, что высокая цена полностью оправдана.

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

Все мы видели эти эпические аэрофотосъемки автомобилей, мчащихся к закату на фоне захватывающих дух пейзажей, не так ли?

Это отличный пример показа продукта в контексте, который заставляет клиентов думать не только о продукте, но и о том, как их жизнь становится лучше, когда они владеют им. Другими примерами являются кухонная утварь или гаджеты, используемые для приготовления аппетитных блюд; красивые люди, полные энергии, использующие спортивный инвентарь; список можно продолжать и продолжать. Такие картинки, в большинстве случаев, продают не просто товар, а мечту о лучшей жизни, пропаганду образа жизни.

Сосредоточьтесь на человеке

Это может быть как лицо, представляющее бренд (например, профессионал, если это сайт-портфолио, или основатель, если это более крупная компания), так и составной персонаж клиента, обычно изображаемый с помощью иллюстрации.

Такие образы героев помогают установить некую межличностную связь и показывают, что сервис продукта очень доступен.

Акцент на эмоциональной вовлеченности

Иногда услуга, которую продвигает веб-сайт, неосязаема, поэтому лучший способ изобразить ее — показать эмоции людей. Подобный образ героя часто используют благотворительные организации, фонды и некоторые медицинские учреждения.

Подчеркивание идеи

Некоторые продукты и услуги еще более неосязаемы. Здесь не получится показать эмоции людей, поэтому нужно использовать абстрактные иллюстрации, анимацию и изображения. Веб-сайты компаний-разработчиков программного обеспечения или исследовательских агентств являются хорошими примерами того, когда может понадобиться такое изображение героя.

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

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

Ползунок героя

Использование слайдеров в разделе-герое полезно, когда нужно показать варианты товара, подчеркнуть сразу несколько преимуществ или показать большой ассортимент товаров в магазине. В этом случае важно проявить креативность, использовать автозапуск и уделить внимание технической и SEO-оптимизации этого блока.

Образы героев: примеры и идеи

Иллюстрации и типографика

Это сайт дизайнера и иллюстратора. И с первого взгляда сайт дает нам четкое понимание, что это страница профессионала, работающего в визуальной сфере.

Привлекательный интерактивный слайдер

Веб-сайт Mogu Mogu предлагает разнообразные напитки, как и слайдер, который также имеет дополнительный эффект параллакса. Этот слайдер хорошо оптимизирован, поэтому страница загружается быстро, у него есть автозапуск, а изображения также можно менять по клику.

Типографика, которая рассказывает истории

Это главное изображение и первый слайд целевой страницы, рассказывающий историю небольшой ремесленной компании, которая производит спиртные напитки и имеет плавучий погреб на барже. Определенно, этот дизайн — отличное начало этой истории.

Абстрактная иллюстрация с анимацией

Arcadia — технологическая компания, помогающая новаторам в области энергетики и потребителям бороться с климатическим кризисом. И эта абстрактная иллюстрация с некоторой анимацией очень хорошо передает эту миссию. Подобную иллюстрацию можно создать с помощью видеофона или анимации Лотти.

Привлекательный видеоблок

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

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

Эта компания производит умные станки для резки и аксессуары для мастерских. Одним из таких продуктов является специализированное и регулируемое освещение. Это изображение крайне минималистично, но в то же время дает четкое представление о том, что освещение очень гибкое, сделано для конкретных целей, и есть кнопка, чтобы его купить.

Детальный вид продукта с параллаксом

Классический главный образ для часовых брендов, но от этого он не становится менее привлекательным, особенно с добавлением эффекта параллакса. Кстати, у этого главного изображения есть приятная ненавязчивая кнопка для презентации видео вместо того, чтобы помещать это видео в главный блок — действительно отличное решение.

Советы по созданию отличного блока героев

Для создания лучшего образа героя важно черпать вдохновение из разных источников, а также понимать некоторые основные принципы:

1. Прежде всего, главный образ или блок должны создавать добавленная стоимость а также вызывать эмоции. Представьте веб-сайт без этого блок-героя и спросите себя: «С точки зрения пользователя этот веб-сайт выглядит хуже? Что-то важное пропало сейчас?» Если ответ «да», ваш образ героя, скорее всего, великолепен и выполняет свою работу.
2. Аутентичность и представление бренда. К сожалению, очень много очень типичных изображений героев (в основном из бесплатных иллюстраций), которые можно найти по всему Интернету. Если у вас нет бюджета на создание всего набора уникальных иллюстраций или на великолепную фотосессию, чтобы использовать ее для главного блока, вы всегда можете изменить бесплатную графику, чтобы привести ее в соответствие с фирменными цветами и визуальным стилем. Это важно, потому что цель изображения-героя — создать уникальное визуальное впечатление, связанное с брендом, чтобы посетители запомнили его.
3. Не используйте типичные стоковые фотографии людей (думаю, все мы знаем «Гарольда, скрывающего боль», верно?), если не хотите, чтобы изображения ваших героев стали мемами. Используйте фотографии реальных людей вместо. Или хотя бы фотографии со стоков, где люди, их эмоции и весь сеттинг выглядят более-менее естественно.
4. Изображение героя должно быть выровнено с общей идеей сайта и сообщение. В противном случае это просто вызовет ощущение несогласованности и плохой пользовательский опыт.
5. Используйте раздел героя, чтобы разместить CTA (призыв к действию) и подчеркнуть УТП (уникальное торговое предложение).
6. Если вы это сделаете, и есть текст с USP или CTA кнопку в главном блоке, важно усилить ее где-то еще на той же странице, чтобы были следующие логические шаги пути клиента.
7. Не размещайте несколько призывов к действию на разных слайдах, если вы используете ползунок в главном блоке; определенно не делайте этого, если есть одно изображение или видео.
8. Использовать А/Б-тесты чтобы увидеть, какое изображение героя работает лучше.
9. Не забывайте о оптимизация скорости главных изображений и видео. Помните, что они размещены в верхней части главной страницы, в них задействованы некоторые скрипты и стили, не говоря уже о графике, поэтому это может вызвать проблемы с блокировкой рендеринга и замедлить загрузку страницы, если не оптимизировано должным образом.
10. Обратите внимание на размер главного изображения и на то, как оно будет выглядеть на каждом типе устройств, включая большие экраны. Безусловно, должно быть отзывчивыйтак что лучше создать версию для мобильных устройств, где блок героев выглядит просто идеально, а не просто прячется там.

Часто задаваемые вопросы

Последние мысли

Использование изображений героев — отличный способ завоевать внимание вашей целевой аудитории и создать нужную атмосферу. Есть несколько правил UI/UX, которым нужно следовать, а также рекомендации по производительности и SEO-оптимизации, чтобы заставить его работать на реальном веб-сайте. Но креативность и смелые идеи по-прежнему остаются главными составляющими раздела великого героя.