Найти тему
Convert Monster Blog

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

Оглавление

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

Как сделать лендинг самостоятельно?

Landing page, или посадочная страница — это сайт-одностраничник, цель которого – конвертировать наибольшее число посетителей страницы в целевые заявки.

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

Шаг 1. Восполняем пробелы в знаниях

Стоит начать с изучения основ в бесплатных источниках. К ним относятся:

  • блоги и Youtube-каналы digital агентств и школ онлайн-маркетинга. Рекомендуем начать с 3-дневного бесплатного доступа к самым востребованным курсам Convert Monster по интернет-маркетингу;
  • блоги и Youtube-каналы онлайн-сервисов для маркетологов (например, сервисов-конструкторов лендингов). Лично мне нравится справка и блог Tilda;
  • специализированные цифровые СМИ: vc.ru, cossa, likeni и др.;
  • бесплатные обучающие курсы от крупных диджитал компаний и сервисов – писали о них в нашем Дзен-канале тут и тут;

Шаг 2. Исследовательская часть

По опыту разработки сайтов в агентстве Convert Monster, на этап исследования стоит отводить до 80% времени работы над проектом, так вы сможете избежать ошибок и обилия правок на следующих этапах.

К исследовательской работе мы относим изучение накопленной статистики по проекту (если у вас уже есть сайт и вы вели на него трафик), либо поиск информации в открытых источниках (веб-сервисы и их статистика, блоги, форумы, СМИ и др.).

Какая информация нам понадобится в первую очередь:

  • данные о продукте или услуге (что вы продаете?);
  • данные о целевой аудитории (кому вы продаете?);
  • данные о состоянии рынка (где вы продаете?);
  • данные о конкурентах (кто еще продает то же самое?);
  • расчет рентабельности (сколько заработаем на продукте?); Здесь пригодится сервис Прогноз бюджета от Яндекс.Директ и калькулятор unit-экономики;

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

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

Шаг 3. Структура страницы

Если карта персонажей была составлена корректно, то в ней будет следующая информация о вашей целевой аудитории:

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

В каждом из этих пунктов (кроме первого) пользователь формулирует вопрос. Например, цель покупки новой модели мясорубки – быть идеальной хозяйкой (вопрос «Я буду идеальной хозяйкой?»), а один из ключевых факторов принятия решения – цена (вопрос «Сколько стоит мясорубка?»). Дальше ваша задача с помощью свойство продукта ответить на эти вопросы, прописав выгоды от покупки. Их может быть несколько. Посмотрите, как это сделано в примере:

  • фактор принятия решения – цена;
  • выгоды – цена 3500 рублей, ниже, чем у конкурентов;
  • подтверждение на лендинге – блок-каталог с ценами;

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

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

Шаг 4. Создание прототипа

-2

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

Об этом этапе мы писали отдельную статью о прототипах (там не только текст, но и видеоурок по работе в сервисе создания прототипов Balsamiq) – внимательно ознакомьтесь с ней.

Шаг 5. Копирайтинг

Об этом мы подробно писали в подробном руководстве по копирайтингу сайтов.

Хотелось бы добавить лишь пару слов – научиться писать за 1 присест нельзя, но можно сделать свои тексты сильно лучше, используя протестированные шаблоны. Мы собрали самые важные из них:

Как писать заголовки

Как оформить CTA

Как оформить отзывы

Как оформить кейсы

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

Шаг 6. Прокачиваем насмотренность

Смотрим базы и подборки лендингов, прокачивая насмотренность. Здесь нам помогут подборки лендингов и их разборе в формате статей, либо специализированные сайты типа https://www.awwwards.com/.

-3

Сюда участники сообщества выкладывают свои лучшие работы, так что это одно из лучших мест, где можно отслеживать тренды и черпать идеи по дизайну лендингов. Изучите также специальные сайты с шаблонами лендингов, где вы можете найти примеры: themeforest, free-landingpage, или лендинги из коллекции «Сделано на Tilda».

Задание прямо сейчас: изучить 5 подборок лендингов по вашей тематике и выписать как минимум 10 идей в Google-таблицу.

Шаг 7. Сбор лендинга в конструкторе

Мы намеренно пропустили такие этапы как дизайн и верстка, чаще всего маркетологи делегируют их профессионалам. Создание дизайн макета и HTML верстка требуют отдельных навыков, которые не освоишь за 1 день. Для создания дизайна нужно как минимум хорошо владеть Photoshop или Figma, а для верстальщика просто необходимо знание HTML+css+jquery (и это только обязательный минимум!). Но даже начинающему маркетологу вполне под силам заменить верстку конструктором, а разработку дизайна – готовыми шаблонами.

Поэтому регистрируемся в сервисе по созданию лендингов на конструкторе и используем по максимуму триальный (бесплатный) период. Есть несколько подобных сервисов: Tilda, LPgenerator, WIX и аналоги.

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

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

  • настройка сбора заявок на почту, в гугл-таблицу или в CRM;
  • настройка аналитики (Яндекс.Метрика и Google Analytics);
  • настройка мета-данных для SEO;

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

После того, как вы убедитесь, что ваш лендинг стал доступен в Интернете, стоит протестировать корректность работы его элементов:

  • проверить отображения во всех популярных браузерах и устройствах;
  • оставить тестовые заявки во всех формах захвата;
  • проверить, приходят ли заявку в вашу CRM и отображаются ли они в Метрике;