Картинки для лендинг пейдж, какие изображения подбирать?

Картинки для лендинг пейдж

Картинки на лендингах: подберите свой идеальный размер

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

«Одна картинка стоит тысячи слов» — именно так можно описать важность картинок и изображений  в маркетинге.

Картинки в стиле минимализм

Как же определить, что ваш дизайн, основанный на графике, принесет ожидаемые результаты?

Перед тем как перейти к оформлению страницы определитесь с её целевым назначением и аудиторией, поскольку почти невозможно подобрать страницу, отвечающую абсолютно всем требованиям. Расстановка приоритетов поможет определить оптимальный подход.

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

Далее мы обсудим несколько примеров фокусировки на визуальном контенте.

картинки для лендингов

В данном случае внимание пользователя будет сфокусировано на крупномасштабном изображении новинок компании Apple. Оно не только является рекламой новинок, но и позволяет рассмотреть разницу между двумя моделями.

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

Не менее удачным примером является поисковая система Bing, конечно это не лендинг пейдж, но все же, сайты с поисками чего либо, популярны.

картинки для лендингов

Search строка и прочие элементы навигации отлично просматриваются на фоне объёмного изображения.

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

Отметим, что создание домашних страниц поисковых сервисов происходит не по классическим канонам. Основное внимание стоит уделить дизайну поискового окна, а не второстепенным элементам.

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

Это отличный трюк динамического контента.

Примером использования изображение как центрального элемента посадочной страницы является сайт авиакомпании LOT Airlines.  

картинки для лендингов

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

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

Однако он один не может гарантировать положительный пользовательский опыт. Не забывайте про юзабилити и сам контент.

Давайте рассмотрим, какие недостатки есть у представленного выше дизайна:

Шрифт ссылок меню слишком мелкий, к тому же сами ссылки не выделяются на общем фоне

Вместо поиска использована иконка cамолета.

Кнопка «призыва к действию» Купить сейчас, не до конца понятна.

Поле для поиска располагается ниже одного разворота, пользователь может просто не заметить его

Теперь давайте рассмотрим новую версию сайта той же авиакомпании и сравним с предыдущей.

картинки для лендингов

 Однако маркетологи перенесли поле поиска билетов на его привычное место – в верхний левый угол.

Мобильная версия сайта.

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

картинки для лендингов

Выбирайте сбалансированный дизайн

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

На картинке в следующем примере изображён автомобиль со своими владельцами.

картинки для лендингов

Картинка довольно большая, но она демонстрирует основное направление деятельности компании (страхование автомобилей), поэтому она не наносит вреда юзабилити интерфейса.

Все основные функции размещены до линии сгиба, и фон и меню навигации прекрасно сбалансированы.

Далее идут дополнительные функции.


Читайте статьи о дизайне:

Длинный лендинг пейдж, 5 рынков которым он подходит

Как сделать продающий дизайн лендинг пейдж. Часть №4


Как узнать, что визуальный контент используется правильно?

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

  • 1. Определитесь, какую цель вы преследуете, создавая веб-страницу: зачем она нужна вам и вашим посетителям.
  • 2. Выберите те элементы интерфейса, которые помогут вам в достижении ваших целей. Для демонстрации бренда и привлечения пользователей используйте крупномасштабные изображения. Хотите обеспечить удобное взаимодействие пользователей с вашим ресурсом, обратите внимание на навигационное меню и окно поиска.
  • 3. Расставьте визуальные элементы в порядке их приоритетности. Графическими элементами стоит сопровождать только ключевые составляющие интерфейса. Данный принцип кажется очевидным, однако именно про него часто забывают или пренебрегают дизайнеры.
  • 4. Используйте визуальное оформление для усиления образа бренда. Помните, что картинки – это не только украшение сайта, но и инструмент привлечения клиентов.
  • 5. Выбирайте только качественный визуальный контент. Не торопитесь использовать все понравившиеся вам картинки на своём сайте. Сначала определите, какие из них соответствуют вашим целям.
  • 6. Не стоит слепо следовать модным тенденциям. Конечно, если вы хотите обновить дизайн своего сайта, то стоит соответствовать трендам, однако не стоит слепо доверять всему, что придумали дизайнеры и маркетологи. Соотносите все новинки на вашей странице с поставленными целями.

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

И никогда не забывайте всё А/Б тестировать!

Спасибо за прочтение, остались вопросы?Задавайте их в комментариях!

Оцените статью:
Не интересноБаянСреднячокБравоИдеально (голосов 19, средний: 4,26 из 5)
Загрузка...