Лучшие курсы интернет-маркетинга в рунете: куда идти учиться >>>
Close
25 октября / 2019

Дизайн лендинга: 4 приема для увеличения конверсии

Екатерина Краморенко
  • /
  • /
Лучшие курсы интернет-маркетинга в рунете: куда идти учиться >>>
Close
В марте мы рассказывали, как правильно подать продукты на лендинге. В этой статье речь пойдёт о том, какие дизайнерские приёмы помогут увеличить конверсию.

Обрамление
Когда человек заходит на сайт, его внимание в первую очередь привлекают те элементы, которые выделяются на основном фоне. Для этого дизайнеры выделяют важную информацию — форму заявки и кнопку — в отдельную рамку. Такое обрамление отделяет самое главное от всего контента на лендинге.
Пример обрамления на лендинге домашней кондитерской «Тортерифе»
Контраст
При создании лендинга лучше использовать минимальный набор цветов, чтобы самые контрастные использовать для призыва к действию. Самый яркий цвет в вашей палитре оставьте для кнопки.
Пример контрастной кнопки на лендинге Irina Lobashova
На бордовом фоне чёрная кнопка «Программа курса» бросается в глаза благодаря контрасту. Пользователь увидит, куда нажать и что он получит.

Таким приёмом пользуются в дизайне не только лендингов, но и email-рассылок:
Пример контраста в письме Kerastase
Направление
Существуют элементы, подсказывающие направление, в котором нужно двигаться взгляду пользователя. Это как контрольный выстрел — если обрамление и контраст не заинтересуют пользователя, направляющие элементы дадут знать, на что нужно смотреть.

Часто, чтобы указать направление, используют стрелки.
Лендинг DrayTek
Также подходят векторы, линии и направление человеческого взгляда.
Направление человеческого взгляда на лендинге MovieTickets
Эффективность направления объясняется природным любопытством людей: если мы заметим человека, который на что-то пристально смотрит, мы тоже туда посмотрим.
Воздух
Воздух — это пустое пространство между текстом, картинками и другими деталями лендинга. Воспринимать информацию проще, если страница не перегружена элементами.
Перегруженный лендинг клиники The Doctors
В примере выше почти нет воздуха, все прилипает друг к другу и не сразу можно сообразить, как называется клиника. К тому же, текст неудобно читать — нужно напрягать зрение и едва ли не водить пальцем по экрану, чтобы не сбиться.
Лендинг Unbounce с воздухом
Блок с призывом к действию отделен от остальной части лендинга. Преимущества разбиты на части и тоже разделяются воздухом.
Итог
Элементы лендинга стоит располагать так, чтобы самое важное для лидогенерации — форма заявки и кнопка — сразу привлекали к себе внимание и их не приходилось искать. Для этого есть несколько приёмов дизайна, самые распространённые из них — обрамление, контраст, направление и воздух. Их можно комбинировать, но важно не переборщить.

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