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

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

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

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

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

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

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

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

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

Начнём с формата графики, вот виды которые я выделил для себя:
• landing page в стиле flat, новое в дизайне, отлично подходит для молодой аудитории, пару примеров:

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

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

Лендниг пейдж основой которого является хорошие, сочные картинки:

лендинг пейдж видео. К сожалению, я не нашёл достойного примера, а свой пример мы уже удалили(была страница которая закрывала на живой мастер-класс)

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

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

Сам дизайн должен быть простым и главный критерий даже «ГОМЕР Симпсон» должен понять ,что нужно делать и что от него хотят.
Вот несколько правил и выводов, которые я сделал руководя дизайнерами:
1. Общность элементов – в дизайне должна присутствовать так называемая общность элементов, то есть когда смотришь на дизайн, ты как будто понимаешь, «да! Этот сайт сделан в одном стиле». Больше всего это проявляется в шрифтах, одинаковом стиле графики и цветах.

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

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

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

Автор: Станислав Цыс