Landing page («посадочная страница») — страница, построенная таким образом, чтобы обеспечить сбор контактов максимального количества целевых посетителей и максимальную конверсию, направленную на целевое действие (покупку, подписку и др.).Наша задача состоит в том, чтобы максимально просто и доступно представить потенциальным пользователям блочный редактор от команды CodeX.
Из чего состоит лэндинг?
Вот основные компоненты и факторы, присущие лэндингам:
- Призыв к действию (СТА);
- Заголовок, подзаголовок и описание;
- Простота;
- Релевантность образа сайта запросам пользователей;
- Продуманная траектория взгляда.
В первую очередь мы озадачились изучением лэндингов продуктов, представляющих аналогичные решения, лучших SaaS проектов в смежных областях:
Imperavi
https://imperavi.com/redactor/
Текстовый редактор типа WYSIWYG (What You See Is What You Get). В лэндинге присутствует возможность поработать в редакторе и приобрести его. Просто и доступно, лучше всяких слов объясняет преимущества продукта.
Bootstrap
Набор инструментов для создания сайтов и веб-приложений. Лэндинг является образцом современного дизайна (конечно, это же самый популярный фреймворк для оформления интерфейсов) и хорошего вкуса - продуманный вертикальный ритм, простота, разумное сочетание шрифта, цвета и форм. Страница говорит о содержании продукта, его преимуществах, дает возможность скачать фреймворк и посмотреть примеры его использования.
GoogleDocs
https://www.google.ru/intl/ru/docs/about/
Бесплатный онлайн-офис. Лэндинг призывает немедленно начать создавать документы, показывает основные преимущества и особенности работы с продуктом.
Telegram
Бесплатный кроссплатформенный мессенджер. Лэндинг состоит из логотипа и слогана, преимуществ продукта, и возможностей использования. Варианты использования представлены с помощью иллюстраций, которые являются отличительным знаком этого лэндинга.
Пробуем сами
После изысканий была представлена первая версия лэндинга, которая состояла из:
- названия и слогана,
- кнопки загрузки,
- раздела с основными преимуществами редактора и иконками,
- скриншотами с примерами работы редактора,
- основных этапов работы с редактором,
- контактов.
Основные недостатки первого варианта дизайн-макета:
- не сочетаемые элементы дизайна;
- иконки разных типов;
- плохо представлена информация о продукте, необходимо добавить какой-либо контент.
Второй вариант представлял из себя аналогичный макет, с учетом изменений в указанных выше пунктах.
Было принято решение заменить скриншоты и описание этапов взаимодействия на демо-версию, использовать собственные иконки для отображения преимуществ редактора. Результаты приведены ниже.
В данном лэндинге плохо прорисованы и расположены кнопки, использована неподходящая цветовая палитра, что отразилось на исправлениях в дизайн-макете одной из последних версии. Можно посмотреть, как сильно различается внешний вид кнопки в зависимости от толщины начертания.
И, напоследок, несколько советов по проектированию лэндингов:
- не располагайте блоки близко друг к другу (отступы в этом деле крайне важны);
- выбирайте приятное сочетание шрифта и дизайна;
- старайтесь использовать не более 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/о-верстке-вертикального-ритма