Лендинг — как создать: подробное руководство с реальными примерами

01 03 2024. Время чтения — 15 мин

Я Екатерина Комарова, UX/UI-дизайнер и эксперт сообщества Tilda Publishing. В моем активе 3 года коммерческой разработки сайтов и 20+ проектов в топ-подборках Тильды. Этот материал — часть целого блога, где вы найдете другие полезные статьи и кейсы по веб-дизайну. Продолжая читать, вы соглашаетесь прокачивать свою насмотренность :)

Главная — Блог — Лендинг: подробное руководство

Классификаций много, но все они похожи. Можно выделить 6 основных типов лендинга по цели.

Продуктовый

Имиджевый

01

04

Под услуги

02

Под рассылку

Визитка

Под мероприятие

05

06

03

Лендинг же создается под определенный сегмент ЦА. В нем нет лишнего: никакой рекламы и посторонних ссылок, только блоки с дизайном и текстом. Одностраничный сайт как бы намекает гостю: ну нажми уже на эту кнопку, а не другую. Структура лендинга верная, посылы понятны, дизайн симпатичен — пользователь кликает куда надо.

У обычных сайтов больше возможностей для SEO-оптимизации. Зато лендинги не нуждаются в программистах: вы можете быстро внести правки, и ничего не сломается. Навыки кодинга не потребуются.

Классический сайт состоит из множества разделов и рассчитан на широкую аудиторию. Здесь нет четкой цели: достаточно продать какой-то продукт. Например, так устроены маркетплейсы.

Дизайн одностраничного сайта для малого бизнеса в прямом эфире на официальном канале Tilda Publishing

На вебинаре Екатериной были разобраны:
— Работа с референсами: где искать вдохновение и как не забывать важное среди кучи скринов.
— Аргументация решений: как минимизировать количество правок в дизайне лендинга.
— Создание дизайна с учётом вёрстки с автомасштабированием.
— Особенности дизайна мобильной версии лендинга.

В пользу лендинга играют 3 фактора:

(1)

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

(2)

Легкий старт. Не обязательно придумывать крутой дизайн лендинга, строить многоуровневую архитектуру как для сайта. В той же Тильде достаточно загрузить шаблон и отредактировать под себя. На это уйдет 2-3 часа, даже если у вас нет опыта.

(3)

Понятное управление. Можно создать сколь угодно страниц и по каждой вести статистику. Для этого подойдут инструменты вроде Яндекс.Метрики и Google Analytics. Они фиксируют поведение пользователей лендинга и показывают, что лучше поправить.

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

№ 2

Информация о продукте

Окей, посетитель не ушел со страницы лендинга. Тогда мы имеем право рассказать ему побольше о продукте. На это выделяем 3 блока:

Рассказ о продукте завершен, переходим дальше.

Результат всегда идет перед продуктом. Допустим, студенту не очень интересно, как устроена нейросеть. Ему нужна курсовая, именно поэтому он готов отдать условные $20 и обращается к ИИ.

№ 3

Польза для клиента

Выгоды продукта на странице лендинга можно подавать по-разному:

Преимущества. Явно прописываем жирные плюсы, которые хочет видеть клиент. Хорошо, если удалось включить цифры, но не стоит изощряться.

Программа. Объясняем пользователю, как будет проходить взаимодействие. Даем четкую последовательность шагов, попутно указывая на выгоды. Такой подход позволит читателю представить, что у него уже есть ваш продукт.

Итоги. В формате мини-кейса показываем посетителю, что у него получится с нами. Обычно сюда попадают фото и видео с посылом «до и после».

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

Ключевой компонент любого одностраничного сайта или лендинга. Слабый call-to-action испортит конверсию, какой бы продуманной ни была структура. Экран с призывом должен выделяться среди остальных. Если хотите настроить форму заявки, делайте меньше вопросов. Так посетитель быстрее совершит целевое действие.

