заказать консультацию

Принципы дизайна при создании Landing Page

Landing page, Конверсия, Лидогенерация

ПРИНЦИПЫ ДИЗАЙНА ЛП

Сегодня я собираюсь поднять ваши знания на уровень выше и применить несколько олдскульных идей по улучшению Вашей целевой страницы, применяя первые основные принципы Конвертирующего дизайна (Conversion Centered Design (CCD)).

И по доброй традиции начнем со смелой цитаты.

«Цвет кнопки значения не имеет. Контраст – вот, что важно.»

 

Что же такое Конвертирующий Дизайн(Conversion Centered Design (CCD))?

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

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

4 основные принципа дизайна, которые мы будем внедрять на Ваш лендинг:

  1. Обрамление.
  2. Цвет и контраст
  3. Указательные знаки
  4. Пустое пространство.

Я покажу, как эти принципы работают в реальной жизни и объясню, как применяются на Landing Page.

 

Принцип дизайна №1: ОБРАМЛЕНИЕ

Классический прием, использующийся, чтобы увести взгляд читателя и создать визуальный эффект тоннеля. Можем представить это следующим образом: создаем окно на Вашей Landing Page, где вид из окна – это Ваш ПКД.

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

 

ВЫВОД:

Используйте сильные динамические формы для определения Ваших точек интереса.

Landing_page_levlad

 

 

 

 

 

 

Принцип дизайна №2: ЦВЕТА И КОНТРАСТ

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

В большинстве случае цвет кнопки вообще не имеет значения.

Что действительно важно, так это выделяется ли она на фоне всего прочего? Самый простой способ определить цвет кнопки, это посмотреть  на доминирующий цвет (оттенок) Вашей страницы. Предположим, Ваша страница зеленого цвета. В таком случае, выбор кнопки красного или оранжевого цвета был бы вполне разумным.

Фото ниже демонстрирует, насколько контрастный цвет выделяет. Применяя это к Вашей ЛП, то дизайн Вашей страницы выполнен в зеленых оттенках, а цвет кнопки ПКД – алый. Во втором варианте фон бело-голубой и цвет кнопки — красный.

Концептуальный пример:

Landing_page_contrast

Landing_page_star

Пример ЛП:

landing_page_levlad2

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

ВЫВОД:

Оформляйте страницу в одном цвете (используйте различные оттенки), кроме ПКД. Пусть Ваш призыв бросается в глаза.

 

Правило дизайна №3: УКАЗАТЕЛЬНЫЕ ЗНАКИ

Указательные знаки – это визуальные индикаторы, указывающие на площадь фокуса Вашей Landing Page. Они помогают направлять посетителей страницы к конечной цели конверсии, как только человек зашел на сайт, ему становится понятно, в каком направлении двигаться. Указательными знаками являются: стрелки, направление взгляда, различные линии.

Стрелки.

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

Они как бы позволяют сказать «не обращайте внимания ни на что, кроме этой части».

Концептуальный пример:

Landing Page_ levlad

 

 

 

 

 

Направление взгляда – направляющая сила взгляда.

Как представители рода человеческого, мы запрограммированы на понимание назначения и использования глаз. И, как правило, мы склонны исследовать направление пристального взгляда других из любопытства.

Пример использования на Landing Page:

Контраст

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

ВЫВОД:

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

 

Правило дизайна №4: ПУСТОЕ ПРОСТРАНСТВО

Пустое пространство (пробел) – это ничем не заполненное пространство, которое обрамляет важную область Вашей landing page. Почему мы также называем его «пробел» — так это потому, что цвет значения не имеет.

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

«Белое пространство поможет вам подчеркнуть то, что имеет значение.»

Чем больше пространства, которое не используется, тем больше внимания фокусируется на содержании страницы.

В приведенном ниже примере, приглушенные тона снега упирают Ваш взгляд в пингвина или пингвинов, расположенных в углу.

landing page -6

Landing page - 5

Здесь в соответствии взгляд падает прямо в глаза милого пса :)

landing_page_7

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

Landing_page_levlad

Конверсия страницы: 55% с холодного трафика.

ВЫВОД:

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

 

Успешных внедрений и высокой конверсии!

C уважением,

Влад Ле.

Если материал был полезен, жмите "Мне нравится", чтобы получать еще больше
ценных фишек по теме digital-маркетинга и управления проектами

ВОРОНКА ПРОДАЖ БЕСПЛАТНО

В книге вас ждут ответы на такие вопросы
  • Что такое воронка продаж и зачем она нужна
  • 3 главных элемента для многократного увеличения прибыли в любом бизнесе
  • Конкретные примеры единственно правильной работы с трафиком
  • Пошаговый план создания воронки продаж под Ваш проект
Оставьте свой Email И мы обсудим Вашу идею