Все, что вам нужно знать о дизайне изображения героя

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

Почему у вас должен быть образ Героя?

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

Что должно быть включено в дизайн изображения героя?

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

• Само изображение должно содержать фотографию с высоким разрешением, привлекательный графический дизайн или изображения. Разрешение изображения будет указано, чтобы вы знали, какого размера изображения должны быть.
• У вас также должен быть короткий, лаконичный и мощный контент, который можно добавить к изображению. Это должно немедленно привести сообщение домой.
• Все основные изображения должны содержать очень мощный текст призыва к действию или кнопку. Некоторыми хорошими примерами могут быть «Купить сейчас», «Узнать больше», «Прочитать нашу историю» или «Купить сейчас».

Рекомендации по созданию образов Hero

Используйте изображения высокого качества

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

Когда дело доходит до высоты и ширины основного изображения, это будет зависеть от конкретного макета, который у вас есть. Может быть, вы хотите, чтобы ваше главное изображение занимало всю ширину страницы? Если это так, используйте VW или VH (что означает полную ширину или высоту области просмотра).

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

Время загрузки изображений

Когда вы используете изображения высокого качества, время загрузки играет решающую роль. Когда время загрузки увеличивается с 0,4 до 0,9 секунды, трафик снижается на 20%. Вот некоторые из лучших практик, которым вы должны следовать, чтобы избежать этого:

• Измените размер изображения самостоятельно и не позволяйте браузеру делать это автоматически.
• Сжатие выбранного вами изображения с помощью Photoshop. Вы также можете использовать инструменты сжатия, предназначенные специально для этого.
• Попробуйте работать с изображениями PNG и JPG, чтобы увидеть, какой тип работает лучше, не увеличивая время загрузки.

Демонстрация для привлечения внимания

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

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

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

Поддерживать актуальность

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

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

Чтобы сохранить актуальность, вам необходимо учитывать следующее:

• Используемое изображение является визуализацией вашего целевого ключевого слова?
• Дает ли ваше изображение ясность цели вашего веб-сайта или электронной почты?
• Поддерживается ли поток страницы или электронного письма, ведущий к призыву к действию, используемым изображением?
• Насколько авторитетным и аутентичным является изображение для вашего бренда?
• Усиливаются ли преимущества и актуальность изображения?
• Вызывает ли изображение эмоции, которые заставят клиентов принять этот призыв к действию?
• Может ли ваш образ изображать покупателя героем после того, как он приобрел товар или услугу?

Акцент на призыве к действию

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

Чтобы убедиться, что CTA выделяется, вы можете выполнить тест на размытие изображения. Это поможет вам увидеть, будет ли внимание клиента обращено туда, куда вам нужно. Вам просто нужно сделать снимок экрана сайта или дизайна электронной почты, а затем применить к нему эффект размытия с помощью Adobe XD. Как только изображение станет размытым, посмотрите, что привлекает ваше внимание. Не нравится то, что вы видите? Тогда пора пересмотреть.

Демонстрируйте реальных людей, а не «настоящих фальшивых» людей

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

Рассмотрите возможность использования иллюстраций, которые вызывают у вас личное чувство.

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

Чтобы иллюстрация была функциональной, она должна быть легко узнаваемой. Сообщение, которое он отправляет, должно отображаться одинаково, независимо от того, кто пользователь. Если есть более одной иллюстрации, все они должны быть последовательными. Другими словами, должно выглядеть так, будто все иллюстрации создал один и тот же человек.

Если вам нужна помощь с дизайном вашего героя, специальная команда Kimp всегда готова помочь.

Потрясающие образы героев для вдохновения

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

Это изображение использует концепцию 3D. Он также имеет четкий и привлекательный фон с большой функциональностью.

Apple, как мы все знаем, — это бренд, в основе которого лежит дизайн. Таким образом, для них имеет смысл демонстрировать свои продукты на своих главных изображениях — со стилем.

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

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

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

Очень важно создать отличный дизайн изображения героя. Это не только поможет вам продемонстрировать индивидуальность вашего бренда и повысить узнаваемость, но и поможет вам увеличить продажи! Вы также должны подумать о том, как часто вы хотели бы менять дизайн главного изображения, чтобы люди, которые неоднократно посещают страницу вашего веб-сайта, чувствовали, что есть что-то новое для них. С электронными письмами убедитесь, что ваши изображения достаточно броские, чтобы читатель просматривал их, а не нажимал кнопку «Удалить».

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