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