Блог онлайн-университета Code breakers

Продающий лендинг

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

Что такое лендинг


Лендинг — от англ. landing page, посадочная страница. Это одностраничный сайт, посвящённый одной услуге, событию, товару.



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

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

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

Лаконичный лендинг Get Repeat. Одно конкретное предложение, слоган, заметная кнопка.

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

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

Как создаётся продающий лендинг


Успешный лендинг стоит на двух столпах: чёткое пониманием аудитории и чёткое целевое действие. То есть лендинг точно понимает, кого и в чём он хочет убедить.

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

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

  • Аудитория лендинга — пласт пользователей интернета, сегментированный по определённым признакам. Возраст, пол, увлечения, профессия, материальный статус. Но, конечно, всегда нужны намного более чёткие рамки: любители котиков, любители конференций, покупатели домов, подростки, которым надо готовиться к ЕГЭ и так далее. Думаем, вы понимаете, о чём мы.

Как думаете, какая аудитория лендинга? Понятно ли, для кого эти курсы математики?

  • Целевое действие лендинга — это кнопка. Или форма. Один путь для потока пользователей, одна точка для попадания в воронку. И здесь уже применяются разные варианты: на кнопке или форме можно написать «Оставить контакты», «Подписаться на рассылку», «Зарегистрироваться», «Забронировать» и так далее. 

За кнопкой заказа номеров далеко ходить не надо. Тут всё ясно - что и для кого. И если у вас приятно щемит сердце при виде этой красоты, то вы та самая целевая аудитория. Местия, кстати, это в Грузии - кажется, что мотивы страны неплохо передаёт шрифт заголовка.

А это сайт банка для предпринимателей "Точка". Это ясно из первого же экрана лендинга.

Из чего строится продающий лендинг


Если присмотреться к лендингам в сети, то можно заметить повторяющуюся структуру. Это выведенные и принятые маркетинговые правила сторителлинга — «рассказывания» истории о том, чему посвящён лендинг. По этим правилам строится структура лендинга. А структура — последовательность экранов. Под экранами здесь понимаем сменяющиеся при скроле части лендинга.

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

  • хедер, или шапка — где помещены лого, меню.
  • первый экран — где содержится уникальное торговое предложение, или УТП. Здесь же может быть первый (или единственный на весь лендинг) призыв к действию — call to action, CTA — это форма с целевым действием, например, кнопка или форма для заполнения. 
  • второй экран — где располагается рассказ о том, что предлагается пользователю: об услуге, товаре, продукте, событии. 
  • третий экран — преимущества и выгоды, которые человек приобретёт от выбора.
  • далее следуют отзывы или награды или клиенты (если это, к примеру, компания, у которых клиенты — другие именитые компании).
  • блок с ценами обычно следует где-то после описания всех преимуществ, достижений, плюсов бренда.
  • вновь форма с целевым действием — полезно повторить её дважды на длинном лендинге.
  • футер, или подвал — который расширяет или уточняет или дополняет или просто дублирует шапку. 

Хедер и первый экран ноукод-агентства MethodZero, где уместилась вся нужная информация о работе агентства, откуда можно перейти сразу в портфолио, посмотреть команду или изучить услуги. Услуги спрятаны в выпадающее меню, потому что их там три вида, и шапка, в которую вынесли все три услуги сразу, выглядела бы перегруженной.
А вот и футер сайта агентства. То же самое, что и наверху, только ещё вакансии и вынесены все виды услуг.

Блок с повторной формой целевого действия у агентства инфографики находится на лендинге сразу после кейсов. Это второй CTA на странице.

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

Блок с ценами на участие в ветеринарной конференции (в тенге).

Первый экран лендинга — уникальное торговое предложение и главная его часть


Лендинг встречают по первому экрану — там содержится УТП, которое и должно побудить человека к действию. Поэтому на этой части остановимся отдельно. 

Элементы первого экрана лендинга такие: 

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

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

Первый экран лендинга ещё одного ноукод-агентства SubZero. Заголовок, подзаголовок, УТП, цвета и иллюстрация - всё хорошо сочетается.

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

На первом экране МОРСа используется приём печатающейся строки - когда предложения печатаются, стираются и набираются вновь. Модный приём и хорошее решение, но, если вы зайдёте на лендинг, то увидите там целых 4 предложения! Чтобы их все прочитать, надо подождать пару минут. И картинка прикольная, но не понятно, что она значит.

Виды лендингов


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

Посмотрим, какие оригинальные решения придумывают дизайнеры:

  • Одноэкранный лендинг. Это когда скролить вообще не надо. Заголовок, подзаголовок, УТП и форма CTA — всё собрано на одном экране. Это очень изящно и лаконично, но надо ещё постараться уместить все структурные части в один экран.
  • Минималистичные лендинги. Когда в оформлении и дизайне минимум цветов, элементов. Тоже очень лаконично. У некоторых дизайнеров получаются невероятно крутые минималистичные лендинги.
  • Анимированные лендинги. Довольно распространённое явление — когда при скроле лендинга разворачивается анимация. Этот приём великолепно смотрится и хорошо вовлекает, особенно если надо кликнуть какой-то элемент, чтобы раскрылась дополнительная анимация.
  • Лендинги-квизы. Тренд на геймификацию контента, то есть превращение потребления контента в игру, прекрасно устроился в сфере продающих лендингов — это и развлечение для пользователя, и польза для него, и потенциальная продажа.  

Ультрастильный и не очень понятный лендинг с чёрно-белыми картинками.

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

Лендинг в честь культурного события в Нью-Йорке. При скроле все эти голуби, пиццы, пончики полетят вверх.

На этом лендинге все эти мультяшные объекты двигаются, летают, катаются, моргают.

Сайт с тестом на определение "Какой вы дизайнер". Там ещё и анимация есть.

На чём делать лендинг 


В мире ноукода конструирование лендингов занимает особую роль — хочется сказать, вот с этого всё и началось. Зерно истины здесь есть — массовое использование ноукод-инструментов начиналось с конструирования лендингов.

В создании лендингов No-code действительно — первый и лучший помощник! Тем более что платформы развиваются, добавляя новые функции и возможности. Например, в некоторых случаях раньше надо было обязательно писать Java-скрипты для анимаций — сейчас анимационные решения вшиты внутрь почти всех ноукод платформ. Приводим список программ, на которых можно собрать лендинг.


Вместо конца


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

Делать продающие лендинги и запускать с них цифровой бизнес мы учим на Базовом курсе по No-code. Поможем освоить азы Tilda, выстраивать и отслеживать маркетинговую воронку, запускать бизнес в интернете.
Что такое