№ 4

Призыв к действию (CTA)

У пользователя все равно останется нотка недоверия, если на лендинге нет доказательств. Вот что можно сделать, чтобы сомнения отпали:

№ 5

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

Портфолио. Соберите несколько работ или кейсы, которые считаете лучшими. Кратко поясните, почему выбрали именно их. Пользователь сам нажмет на кейс, если захочет подробностей.

Сертификаты и курсы. Докажите свою компетентность документально. Посетитель будет впечатлен, если ваши достижения признаны государством или крупными компаниями.

Коллектив. Ключевая идея — люди создают для людей. Покажите пользователю, кто стоит за продуктом.

Отзывы. Лучше всего работают видеоотзывы, потому что их сложнее подделать, чем текстовые. Разместите ссылку на соцсети довольного клиента. Пользователь перейдет, увидит реального человека и захочет так же.

Партнеры. Если вы сотрудничали с крупными предприятиями, укажите их. Процитируйте мнение представителя компании — гарантированно получите очки доверия.

На этом этапе пользователь вот-вот кликнет, но ему что-то мешает. Возможно, какие-то вопросы остались без ответа. Поэтому стоит предусмотреть 2 блока на странице лендинга:

№ 6

Иные сведения

FAQ. Здесь закрываются наиболее частые возражения: почему продукт дорогой, у меня не получится, есть ли гарантия результата и т. д. Также разбираются технические моменты: рассрочка, доставка, обмен и возврат товара.

Обратная связь. Для некоторых вопросов и предложений недостаточно раздела FAQ. Поэтому нужно поделиться контактами: номером, электронной почтой, ссылками на соцсети и адресом. Можно добавить форму или просьбу перезвонить.

Здорово! Пользователь добрался до конца. Подвал или футер — последний экран лендинга, где мы оставляем контактные данные и условия использования.

Сейчас вы знаете примерную структуру. Но это не значит, что можно стартовать. Разработка страницы лендинга начинается задолго до создания дизайна и написания текстов. Давайте разберемся, какие этапы нам предстоит пройти.

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

Если вы соберете все преимущества воедино, люди предпочтут ваш лендинг. При этом необязательно изобретать что-то новое. Достаточно, чтобы лендинг был удобнее, чем у отдельно взятого конкурента.

№1 Анализ ключевых игроков

Вот как искать своих оппонентов:

Когда конкуренты уже известны, составьте таблицу с примерно такими столбцами:

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

название конкурента;

достоинства;

недостатки;

цена продукта;

сайт;

соцсети;

лид-магнит (бесплатная услуга или материал);

Перед созданием лендинга исследуйте целевую аудиторию. Даже если у вас уже есть сайт и вы уже продвигали продукт. Одностраничные сайты работают иначе, ЦА там другая — более узкая, с конкретным запросом.

Допустим, у вас интернет-магазин тортов. Сюда приходят самые разные люди: кто-то угощает коллег, кто-то ищет сыну на день рождения, а кто-то заказывает на адрес любимого человека. Мы перечислили всего 3 сегмента из десятка.

№2 Анализ целевой аудитории

Теперь представим, что вы открыли новое направление — ПП-торты. Пока непонятно, насколько оно перспективное. Чтобы проверить гипотезу, вы решили создать лендинг на базе сайта. Таким образом хотите анонсировать новинку и изучить структуру спроса.

Тут выясняется, что вам нужно привлечь новую аудиторию. Например, ПП-десерты подойдут ЗОЖнику, который часто посещает зал и вряд ли интересовался вашими продуктами. Но теперь это потенциальный клиент.

Чтобы находить такие идеи, применяйте методы анализа аудитории. Здесь мы рассмотрим простые решения: метод персон и метод Jobs To Be Done.

Метод персон

Суть в том, чтобы создать портреты идеального клиента и клиентов «похуже». Персоны позволяют глубже изучить свою ЦА. Вот алгоритм поиска персон:

