Landing Page или «лендинг» — это сайт или страница, созданная, чтобы побудить человека совершить определённое действие: купить товар, оставить заявку, заказать замер, зарегистрироваться на вебинар.

Landing Page переводится как «посадочная страница» — страница, куда «приземляются» посетители, перешедшие по рекламной ссылке. 

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

Дословно Landing Page переводится как посадочная страница — страница, куда приземляется трафик. То есть если М.Видео рекламируется в Яндекс.Директе по запросу «купить iPhone» со ссылкой на категорию в своём магазине — категорию тоже можно назвать лендингом, ведь именно туда «приземляется» рекламный трафик.

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

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

В 2007 году Студия Артемия Лебедева сделала сайт компании «Эмекс», которая продавала автозапчасти. Выглядел сайт так:

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

Так сайт «Эмекс» выглядит сейчас:

На главной появился понятный заголовок, который рассказывает, чем занимается компания. Появились продающие элементы — оффер и выгоды. Ниже есть каталог, где можно оформить заказ. 

Между этими двумя скриншотами — 13 лет развития маркетинговой мысли в России.

Первые лендинги начали появляться в 2010-х годах, когда бизнес понял, что интернет — это источник клиентов и возможность заработать деньги.

«Мы осознали потенциал лендингов случайно. В 2011 году мы с партнёрами, как маркетологи, делали сайт для компании «Отличные окна» и вместо креатива и анимаций просто сделали заголовок “Утром окна — вечером деньги” и кнопку “Заказать окна”. На следующий день мы получили в десять раз больше заявок, чем обычно. В тот момент стало понятно одно — мы нащупали что-то новое».

Михаил Дашкиев, главный методолог проекта Units

С 2012 года в России начался расцвет лендингов. В основном компании запускали простые одностраничные сайты, где у посетителя было два сценария: оставить заявку или уйти. Такие сайты были дёшевы в производстве, создавались за несколько дней и давали отличные результаты — 5-10% конверсии.

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

Позже начал формироваться рынок сервисов — онлайн-чаты, виджеты и конструкторы. В 2014 году появилась Tilda, которая полностью изменила рынок сайтов. 

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

В основном все лендинги сегодня можно разделить на два типа:

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

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

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

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

Пример длинного лендинга https://sok-aloe.ru/

1. Архитектурное освещение фасадов зданий — 500lux.ru

2. Продажа растворимого кофе — APPIS Coffee

3. Онлайн-школа вкусных домашних десертов — Pauline School

4. Франшиза площадок для проведения праздников в формате квест-шоу — Rublev Family

5. Предрейсовые и предсменные медосмотры по всей России — MedMap

6. Landing Page нашего юнита, где рассказано, как создать прототип Landing Page — Открыть

Есть восемь этапов: с чистого листа до первых заявок от потенциальных клиентов.

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

Первое, о чём нужно спросить себя — для чего вы создаёте лендинг, в чём его цель? Вы хотите продавать товар напрямую и получать оплаченные заказы? Собирать заявки для отдела продаж? Или сайт нужен для сбора подписной базы емейлов?

Чтобы сформулировать задачу, предлагаем заполнить небольшую таблицу:

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

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

Подумайте, чем уникален ваш бизнес, за что его уже выбирают клиенты? 

Может, вы занимаетесь стройкой и это семейный бизнес, который существует несколько десятков лет? Или в вашей школе испанского уроки с носителями языка стоят в два раза ниже рынка?

Подсказка: пытайтесь найти и сформулировать предложение с привязкой к цифрам и фактам.

       2. Представьте, что потенциальный клиент попал к вам на лендинг. Какой самый простой следующий шаг он может сделать, чтобы приблизиться к покупке?

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

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

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

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

Примеры следующих шагов по уровню стрессовости:

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

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

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

Создать прототип можно с помощью этих инструментов:

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

Лендинг — это набор блоков, которые идут один за другим. Блоки ещё называют экранами.

Экран — это область, которую пользователь видит на своём устройстве в один момент. Когда пользователь скроллит страницу, экраны сменяют друг друга.

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

Любой лендинг состоит из этих экранов:

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

Первый (главный) экран — самый важный, на нём нужно разместить ключевое предложение компании. 

По данным исследования Nielsen, 80% всего времени посетители тратят на первый экран и только 20% на все остальные. 

Если клиент переходит на лендинг и за три секунды не понимает, куда попал, он уходит. Поэтому первый экран должен быть самодостаточным и сразу отвечать на вопрос: «Чем вы занимаетесь и что предлагаете?»

