Собрать лендинг самостоятельно можно без навыков дизайна — в этом помогут конструктор сайтов и пошаговая инструкция. Начнём с азов и расскажем, что такое лендинг, в чём их преимущества и с чего начать их создание.
Что такое лендинг
Лендинг-пейдж (от англ. landing page), или просто лендинг, — это посадочная страница, на которую пользователи попадают через рекламу в социальных сетях, благодаря релевантно настроенному таргетингу или баннерной рекламе.
Сайт-лендинг знакомит пользователя с продуктом или услугой. Задача страницы — побудить человека выполнить целевое действие: купить, подписаться на рассылку, получить лид-магнит, оставить заявку.
Лендинг помогает бизнесу повышать продажи текущих продуктов или тестировать идеи новых, чтобы выбрать подходящее позиционирование.
Материал по теме:
Кто такой дизайнер лендингов и как им стать
В чём отличия обычного сайта от лендинга
Начинающим дизайнерам не всегда понятно, чем отличается лендинг от обычного сайта.
Лендинг — узконаправленный. Он создаётся для того, чтобы продавать конкретный товар или услугу, исследовать необходимый сегмент аудитории. Лендинг рассчитан на какую-то одну конкретную целевую аудиторию, а не на всех возможных пользователей или покупателей одновременно.
Например, бренд хочет привлечь внимание к определённым продуктам, а не ко всей продуктовой линейке сразу. Соответственно, в этом случае и конверсия в покупку будет выше, так как фокус внимания сосредоточен на чём-то одном.
Сайт — многостраничный и более функциональный, его структура включает страницы «О нас», «Контакты», «Каталог товаров»/«Услуги». На многостраничном сайте пользователь видит расширенную информацию о компании и продуктовой линейке.
Виды лендингов
В зависимости от цели создания лендингов выделяют пять типов, каждый из которых решает конкретные задачи.
1. Продающий
Самый распространённый вид лендинга. Его цель — прорекламировать или продать товар или услугу здесь и сейчас, прямо на странице. Например, украшения ручной работы, услуги грумера для животных или онлайн-курс.
Один из экранов лендинга онлайн-школы Литбэнд
2. Подписной
Цель такого лендинга — заполучить контакты посетителя: email или телефон — либо подписать на бот в социальных сетях или мессенджерах. В обмен на контакты предлагают какое-то преимущество или бонусы, например промокод на скидку.
Указав телефон и электронную почту, пользователь получает PDF-файл с персональным планом изучения языка
3. Информационный
Такая страница знакомит посетителя с основной услугой или товаром или подробно рассказывает об акции. Каждый блок сайта отвечает на часто задаваемые вопросы.
Сервис по подбору психолога онлайн: каждый блок закрывает частые возражения клиентов
4. Вирусный
Такой лендинг-пейдж вовлекает посетителей в игру. Часто в вирусных лендингах используют квизы. Это нативная реклама для продвижения бренда.
Вирусные лендинги часто запускают «Авиасейлс»: квизы подогревают интерес, их охотнее пересылают друзьям
5. Дифференциальный
Сочетают в себе несколько предыдущих типов. Такие лендинги часто используют интернет-магазины или крупные проекты, которые одновременно рекламируют товар и собирают контакты.
На лендинге — подробная информация о продукте и возможность получить скидку
Курс «Веб-дизайнер» построен так, чтобы студенты освоили профессию с нуля: научились работать с композицией, цветом, типографикой страниц и вёрсткой.
В чём преимущества лендинга
Дешёвая разработка
Основная стоимость любой разработки — это зарплаты веб-разработчиков. Благодаря конструкторам, лендинги можно собрать самостоятельно, не привлекая разработчиков, и стоимость производства снижается в разы.
Простота
Лендинг можно создать и запустить за считаные часы, не теряя огромное количество времени на проработку сложной архитектуры, вёрстку и сложный дизайн лендинга.
Высокая конверсия
Как правило, лендинги используются в рекламе. Из-за того, что они ориентированы на определённый сегмент аудитории, их конверсия часто превышает конверсию с основного сайта.
Лёгкое исправление ошибок
Например, если ошиблись в описании продукта, допустили какую-то неточность в цене, загрузили не то изображение. Всё можно быстро поправить самостоятельно, не потребуется составлять ТЗ или снова находить разработчиков.
Быстрая загрузка
Из-за того, что лендинги довольно небольшие по объёму, они быстро загружаются у пользователей даже с низкой скоростью интернета, на любом устройстве.
Возможность быстро собрать клиентскую базу
В дизайне лендинга можно предусмотреть форму обратной связи, чтобы потенциальные покупатели получали лид-магнит или прокомод на скидку.
Продвижение новых продуктов
Лендинги помогают сфокусировать внимание покупателей на новинках, когда продуктовая линейка широкая и каждый из продуктов рассчитан на конкретный сегмент целевой аудитории.
Как создать лендинг самостоятельно
В работе над лендингом выделяют несколько основных этапов:
1. Анализ конкурентов
Чтобы найти прямых и непрямых конкурентов, используют поиск по ключевым словам, блоги, сайты и соцсети. Данные о конкурентах стоит занести в таблицу.
Например, сервис подбора психологов и психотерапевтов создаёт лендинг с конкретной услугой: карьерные консультации «Как говорить с начальником о повышении». Так может выглядеть заполненная таблица по конкурентам:
Анализ конкурентов даёт понимание, какие элементы дизайна, структуры и текста лендинга убедят пользователя сделать выбор в пользу предложения или продукта.
Например, преимущества компании из третьего столбца — это та информация, которую стоит особенно выделить на лендинге.
2. Выбор аудитории
Лендинг всегда ориентирован на один из сегментов целевой аудитории и рассказывает о продукте для конкретных людей. Например, интернет-магазин продаёт коньки для фигурного катания. При запуске магазина в первую очередь стоит выбрать целевую аудиторию. Первая ЦА — профессиональные спортсмены. Вторая — родители, которые отправляют детей в школу фигурного катания.
Гипотетический запрос первой ЦА может быть следующим: спортсменам важно знать технические характеристики конька, жёсткость ботинка, длину лезвия и так далее. Для второй категории покупателей должен быть абсолютно другой лендинг: о том, как выбрать качественные коньки и при этом сэкономить, потому что дети быстро растут, и каждый сезон нужны коньки нового размера.
3. Создание структуры
Важный этап разработки лендинга. Чтобы лендинг получился продающим и конверсионным, он должен убеждать. В этом помогает структура, которая складывается из ключевых компонентов, или блоков.
Главный экран с понятным заголовком
Задача главного экрана — произвести впечатление на пользователя. Мотивировать пролистать лендинг и совершить целевое действие. Для этого на главном экране используют большие и качественные иллюстрации, гифки или видео — всё, что привлекает и удерживает внимание.
Заголовок помогает понять, какую проблему пользователя решает продукт, а краткий подзаголовок объясняет, как или за счёт чего это происходит.
Кнопка CTA (англ. Call To Action — «призыв к действию») располагается на главном экране, в начале страницы.
О продукте
В этом блоке даётся конкретное описание продукта или услуги, например всех онлайн-курсов, как всё устроено, кому подойдёт, сколько стоит. Прежде чем пользователь поймёт выгоду, примет решение и совершит целевое действие, надо объяснить, что конкретно предлагается.
Преимущества
В этом блоке показывают отличия от конкурентов: например, продукт дешевле, материалы качественнее, есть необычные опции. Приводят аргументы, чтобы до конца убедить пользователя в том, что эта покупка решит его проблему.
Блоки доверия
Это могут быть сертификаты, ссылки на партнёров проекта и, например, видеоотзывы. Когда своими впечатлениями о продукте делится близкий по социальному статусу или потребностям человек, это вызывает больше доверия.
Блоки целевого действия
На лендинге есть блоки, которые генерируют лиды, то есть потенциальных клиентов. Такой блог лендинга включает формы подписки, обратной связи или кнопку, которая ведёт на покупку или подписку. Пользователь совершает целевое действие: заполняет анкету, оставляет номер телефона, а значит, показывает, что заинтересован в услуге или продукте.
4. Сборка прототипа
На этом этапе разработки лендинга создается его прототип — это схема будущего сайта и наброски примерного дизайна, который решает две главные задачи:
● Помогает расположить содержимое сайта. Из макета понятно, где размещаются карточки товаров, отзывы, призывы к действию.
● Протестировать расположение элементов: удобно ли будет пользователям читать информацию в таком порядке, всё ли логично.
Первые наброски прототипа дизайнеры делают на бумаге, а потом переносят, например, в онлайн-сервис для разработки интерфейсов Figma. После того как прототип готов, можно переходить к дизайну.
5. Работа над дизайном лендинга
Для разработки дизайна лендинга важно понимать целевую аудиторию, на которую направлен одностраничник, и особенности бренда. При работе над дизайном нужно пройти три основных этапа:
1. Продумать структуру и внешний вид лендинга.
Для этого нужно сначала собрать референсы — найти 10–15 лендингов, которые нравятся, и понять, чем конкретно: сочетаниями шрифтов, цветовой гаммой, удобством для пользователей. После этого посмотреть столько же лендингов с неудачным визуальным решением и проанализировать их. Исследовать можно не только прямых конкурентов, но и смежные ниши.
2. Выбрать цвета и стиль.
Созвучные бренду образы можно собрать в мудборд — онлайн-доску с картинками.
3. Разработать визуальные элементы стиля.
Для этого нужно подобрать шрифты; графические элементы — линии, выноски, иконки; решить, будет ли использоваться логотип, детали фирменного стиля. Всю информацию собрать в презентацию.
6. Выбор конструктора
Для создания лендингов используют конструкторы. Самые популярные — WordPress, Tilda, Bitrix, Joomla. Чуть менее известные — Vigbo, Wix, LPgenerator, uKit.
Конструкторы работают по принципу drag-and-drop — возьми и перетащи, никакой сложной вёрстки не требуется. Элементы лендинга и блоки меняют местами прямо в редакторе. Собранный шаблон адаптируют для выбранного визуального стиля и структуры: меняют цвета, загружают тексты и картинки.
При выборе конструктора нужно проанализировать тарифы и коллекцию готовых блоков, чтобы понять, хватит ли их для выполнения задачи лендинга.
7. Регистрация домена
Чтобы лендинг появился в интернете, нужно подключить домен. Проверить, свободно ли выбранное доменное имя, можно в сервисе Whois.
Далее предоставляется выбор предложений.
После регистрации и оплаты нужно заполнить анкету с личной информацией, паспортными данными, почтой. Привязать домен к хостингу или поменять его можно в любой момент: для этого нужно изменить настройки домена в личном кабинете.
Совет эксперта
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