Пример. Пусть нашу персону зовут Елена. Она работает поваром и сама любит перекусить.

Цель. хочет сбросить 10 килограмм лишнего веса.

Проблема. тяжело отказаться от сладкого, балует себя своей же едой.

Решение. предлагаем альтернативу на лендинге — вкусные ПП-десерты, которые не мешают похудению. Можем даже мини-курс продавать: 5 ПП-тортов для тех, кто не может без мучного.

Таких персон должно быть 3-4, не больше. Иначе только запутаетесь.

Метод JTBD

Этот подход позволяет определить, с какой задачей пользователь посещает ваш сайт. Если посадочная страница закрывает запросы от разных людей, продукт будут покупать чаще.

Пример. Допустим, лендинг посетила Юля. Юля занимается фитнесом, следит за фигурой и правильно питается. Значит, ей важно знать, какова энергетическая ценность наших ПП-тортов и что по гликемическому индексу.

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

Теперь, когда вы знаете ЦА продукта, можно писать тексты. Вот наша исходная информация:

№3 Подготовка текстов

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

Нам предстоят 4 стадии:

таблица аналогов;

ключевые персоны;

проблемы и задачи посетителей;

готовые решения.

Разработка структуры. Структура текста должна соответствовать структуре страницы лендинга. Тогда у пользователя вопросы будут пропадать, а не накапливаться.

Наполнение экранов текстом. Чем меньше слов нам понадобится, чтобы донести смыслы, тем лучше. Не стоит писать о том, что можно показать на картинке или схеме. Действуем по правилам инфостиля: факты оставляем, оценки — удаляем.

Формулировка предложения. Об этом мы уже говорили: пишем короткий оффер до 90 символов и пояснение к нему. Упоминаем самые сильные стороны продукта. Базовый смысл страницы лендинга не утратится, если удалить всё остальное — вот признак хорошего оффера.

SEO-оптимизация. Одностраничному сайту тяжело конкурировать с другими в поисковой выдаче. Поэтому обязательно проводим техническую оптимизацию лендинга и включаем в текст ключевые слова — желательно в заголовки. В Тильде это делается легко, без навыков программирования.

Прототип схематически задает содержимое лендинга: экраны, текст, фото и видео, кнопки. Его можно нарисовать на бумаге или в приложении вроде Axure, Figma, Sketch. Особой разницы нет, просто с ручным вариантом неудобно работать в команде.

№4. Прототип лендинга

Прототип лендинга выполняет 3 задачи:

С готовым прототипом лендинга можно приступать к дизайну.

Если вы не особо разбираетесь в дизайне, это не так страшно. В крайнем случае можно обойтись готовыми шаблонами лендингов. Задача дизайна — красиво оформить и подать продукт, а не преобладать над ним.

№5. Дизайн страницы лендинга

В следующем пункте мы обсудим эту тему подробнее.

Здесь разберем базовые правила UI (user interface), которые помогут вам создать первый лендинг без шаблонов.

Для обложки выбираем нетривиальную фотографию или рисуем/заказываем иллюстрацию. Если с фотографией туго, можно использовать белый или цветной фон, а также абстрактный дизайн. Соблюдаем следующие условия дизайна:

Главный экран лендинга

• Картинки с крупными объектами в приоритете.

• Масштаб мелких деталей нужно изменить, если по размеру они сравнимы с буквами.

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

Меню

Прозрачное. Универсальное меню, которое не будет перетягивать на себя много внимания.

Цветное. На таком меню четко виден текст, но оно рассеивает внимание.

Полупрозрачное. Более заметное меню, но без нагрузки на первый экран.

По активности различают такие меню:

Статичное. Видно только на главном экране страницы, при скролле исчезает.

Фиксированное. Всегда занимает место над главным экраном лендинга и не скрывается при скролле.