Чтобы ответить на этот вопрос, первый экран должен иметь несколько ключевых элементов:

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

1. Добавьте иконку «листайте вниз» и люди начнут чаще смотреть ваши следующие экраны.

2. Если у вас есть продающее видео, добавьте иконку просмотра на первый экран.

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

Лайфхак: попробуйте перевести сайт на китайский с помощью переводчика. Можно ли теперь понять только по картинке, что вы продаёте?

Попробуйте угадать: что предлагают на этих двух сайтах?

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

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

С первым экраном мы разобрались. Дальше нужно создать промежуточные экраны.

Обычно лендинг состоит из 4-7 экранов. Какие нужны вам и сколько их будет, вы определяете исходя из вашей ниши, преимуществ и бизнес-задачи. Если всё для принятия решения можно уместить в два экрана — отлично, делайте короткий лендинг.

Расскажем, какие экраны бывают, чтобы вам было из чего выбирать:

Рекомендуемый порядок: 

В идеале экраны о продукте должны ответить на четыре вопроса:

Мы составили список из десяти типов экранов, можете выбрать подходящие и наполнить их своими смыслами:

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

Когда вы определились с промежуточными экранами, осталось создать завершающий экран вашего лендинга — подвал.

В подвале обычно размещается:

Форма захвата — это окно с полями для ввода контактов. Она предлагает посетителю сделать следующий шаг.

1. Закрытая форма захвата содержит только кнопку с текстом, по нажатию которой открывается форма контактов. Она не занимает много места, вы можете использовать её в конце каталога, описания преимуществ или на любом экране.

2. Открытая форма захвата содержит оффер и форму для заполнения контактов. Её можно применять, например, в качестве формы заказа. 

3. Контекстная форма захвата привязана по смыслу к контексту экрана

Такая форма занимает отдельный экран лендинга. При таком расположении всё внимание пользователя приковано к вашему предложению.

Формы захвата обычно располагают вначале (на первом экране), в середине лендинга и в конце. Но это не строгое правило.

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

При проектировании форм захвата вспоминайте про нашу шкалу стрессовости:

3.  Структурируйте текст, не публикуйте большие блоки информации сплошным текстом. Следуйте правилу «одна мысль — один абзац».

Посмотрите на эти два примера. Какой из этих текстов легче прочитать?

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

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

В этой статье мы рассмотрим создание лендинга на конструкторе.

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

Как перенести прототип на конструктор

Первое, что нужно сделать — выбрать сервис. Зарегистрируйтесь, сравните тарифы, выберите подходящий для вас. 

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

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

Советы по визуальному оформлению

1. Старайтесь, чтобы цвета текста и фона контрастировали. Главное правило дизайна — тёмный текст на светлом фоне, светлый текст — на тёмном фоне.

2. Кнопка с призывом к действию должна быть самым заметным элементом на странице. Если кнопка с целевым действием не будет заметна, пользователь не поймёт, что делать дальше.

3. Избегайте фотостоков. Сайты со стоковыми фотографиями «успешных людей» смотрятся дёшево и постановочно. Лучше сделайте профессиональную фотосессию на основе вашего прототипа. Или найдите иллюстратора, который красиво отрисует продукт.

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

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

Список сайтов для вдохновения:

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

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

Сервисы веб-аналитики для сайта:

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

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

Мы заранее определяем, какие действия для нас важны, прописываем это в системе, и когда пользователь это действие совершит — аналитика это увидит и зафиксирует.

Настройка аналитики и целей — тема для отдельной статьи. Но можно посмотреть инструкцию от самих сервисов web-аналитики:

Перед запуском рекламы пройдитесь по этому чек-листу и убедитесь, что всё работает:

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

Чтобы плотно погрузиться в вопросы трафика, советуем пройти наши Юниты:

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

Чтобы продавать эффективнее, пройдите наш Юнит «Маркетинг-кит».

Создать лендинг — непростая задача, которая состоит из множества шагов. 

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

Ещё раз пройдёмся по шагам:

У нас есть отличный Юнит «Прототип Landing Page», который поможет вам разобраться с двумя самыми сложными этапами — определить задачу и создать прототип. Автор этого Юнита — Михаил Дашкиев. Михаил одним из первых в России начал системно использовать лендинги и вложил в этот Юнит все свои знания и опыт.

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

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

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

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

Забронировать Юнит