Как сделать продающий дизайн лендинг пейдж?

Я продолжаю серию выпусков посвящённых созданию лендинг пейдж. Для тех кто попал на это страницу случайно, вот что я рекомендую прочитать:

• Из чего состоит создание landing page?
• Анализ рынка и конкурентов при создании лендинг пейдж.
• Как анализировать Ц.А при создании landing page.
• Как создать прототип для landing page.

Дизайн лендинг пейдж

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

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

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

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

Напомню, когда мы говорим о landing page, мы говорим о следующих типах:

• Вирусная страница – выглядит как мини-игра или видео-ролик, иногда даже как, изображение с логотипом компании. Такой дизайн посадочной страницы ненавязчив и в развлекательной форме медленно дает пользователю привыкнуть к контакту с фирмой.
• Целевая лид-страница – включает в себя: основную информацию о товаре или услуге. Дизайн одностраничного сайта этого типа рассчитан на продажу товаров/услуг на прямую с лендинг пейдж.
• Рекламная страница – самая популярная с точки зрения верстки лендинг пейдж. На такой странице, Вы можете и подписчиков собрать и товар/услугу продать и сделать хороший PR.

Начнём с формата графики, вот виды которые я выделил для себя:

• landing page в стиле flat, новое в дизайне, отлично подходит для молодой аудитории, пару примеров:

  

• Лендинг пейдж с объёмной графикой, в принципе часто используется, пример:

  

• Лендинг пейдж со свободным пространством. Это даже не стиль графики это подход к дизайну, вот пару примеров:

  

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

Дизайн одностраничного сайта

Сам дизайн должен быть простым и главный критерий даже «ГОМЕР Симпсон» должен понять ,что нужно делать и что от него хотят.
Вот несколько правил и выводов, которые я сделал руководя дизайнерами:

1. Общность элементов – в дизайне должна присутствовать так называемая общность элементов, то есть когда смотришь на дизайн, ты как будто понимаешь, «да! Этот сайт сделан в одном стиле». Больше всего это проявляется в шрифтах, одинаковом стиле графики и цветах.
2. «Чистый дизайн» — возможно этот термин придумал, кто то до меня, но всё же. Дизайн должен быть чистым , а это значит, что на лендинге должно быть много пространства, и лендинг пейдж должен- вести наш взгляд по странице. Допустим, с моей точки зрения в этом шаблоне БМ лендинга, нет дизайна!

   

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

   

Выводы:

Дизайн важнее чем вёрстка, так как пользователь видит, не вёрстку и ему не интересно, какая у вас стоит CMS (система управления сайтом), ему хочется получить в доступном формате информацию которую он искал.