Следите за новыми проектами и интересными анонсами студии в нашем tg-канале
Перейти →

Что такое лендинг, его виды, когда и зачем использовать

Услуги
Портфолио
Стоимость
Бриф
komarovaeeee@gmail.com
+7 918 23 43 005
Блог
Отзывы
Вакансии
Контакты
Заказать сайт →
01 03 2024. Время чтения — 15 мин
Я Екатерина Комарова, UX/UI-дизайнер и эксперт сообщества Tilda Publishing. В моем активе 3 года коммерческой разработки сайтов и 25+ проектов в топ-подборках Тильды. Этот материал — часть целого блога, где вы найдете другие полезные статьи и кейсы по веб-дизайну. Продолжая читать, вы соглашаетесь прокачивать свою насмотренность :)
Tilda experts
Telegram
Whatsapp
Instagram*
Tg-канал
Прототип лендинга
Главная — Блог — Лендинг: подробная статья
Команда Екатерины Комаровой — UX/UI дизайнера,
эксперта Tilda Publishing
@komarovaeee
Лендинг на Тильде
Многостраничный сайт на Тильде
Интернет-магазин на Тильде
Дизайн на Тильде
Сайт-каталог
Аудит сайта
Услуги
@komarovaeee
Команда Екатерины Комаровой — UX/UI дизайнера,
эксперта Tilda Publishing
Лендинг — это веб-страница, которая убеждает пользователя совершить какой-то шаг: большой или не очень. Например, зарегистрироваться на вебинар, записаться на просмотр квартиры или оформить подписку на сервис. Суть в том, чтобы замотивировать пользователя с первых секунд: тогда он выполнит целевое действие и станет лидом.
Лендинг не всегда обособлен, может быть частью уже существующего сайта. Это частая практика, когда нужно протестировать новый продукт, но только на узкой аудитории.

Навигация по статье:

Какие виды лендингов популярны?

Классификаций много, но все они похожи. Можно выделить 6 основных типов лендинга по цели.
1
Продуктовый
Задача. Раскрывает товар со всех сторон и призывает к покупке.

Примеры. Квартира в новостройке, курс по JavaScript, умный пылесос.

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

Примеры. Клининговая компания, банкротство физлиц, лицензирование МЧС.

Особенности. Такой лендинг подходит для разовых услуг. Как и лендинг о продукте, включает в себя отзывы, фотографии, а также портфолио или блок с командой.
3
Под рассылку
Задача. Привлекает подписчиков в email-базу или рассылку в соцсетях.

Примеры. Бесплатный email-курс, дайджест новостей, регистрация на вебинар с лид-магнитом.

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

Примеры. Крупные компании с партнерами, автоконцерны

Особенности. Такой лендинг не стремится продать здесь и сейчас, призыв к действию скрытый или вовсе отсутствует
5
Визитка
Задача. Рассказывает посетителю о владельце продукта или исполнителе.

Примеры. Портфолио фрилансера или мастера.

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

Примеры. Крупные компании с партнерами, автоконцерны

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

Чем лендинг отличается от сайта?

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

Дизайн лендинга на вебинаре от арт-директора и сео команды komarovaee Екатерины Комаровой

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

На вебинаре Екатериной были разобраны:

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

Преимущества лендинга

В пользу лендинга играют 3 фактора:
1
Рост конверсии
В среднем конверсия посадочных страниц лендинга выше, чем у традиционных сайтов. Это значит, что на лендингах цель достигается чаще.
2
Легкий старт
Не обязательно придумывать крутой дизайн лендинга, строить многоуровневую архитектуру как для сайта. В той же Тильде достаточно загрузить шаблон и отредактировать под себя. На это уйдет 2-3 часа, даже если у вас нет опыта.
3
Понятное управление.
Можно создать сколь угодно страниц и по каждой вести статистику. Для этого подойдут инструменты вроде Яндекс.Метрики и Google Analytics. Они фиксируют поведение пользователей лендинга и показывают, что лучше поправить.
№ 1

Какая структура лендинга правильная?

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

Главный экран лендинга или обложка.

Первый экран — первое впечатление о продукте. Здесь не стоит писать много. У вас всего 5-6 секунд, чтобы посетитель стал читателем. Если его встретит простыня текста, он уйдет почти сразу.

Действуйте правильно:

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

Иногда на главный экран лендинга вешают таймер или лид-магнит, чтобы усилить предложение. Таймер оправдан, если он настоящий, а не восстанавливается при обновлении страницы лендинга. Лид-магнит уместен, если он несет реальную пользу, а не то, что и так легко гуглится.
№ 2
информация о услуге или товаре
Информация о продукте

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

  • О продукте или услуге. Объясняем суть и мягко внушаем пользователю: это то, что тебе нужно.
  • Для кого продукт. Предлагаем пользователю распознать себя среди разных сегментов аудитории. Людям нравится, когда решение заточено под их проблемы.
  • Медиа. Добавляем фото и видео, чтобы посетитель не остался без эмоций. В некоторых сферах без визуала совсем никак. Например, в бьюти.
Рассказ о продукте завершен, переходим дальше.
№ 3
этапы на лендинге
Польза для клиента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Через поисковик.

Введите название своего продукта или услуги и посмотрите поисковую выдачу. Выберите и перенесите в блокнот 5-10 страниц, где предлагается продукт как у вас.


  • Через соцсети.

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


  • Через сервис подбора слов.

Google и Яндекс отдают приоритет рекламным объявлениям в поисковой выдаче. Эти объявления создают контекстологи — специалисты, которые собирают ключевые слова и настраивают контекстную рекламу для сайтов. Вы тоже можете подобрать популярные фразы, которые вводят пользователи, когда ищут ваш продукт. Для этого используйте бесплатный сервис Yandex Wordstat.


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

  • название конкурента;
  • достоинства;
  • недостатки;
  • цена продукта;
  • сайт;
  • соцсети;
  • лид-магнит (бесплатная услуга или материал);

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

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

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

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

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

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

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


