Скидки на курсы ждут в личном кабинете. Нажмите тут

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

Дизайн лендинга: 4 приема для увеличения конверсии
Екатерина Краморенко
часы голубые
5 мин.

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

Обрамление

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

Лендинг домашней кондитерской «Тортерифе»

Пример обрамления на лендинге домашней кондитерской «Тортерифе»

Контраст

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

Лендинг Irina Lobashova

Пример контрастной кнопки на лендинге Irina Lobashova

На бордовом фоне чёрная кнопка «Программа курса» бросается в глаза благодаря контрасту. Пользователь увидит, куда нажать и что он получит.

Таким приёмом пользуются в дизайне не только лендингов, но и email-рассылок:

Письмо Kerastase

Пример контраста в письме Kerastase

Направление

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

Часто, чтобы указать направление, используют стрелки.

Лендинг DrayTek

Лендинг DrayTek

Также подходят векторы, линии и направление человеческого взгляда.

Лендинг MovieTickets

Направление человеческого взгляда на лендинге MovieTickets

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

Воздух

Воздух — это пустое пространство между текстом, картинками и другими деталями лендинга. Воспринимать информацию проще, если страница не перегружена элементами.

Лендинг клиники The Doctors

Перегруженный лендинг клиники The Doctors

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

Лендинг Unbounce

Лендинг Unbounce с воздухом

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

Итог

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

Как создать продающий лендинг и не напортачить
Читайте также:
Алина Головко
часы малые
5 мин.

Оставьте комментарий

Ваш комментарий:
Имя:
Email: