Как долго создаются качественные лендинги?

В среднем 10-15 дней, иногда дольше.

Какая конверсия должна быть у лендинга?

Идеальной цифры нет, для большинства лендингов нормой считается 3-5%.

Кто должен оплачивать хостинг и конструктор: я или дизайнер?

Заказчик компенсирует расходы на тарифы и необходимые исходники. Когда дизайнер уйдет, все это останется с вами.

Почему у лендинга высокий процент отказов?

Два варианта: либо главный экран неудачный, либо на лендинг попадает не ваша аудитория.

Нужна ли анимация на лендингах?

Если хотите впечатлить посетителей, почему бы и нет. Анимацию совершенно точно не нужно делать в ущерб производительности. 20-30% анимированных элементов — оптимально.

Почему одностраничные сайты уступают обычным в SEO?

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

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

komarovaeeee@gmail.com

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

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

Tilda experts

Instagram*

Tg-канал

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

Команда Екатерины Комаровой — UX/UI дизайнера,

эксперта Tilda Publishing

@komarovaeee

Лендинг на Тильде

Многостраничный сайт на Тильде

Интернет-магазин на Тильде

Команда Екатерины Комаровой — UX/UI дизайнера,

эксперта Tilda Publishing

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

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

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

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

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

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

Этапы создания лендинга

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

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

Примеры лендингов

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

FAQ

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

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

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

Продуктовый

Задача. Раскрывает товар со всех сторон и призывает к покупке.

Имиджевый

Под услуги

Под рассылку

Визитка

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

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

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

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

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

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

Задача. Привлекает подписчиков в email-базу или рассылку в соцсетях.

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

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

Задача. Повышает узнаваемость бренда, знакомит с новым продуктом.

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

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

Задача. Рассказывает посетителю о владельце продукта или исполнителе.

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

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

Задача. Повышает узнаваемость бренда, знакомит с новым продуктом.

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

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

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

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

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

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

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

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

(1)

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

(2)

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

(3)

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

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

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

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

№ 1

Главный экран или обложка

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

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

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

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

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

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

№ 2

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

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

О продукте или услуге. Объясняем суть и мягко внушаем пользователю: это то, что тебе нужно.

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

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

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

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

№ 3

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

Выгоды продукта можно подавать по-разному:

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

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

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

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

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

№ 4

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

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

№ 5

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

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

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

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

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

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

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

№ 6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

недостатки;

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

сайт;

соцсети;

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

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

Допустим, у вас интернет-магазин тортов. Сюда приходят самые разные люди: кто-то угощает коллег, кто-то ищет сыну на день рождения, а кто-то заказывает на адрес любимого человека. Мы перечислили всего 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. В редких случаях палитру придется расширять. Например, для сайта детских праздников, чтобы создать атмосферу веселья.

Палитра

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

Медиа

Школа кондитерства: фото преподавателя с огромным тортом.

AI-сервис: видео генерации текста или картинки.

Вебинар: портрет спикера.

Приложение: иллюстрация интерфейса и кнопок.

Игра: видео с интересными игровыми механиками.

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

Шрифт

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

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

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

Лиды — те, кто совершил целевое действие. Допустим, страницу застройщика посетило 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 кнопки с призывом к действию. Меню фиксированное, не исчезает при скролле.

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

Ссылка: https://dostavix.com/

преимущества;

сегментация (для кого);

снова преимущества;

промо-видео + призыв к действию;

как все работает;

достижения сервиса;

призыв к действию;

команда проекта;

форма заявки на партнерство.

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

№ 2

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

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

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

Ссылка: https://gurufy-dev.tilda.ws/

главный экран;

ситуация на IT-рынке;

о курсе: что получите, чему научитесь;

динамика зарплат разработчиков;

авторы курса;

как начать обучение;

вопросы и ответы;

призыв к действию.

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

№ 3

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

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

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

Ссылка: https://bbl.inpsycho.ru/

главный экран;

о лектории;

темы для обсуждения;

для кого;

спикеры;

программа;

об институте;

направления обучения;

партнеры и контакты.

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

№ 4

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

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

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

Ссылка: https://smokemachinecrew.ru/

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

№ 5

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

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

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

Ссылка: https://teafunny.space/

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

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

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

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

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

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

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

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

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