landing-wireframeОтличные примеры landing page советую смотреть на land-book.com

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

В общем виде структура landing page следующая:

1) Header
2) Heroshot
3) Headline
4) Subheadline (value proposition)
5) CTA
6) How it works
7) Pricing
8) Feature list
9) CTA
10) Socialproof
11) Footer

Рассмотрим в отдельности каждый элемент.

Header

В хедере мы размещаем логотип, можно разместить пару неважных ссылок «в глубину» например about, demo, contacts по которым мы можем дать дополнительную информацию о продукте и, если это уже работающий продукт предполагает вход в бекенд-офис, не будет лишней кнопка «Log In» или «Sign In».

Heroshot

Это, так называемая, главная иллюстрация продукта, которая визуально раскрывает суть вашего решения, или его главную фичу/идею.

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

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

Активные действия как правило вызывают heroshot-ы интерфейсов, когда клиент неосознанно пытается кликать по иллюстрации желая уже взаимодействовать с ним.

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

Еще раз повторюсь о важности эмоциональной связи: она берет вашего клиента заложником пока он не совершит целевые действия.

Headline

Через открытые heroshot-ом врата клиент входит с желанием подробнее узнать о продукте и понять, соответствует ли он его потребностям. Headline в нескольких словах раскрывает суть продукта, его основную задачу и выгоду для клиента.

Subheadline

Еще подробнее погружает клиента в основную фичу, именно на этапе subheadline клиент уже делает вывод читать дальше или закрыть ваш лэндинг.

CTA

Аббревиатура от Call To Action (призыв к действию).

Call To Action (CTA) это кнопка с особенным текстом. Как правило, это очень большая кнопка в которой, используется до 5-ти слов побуждающих пользователя к действию.

How it works

Блок из 4-ех секций, описывающих основное (целевое) взаимодействие пользователя с продуктом. Важно не углублятся в недры.

Pricing

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

Feature list

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

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

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

Как правило под блоком «feature list» еще раз повторяется призыв к действию – CTA.

Social proof

Обычно, в самом низу landing page присутствует блок «социального одобрения». Блок показывает, что к вашему продукту не равнодушны, его одобряют и у него уже есть почитатели или, что о нем говорят и его обсуждают.

Главная задача social proof показать нужность и полезность продукта.

Тут могут быть как иконки-ссылки на известные интернет-издания с материалом о вас, так и благодарные комментарии, отзывы довольных пользователей.

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

Footer

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