Идеальный Landing Page. Создаем продающие веб-страницы | страница 78




Рис. 5.25. Пример страницы


Что не так в этом примере?

На первый взгляд все правильно, все формальные требования соблюдены.

Но непонятно, что делает этот человек на фото. Кстати, какие предположения, что предлагает эта компания? Да все что угодно! Начиная с планшетов и заканчивая прогнозом погоды.

Как можно трактовать картинку без подписи?

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

Ладно, раскроем карты. На самом деле это профессиональная команда верстальщиков, которая предлагает свои услуги. Но понять это не так-то просто. Поэтому, используя «правильные» элементы лендинга, не нужно уходить от главного – сути вашего предложения.

Заголовок + кнопка

Рассмотрим варианты оформления.

Первый вариант. Заголовок + кнопка (рис. 5.26).


Рис. 5.26. Пример заголовка и кнопки


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

Заголовок + форма + кнопка

Второй вариант. Здесь используются только заголовок, форма и кнопка (рис. 5.27). На картинке изображен один из лучших примеров сайта от компании Optimizely, и ему даже не нужен подзаголовок. С помощью градиента и фона внимание пользователя концентрируется на строке для ввода электронного адреса.


Рис. 5.27. Пример заголовка, формы и кнопки


Заголовок + подзаголовок + форма + кнопка

Третий вариант. Третий вариант отличается от второго наличием подзаголовка (рис. 5.28).

Заголовок: Shop Frank & Oak Today – «Покупайте товары Frank & Oak сегодня».

Подзаголовок: в нем краткое описание выгод от регистрации на сайте.


Рис. 5.28. Пример заголовка, подзаголовка, формы и кнопки


Форма: здесь предусмотрена возможность войти на сайт через Facebook или ввести в специальное поле свой e-mail.

Кнопка: нажав кнопку Get Started, можно попасть на сайт магазина.

Заголовок + подзаголовок + кнопка + + триггеры

Четвертый вариант. Заголовок + подзаголовок + кнопка, и на первый экран выводятся триггеры (рис. 5.29). Триггеры являются теми выгодами, которые получает клиент.

Заголовок + подзаголовок + кнопка + + отзывы

Пятый вариант. Заголовок + подзаголовок + кнопка + отзывы. На рисунке представлен подобный сайт (рис. 5.30). Отзывы на этой странице – это готовые кейсы, по сути, здесь перечислены выгоды, которые получили пользователи.