Как сделать Лендинг (Landing Page)

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

 

Особенности Landing Page

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

Структура лендинга представляет собой несколько последовательно меняющихся экранов, которые проводят пользователя по цепочке от знакомства со спецификой до целевого действия. У коммерческих страниц обязательно должно быть целевое действие: в идеале кнопка, но иногда форма регистрации с кнопкой. У информационных одностраничников такой кнопки может не быть: такие проекты (например, созданные под строительство завода или открытие магазина) просто информируют пользователей о состоянии дел.

Этапы создания лендинга:

• Подготовительная стадия, на которой отрабатывается идея и концепция продвижения продукта (изучение целевой аудитории, анализ конкурентов).
• Разработка структуры лендинга с адаптацией под ваш продукт (как правило, страница содержит главный экран с уникальным торговым предложением, блок с описанием товара/услуги, преимущества от покупки/регистрации/заказа, отзывы клиентов, форма заказа или призыв с кнопкой, цены, контакты).
• Наполнение блоков текстом самостоятельно или делегирование этой задачи копирайтеру.
• Создание прототипа сайта с разметкой блоков и размещением основных элементов.
• Дизайн с подбором шрифтов, фона, изображений, размера и цветового решения кнопок, иконок и пр.
• Покупка домена с хостингом.
• Верстка вручную или с использованием конструктора.
• Использование дополнительных инструментов.
• Проверка.

Рассмотрим некоторые из этих этапов и инструменты для их реализации. Стадии выбора структуры и наполнения текстом будут представлены в отдельной статье, поэтому сконцентрируемся на исполнительных действиях от прототипирования до использования дополнительных инструментов.

 

Прототип сайта

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

Прототипирование:

• экономит время;
• дает возможность сравнить несколько вариантов дизайна;
• позволяет проанализировать структуру, добавив/убрав определенные элементы.

Для создания прототипа лендинга можно воспользоваться следующими вариантами:

• набросать вручную на бумаге (в любом случае лучше начинать с этого варианта, что позволит упорядочить мысли и идеи);
• нарисовать в графическом редакторе, например, в Photoshop, CorelDraw или Adobe Illustrator;
• использовать специальные сервисы для прототипирования, например, Marvel, Draftium, Axure RP, Mockingbird, NinjaMock, Moqups или ESK.One.

Создание прототипа в специальных сервисах (среди указанных есть и бесплатные либо тестовые варианты) является предпочтительным для работы на постоянной основе. Функционал этих платформ интуитивно понятен и достаточно разнообразен для создания любого макета.

 

Дизайн

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

• Цветовое решение (цвет фона, шрифтов, кнопок и других элементов) должно соответствовать атрибутике компании, например фирменным оттенкам или лого. Кроме того, при выборе цветовой гаммы следует ориентироваться на характер продвигаемого продукта/услуги. К примеру, черный цвет явно не подходит для продажи тура на море.
• Шрифты — для первого проекта «для себя» лучше выбрать бесплатные шрифты Google Fonts. Этого вполне достаточно для большинства лендингов. При этом предпочтительно использовать нейтральные варианты, например, Open sans, Roboto или Pt sans, которые точно не отпугнут покупателя.
• Графические элементы: изображения, фото, иконки. При возможности лучше использовать собственную графику, нежели стандартные и приевшиеся посетителям бесплатные изображения. Для крупных коммерческих компаний лучше заказывать платные фото с фотобанков.

 

Верстка

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

• LPGenerator
• Tilda
• WIX
• Битрикс24

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

 

Дополнительные инструменты

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

• опция заказа обратного звонка дает возможность связаться с клиентом в удобное для него время;
• чат будет хорошим дополнением к форме обратной связи или к опции заказа обратного звонка, поскольку значительно повышает скорость обработки заявок или консультирования;
• Google Analytics и Яндекс.Метрика дадут представление о количестве посетителей, заявок, поведении пользователей, что даст возможность оптимизировать работу сайта;
• подключение CRM для контроля движения заявок, особенно при большом потоке клиентов;
• инструменты для сбора контактов для осуществления рассылок.

Использование этих и других дополнительных функций (например, калькулятора услуги или ретаргетинга) сделает лендинг еще более эффективным. Некоторые из них обязательны (статистика), другие опциональны, поэтому выбор должен базироваться на анализе целевой аудитории и продукта.