Метод персон

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

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

Пример персоны:

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

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



Метод JTBD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Принципы дизайна лендинга

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

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

  • Текст и изображение не должны заметно перекрывать друг друга.
  • Здорово, если на фотографии преобладает один цвет и ничего не пестрит.
  • Картинки с крупными объектами в приоритете.
  • Масштаб мелких деталей нужно изменить, если по размеру они сравнимы с буквами.

Меню

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

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

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

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


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

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

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

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

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

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

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

  • Наличие отступов. Секции не должны слипаться, это мешает нормальному восприятию страницы.
  • Чередование фонов. Чтобы страница не выглядела как простыня, каждой секции нужно придать оттенок. Секцию с призывом к действию стоит закрасить другим цветом.
  • Разделители. Переход к следующей секции можно задать с помощью линейной или кривой границы. Желательно не смешивать разные разделители.
  • Заголовки. Они должны быть одного размера, чтобы все секции были равноправными по смыслу.
  • Цвета заголовков. Новичку сложнее подобрать цвет, не нарушив стиль страницы. Поэтому заголовки лучше не раскрашивать. Если же решились, то для всех заголовков нужно использовать один цвет.
  • Текстовые колонки. Секции с колонками следует чередовать. Посетитель не сможет сосредоточиться, если перед ним целый Пантеон.


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

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

  • Акцент на размер. Чем крупнее объект, тем важнее. Самый очевидный пример — заголовки и подзаголовки.
  • Акцент на дистанцию. Элементы, которые зависят друг от друга по смыслу, должны находиться рядом. Расстояние между дочерними объектами меньше, чем между родительскими. Допустим, текстовые колонки ближе друг к другу, чем секции.
  • Акцент на цвет. Когда мы хотим что-то выделить, можно использовать контраст. Например, синяя кнопка будет хорошо заметна на фоне белой секции
  • Акцент на летучесть. Если вокруг элемента много пустого места, значит, он особенный. Вообще на странице лучше сохранять чистое пространство: люди любят, когда ответы не нужно высматривать.
пример блока о компании Доставикс
Палитра

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

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


Шрифт

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


Медиа

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

  • Школа кондитерства: фото преподавателя с огромным тортом.
  • AI-сервис: видео генерации текста или картинки.
  • Вебинар: портрет спикера.
  • Приложение: иллюстрация интерфейса и кнопок.
  • Игра: видео с интересными игровыми механиками.
Чтобы люди доверяли вам, используйте собственные фотографии, а от фотостоков откажитесь. Там тоже встречаются годные картинки, но они все равно считываются по примитивным ассоциациям.

Как определить конверсию лендинга

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

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

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

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

  • структура лендинга;
  • призыв к действию;
  • дизайн;
  • текст;
  • качество трафика (посетители с рекламы).

Сколько стоит лендинг: правила ценообразования

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Нажимая на кнопку «Оставить заявку», вы соглашаетесь с положениями Политики конфиденциальности

Где заказать лендинг?

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

У фрилансера

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

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


У агентства

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

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

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

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

Примеры лендингов: как могут выглядеть

Сейчас я покажу 5 лендингов из моего портфолио. Разумеется, с пояснениями.
№ 1
главный экран лендинга Доставикс
Лендинг для сервиса по⦁автоматизации доставки еды Dostavix

Срок разработки: 20 рабочих дней
Ссылка: https://dostavix.com/

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

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

  • преимущества;
  • сегментация (для кого);
  • снова преимущества;
  • промо-видео + призыв к действию;
  • как все работает;
  • достижения сервиса;
  • призыв к действию;
  • команда проекта;
  • форма заявки на партнерство.
№ 2
Лендинг для курса Илеза Курскиева «JavaScript-программист с нуля до Junior»

Срок разработки: 15 рабочих дней
Ссылка: https://gurufy-dev.tilda.ws/

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

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

  • главный экран;
  • ситуация на IT-рынке;
  • о курсе: что получите, чему научитесь;
  • динамика зарплат разработчиков;
  • авторы курса;
  • как начать обучение;
  • вопросы и ответы;
  • призыв к действию.
№ 3
Лендинг под серию мероприятий Московского института психоанализа

Срок разработки: 15 рабочих дней
Ссылка: https://bbl.inpsycho.ru/

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


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

  • главный экран;
  • о лектории;
  • темы для обсуждения;
  • для кого;
  • спикеры;
  • программа;
  • об институте;
  • направления обучения;
  • партнеры и контакты.
№ 4
Лендинг для коллектива импровизаторов «Дыммашина»

Срок разработки: 20 рабочих дней
Ссылка: https://smokemachinecrew.ru/

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

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

Срок разработки: 15 рабочих дней
Ссылка: https://teafunny.space/

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

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

Лендинг простыми словами

Здесь разберем базовые правила UI (user interface), которые помогут вам создать первый лендинг без шаблонов.
1
Лендинг — отдельная или привязанная к сайту веб-страница, которая мотивирует посетителей к целевому действию. Применяется и в малом, и в крупном бизнесе.
2
Лендинг запускается на узкую аудиторию, но может обращаться к разным сегментам в блоке «Для кого».
3
Лендинг участвует в воронке продаж и выполняет следующие задачи: прямая продажа, сбор контактов, проверка маркетинговой гипотезы.
4
Лендинг преследует только одну цель, имеет четкую структуру без отступлений.
5
Достоинства лендинга: легкий старт, понятное управление, рост конверсии.

Частые вопросы

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