Комбинированное. Сочетает статичное и фиксированное меню. В фиксированном можно добавить кнопку призыва к действию.

«Гамбургер». Меню, в том случае когда нужно сэкономить пространство. Это особенно актуально для мобильной версии страницы.

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

Секции

Общие правила дизайна для секций лендинга:

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

Визуальная иерархия

Акцент на размер. Чем крупнее объект, тем важнее. Самый очевидный пример — заголовки и подзаголовки.

Акцент на дистанцию. Элементы, которые зависят друг от друга по смыслу, должны находиться рядом. Расстояние между дочерними объектами меньше, чем между родительскими. Допустим, текстовые колонки ближе друг к другу, чем секции.

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

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

Наличие отступов. Секции не должны слипаться, это мешает нормальному восприятию страницы.

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

Разделители. Переход к следующей секции можно задать с помощью линейной или кривой границы. Желательно не смешивать разные разделители.

Заголовки. Они должны быть одного размера, чтобы все секции были равноправными по смыслу.

Цвета заголовков. Новичку сложнее подобрать цвет, не нарушив стиль страницы. Поэтому заголовки лучше не раскрашивать. Если же решились, то для всех заголовков нужно использовать один цвет.

Текстовые колонки. Секции с колонками следует чередовать. Посетитель не сможет сосредоточиться, если перед ним целый Пантеон.

Цвета помогают управлять сознанием пользователя, причем незаметно. Характер сообщения зависит от его внешнего оттенка. Мы привыкли считать, что белый символизирует чистоту, желтый — радость, а красный — решительность. На одностраничном сайте достаточно двух цветов: основного и контрастного, чтобы расставлять акценты. Оптимальное соотношение — 9:1. В редких случаях палитру придется расширять. Например, для лендинга детских праздников, чтобы создать атмосферу веселья.

Палитра

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

Медиа

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

Шрифт

Подобрать палитру для своего дизайна можно здесь.

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

Любой инструмент продаж имеет показатель эффективности. У лендинга этим показателем считается уровень конверсии. Она вычисляется так:

Лиды — те, кто совершил целевое действие. Допустим, страницу застройщика посетило 1000 пользователей. Из них 30 записалось на просмотр квартиры. Получаем конверсию в 3%, что в целом неплохо для сайта недвижимости.

CR (Conversion Rate) = Количество лидов / Количество посетителей * 100%

Предсказать CR сложно, на эту цифру влияют разные факторы:

Обычно исполнители складывают стоимость лендинга из нескольких этапов:

Бриф и созвон. Сначала нужно собрать информацию у заказчика: ознакомиться с продуктом, изучить тематические форумы и сайты, найти отзывы и мнения представителей аудитории.

Анализ конкурентов. Полезно знать, с кем предстоит соперничать за клиентов. Почему — объясняли выше.

Определение стратегии. На этом этапе следует понять, какой ключевой посыл должна содержать страница.

Оценка ситуации. Если заказчик уже пробовал одностраничные сайты, исполнитель может запросить доступ к системам аналитики. Это поможет выяснить, почему предыдущие попытки неудачны.

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

Отрисовка прототипа. Здесь все, что касается логики и структуры лендинга.

Цена лендинга зависит от двух факторов: где вы заказываете и сколько задач нужно выполнить.

Соответственно, чем больше этапов пройдено, тем выше итоговая цена.

Дизайн и верстка. Макет лендинга составляет дизайнер, а саму страницу — разработчик. Чтобы сайт корректно отображался на всех устройствах, нужна адаптивная верстка.

Интеграция сервисов. В первую очередь подключаются системы аналитики. Иногда требуется настроить корзину, эквайринг или чат-бот. С ними лендинг становится более функциональным.

A/B-тестирование. При первом запуске одностраничный сайт может показать низкую конверсию. Это не значит, что нужно делать другой. Можно провести тесты в Google Analytics или Яндекс.Метрике: создать еще одну версию, но с измененной кнопкой CTA, например. И затем посмотреть, как будут вести себя пользователи.

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

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

