Landing page («посадочная страница») — страница, построенная таким образом, чтобы обеспечить сбор контактов максимального количества целевых посетителей и максимальную конверсию, направленную на целевое действие (покупку, подписку и др.).Наша задача состоит в том, чтобы максимально просто и доступно представить потенциальным пользователям блочный редактор от команды CodeX.
Из чего состоит лэндинг?
Вот основные компоненты и факторы, присущие лэндингам:
- Призыв к действию (СТА);
- Заголовок, подзаголовок и описание;
- Простота;
- Релевантность образа сайта запросам пользователей;
- Продуманная траектория взгляда.
В первую очередь мы озадачились изучением лэндингов продуктов, представляющих аналогичные решения, лучших SaaS проектов в смежных областях:
Imperavi
https://imperavi.com/redactor/
Текстовый редактор типа WYSIWYG (What You See Is What You Get). В лэндинге присутствует возможность поработать в редакторе и приобрести его. Просто и доступно, лучше всяких слов объясняет преимущества продукта.
![](https://codex.so/upload/editor/o_75b1fb7d1155d03d54992e725b0023f0.jpg)
Bootstrap
Набор инструментов для создания сайтов и веб-приложений. Лэндинг является образцом современного дизайна (конечно, это же самый популярный фреймворк для оформления интерфейсов) и хорошего вкуса - продуманный вертикальный ритм, простота, разумное сочетание шрифта, цвета и форм. Страница говорит о содержании продукта, его преимуществах, дает возможность скачать фреймворк и посмотреть примеры его использования.
![](https://codex.so/upload/editor/o_83c21a8be2804c7add46c08bbf760ce3.jpg)
GoogleDocs
https://www.google.ru/intl/ru/docs/about/
Бесплатный онлайн-офис. Лэндинг призывает немедленно начать создавать документы, показывает основные преимущества и особенности работы с продуктом.
![](https://codex.so/upload/editor/o_622ec80e278862d703b0da7790f150c3.jpg)
Telegram
Бесплатный кроссплатформенный мессенджер. Лэндинг состоит из логотипа и слогана, преимуществ продукта, и возможностей использования. Варианты использования представлены с помощью иллюстраций, которые являются отличительным знаком этого лэндинга.
![](https://codex.so/upload/editor/o_6045478a19c1ee7568177f7c100ccb86.jpg)
Пробуем сами
После изысканий была представлена первая версия лэндинга, которая состояла из:
- названия и слогана,
- кнопки загрузки,
- раздела с основными преимуществами редактора и иконками,
- скриншотами с примерами работы редактора,
- основных этапов работы с редактором,
- контактов.
![](https://codex.so/upload/editor/o_9882039fd34c79a8392288c059b8a7bb.jpg)
Основные недостатки первого варианта дизайн-макета:
- не сочетаемые элементы дизайна;
- иконки разных типов;
- плохо представлена информация о продукте, необходимо добавить какой-либо контент.
Второй вариант представлял из себя аналогичный макет, с учетом изменений в указанных выше пунктах.
![](https://codex.so/upload/editor/o_cc6dd05f423d8c054e0365a2f146e3ea.jpg)
Было принято решение заменить скриншоты и описание этапов взаимодействия на демо-версию, использовать собственные иконки для отображения преимуществ редактора. Результаты приведены ниже.
![](https://codex.so/upload/editor/o_197d539e2de6e97277ebb55b03fcaaa8.jpg)
В данном лэндинге плохо прорисованы и расположены кнопки, использована неподходящая цветовая палитра, что отразилось на исправлениях в дизайн-макете одной из последних версии. Можно посмотреть, как сильно различается внешний вид кнопки в зависимости от толщины начертания.
![](https://codex.so/upload/editor/o_f0b63838f74510be11c617e8f587befd.jpg)
![](https://codex.so/upload/editor/o_e7a034abe3ffd02f7a561a45e677c434.jpg)
И, напоследок, несколько советов по проектированию лэндингов:
- не располагайте блоки близко друг к другу (отступы в этом деле крайне важны);
- выбирайте приятное сочетание шрифта и дизайна;
- старайтесь использовать не более 2–3 цветов в дизайне;
- соблюдайте вертикальный ритм (соотношение вертикальных размеров визуальных элементов и отступов между ними) при расположении элементов, дайте воздуха дизайну;
- не делайте слишком маленький интерлиньяж;
- старайтесь самостоятельно рисовать графику (иконки, фоны) для своего макета, она будет гораздо лучше сочетаться с дизайном, чем готовые стоковые картинки.
Что можно почитать
- Небольшая статья о том, почему лэндинги так похожи http://www.novolume.co.uk/blog/all-websites-look-the-same/
- Об ошибках и возможностях проектирования лэндингов http://habrahabr.ru/post/226969/
- Все о роли отступов в дизайне https://ifmo.su/article/20
- О вертикальном ритме https://peredelka.wordpress.com/2013/10/29/о-верстке-вертикального-ритма