Диапазон: от 4 до 30 тыс. рублей, в среднем 10-15.

У фрилансера

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

Диапазон: от 10 до 500 тыс. рублей и выше, в среднем 200-250.

У агентства

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

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

У нас цена лендинга на Тильде стартует от 90 тыс руб. Сюда входят все этапы, которые я перечисляла выше, плюс SEO-оптимизация и обучение сотрудников. Гарантию на конверсию не даем, потому что результативность лендинга во многом зависит от выбранной стратегии продвижения. Зато нас не так много, поэтому мы быстро принимаем решения и берем не больше 5 проектов в месяц. За счет этого успеваем обучить сотрудников заказчика, чтобы при случае они сами вносили нужные правки.

Сейчас я покажу 5 лендингов из моего портфолио. Разумеется, с пояснениями.

Срок разработки: 20 рабочих дней

№ 1

Лендинг для сервиса по автоматизации доставки еды Dostavix

На главном экране лендинга я разместила видео с интерфейсом. Идея удачная, потому что здесь мы имеем дело с онлайн-платформой. В заголовках обозначила прямые выгоды для бизнеса и прикрепила 2 кнопки с призывом к действию. Меню фиксированное, не исчезает при скролле.

Дальше все по стандарту:

Срок разработки: 15 рабочих дней

№ 2

Лендинг для курса Илеза Курскиева «JavaScript-программист с нуля до Junior»

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

Дальше все по стандарту:

Срок разработки: 15 рабочих дней

№ 3

Лендинг под серию мероприятий Московского института психоанализа

На первом экране лендинга сделала анимированную хромосому, чтобы сразу вызвать ассоциации с биологией. Дальше пользователь смотрит в заголовок и видит: ага, это действительно биологический лекторий. Стрелкой указала, куда нужно кликать. Меню боковое, чтобы не мешало анимации.

Дальше все по стандарту:

Срок разработки: 20 рабочих дней

№ 4

Лендинг для коллектива импровизаторов «Дыммашина»

Так как команда называется «Дыммашина», я решила, что без дымка никак. Меню лендинга статическое, поскольку в фиксированном нет необходимости: скролл и так короткий, акцент делаем на экраны. Цвет фона пунктов белый, чтобы не конфликтовало с основным фоном.

Структура лендинга свелась к перечислению проектов коллектива. Призыв к действию на втором экране звучит прямо: купите билет. В основном сюда заходит уже прогретая аудитория — фанаты «Дыммашины». Поэтому проблем нет.

Срок разработки: 15 рабочих дней

№ 5

Лендинг под франшизу Tea Funny

Лендинг рассчитан на тех, кто хочет открыть франшизу. Поэтому нужно показать, что из себя представляет компания. На всей странице лендинга больше внимания уделено истории бренда и коллекции Tea Funny. И уже в конце форма заявки на партнерство.

Как видите, в этом проекте я использовала сразу несколько цветов. Дизайн лендинга создавался в соответствии с брендбуком и позиционированием Tea Funny. Продукт ориентирован на людей в возрасте от 14 до 39 лет.

Здесь разберем базовые правила UI (user interface), которые помогут вам создать первый лендинг без шаблонов.

01

Лендинг — отдельная или привязанная к сайту веб-страница, которая мотивирует посетителей к целевому действию. Применяется и в малом, и в крупном бизнесе.

02

Лендинг участвует в воронке продаж и выполняет следующие задачи: прямая продажа, сбор контактов, проверка маркетинговой гипотезы.

03

Лендинг преследует только одну цель, имеет четкую структуру без отступлений.

04

Лендинг запускается на узкую аудиторию, но может обращаться к разным сегментам в блоке «Для кого».

05

Достоинства лендинга: легкий старт, понятное управление, рост конверсии.