Как сделать лендинг самому: с конверсией от 3% + 2 примера + пошаговая инструкция

В интернете много информации про то, как создать лендинг своими руками. Бытует мнение, что можно сделать за 30 минут/час и не платить десятки тысяч агентствам, экономя большие средства на разработке.

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

С критической точки зрения, если каждый может самостоятельно и РЕЗУЛЬТАТИВНО сделать лендинг, то резонно появляются вопросы:

  1. Почему до сих пор существуют агентства, которым платят десятки/сотни тысяч за реализацию такого простого инструмента?
  2. Почему большинство людей, сделавших лендинг на конструкторе, не достигли успеха?

Ответ прост — результат. Достигнуть его с профессиональными специалистами в несколько раз быстрее, чем в одиночку и без опыта.

Что подразумеваю под результатом? Готовый уникальный упакованный продукт, который генерирует обращения клиентов с конверсией от 3% за счёт проработки целевой аудитории, анализа компании и конкурентов.

Разработка Landing Page Создание Landing Page

А вот сравнительная таблица по ключевым параметрам уникального лендинг пейдж против одностраничника на конструкторе:

  Авторский LP На конструкторе
Сроки создания От 14 дней До 3-х дней
Абонентская плата Нет Есть
Ограничение блоков, функционала Нет Есть
Стоимость От 40 т.р.
за все время
От 7,2 т.р.
за год (~ 600 р./месяц)
Редактирование Ограничено Не ограничено
Хостинг и домен 2000 на год Входит в абонентку
или ~ 2000 на год
Дизайн Уникальный Шаблонный
Конверсия От 3% Как получится
CRM-система Нет В некоторых конструкторах да
A/B тестирование Нет Есть

2 способа создания: простой и сложный

Перед началом разработки напомню, какие функции выполняет лендинг:

  • Привлекает внимание и вызывает эмоции;
  • Доносит суть предложения и располагает к доверию;
  • Конвертирует в обращения.

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

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

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

Дизайн не главный показатель, но все же влияет на определённый % конверсии.

В условиях высокой конкуренции даже небольшие детали влияет на результат.

Немного про доверие. Увидя лендинг со стандартными блоками и содержимым, у меня появляется мысль: «сделали на коленке за день и продают за 250 000» (особенно актуально, что касается дорогих продуктов).

Понятно, что так рассуждают не все, а какая-то часть, но что-то мне подсказывает, что платёжеспособная аудитория отваливается именно здесь (уходит с сайта).

А работать придётся с теми, для которых главный фактор принятия решения — цена.

Хорошо ли это или плохо каждый решает сам, но зачем отказываться от людей, с которыми приятно общаться и готовых платить, ради экономии 40 000 - 80 000 не совсем понятно.

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

  1. Начинающий предприниматель, нет бюджета от слова совсем;
  2. Нет цели. Просто нужна страница, чтобы разместить основную информацию о компании: перечень услуг, портфолио, контактные данные, в общем типичная сайт-визитка;
  3. Протестировать новый продукт/нишу;
  4. Для краткосрочной рекламной акции;
  5. Низкая конкуренция в нише.

В других случаях разработку landing page лучше делегируй специалистам.

Из-за указанных выше причин разделил создание на 2 способа:

  • быстрый / самостоятельный / простой / ограниченный;
  • долгий / профессиональный / сложный / результативный.

Что нужно знать перед созданием?

Перед тем, как начать создание одностраничника необходимо выполнить предварительное исследование и ответить на вопросы: 

  1. Какая цель? Увеличить продажи, обращения, повысить доверие к продукту, узнаваемость к компании. Что должны делать пользователи посетившую страницу? Подписаться на рассылку, позвонить, получить коммерческое предложение, скачать каталог, сохранить чек-лист, оставить заявку, записаться на замер, заказать звонок.
  2. Следующие вопросы дадут ответ, кто твоя целевая аудитория:
    — Какие вопросы чаще всего задают?
    — Какой результат ожидают?
    — Чего опасаются при покупке, какие сомнения?
    — Почему отказываются от покупки?
    — Зачем людям твой продукт, какая основная потребность?
    — Какие проблемы решают?
    — Есть ли гарантии?
    — 3-5 критериев выбора продукта по твоему мнению;
  3. Чем отличается продукт и какую пользу несёт? Технические характеристики товара, порядок предоставления услуги.
  4. Кто конкуренты? В чем их слабые и сильные стороны? В чем я реально лучше них?

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

Если работаешь не первый месяц, то вспоминаешь часто задаваемые вопросы клиентов. Свяжись с ними и задай вопросы:

  • С какой проблемой человек обратился;
  • Почему обратился к тебе?
  • Почему не решил сам и никто не помог?
  • Что сыграло ключевую роль в решении?

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

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

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

Делаем лендинг для одного сегмента людей, а не для всех подряд.

Как сделать самостоятельно (лёгкий способ)

Будущий лендинг держится на четырёх китах:

  • Структура: блоки с заголовками текстами и призывами к действию;
  • Доверие: реальные фото: руководителя, сотрудников, процесса работ, проектов; отзывы, видео (+ 100 к карме);
  • Дизайн: не испорть, то что есть, согласно основным правилам и оставь приятное впечатление о себе;
  • Технический слой: адаптивность под мобильные устройства и быстрая скорость загрузки. 

Сформировать структуру поможет лестница Ханта. Суть в том, что человек перед принятием решения о покупке проходит 5 этапов:

  1. Нет проблемы;
  2. Осознание проблемы;
  3. Сравнение решений;
  4. Выбор продукта;
  5. Выбор поставщика.

Какое отношение лестница Ханта имеет к разработке структуры? В зависимости от канала трафика меняется уровень осознанности человека.

Контекстная реклама с транзакционными ключами: заказать, по ключ, цена, самая горячая аудитория и 5 этап принятия решения — поиск поставщиков.

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

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

Запуская таргетированную рекламу работаем с 1-2 этапами, а значит схема содержание блоков другая и аудитория более холодная.

В таргете видим интересы, но не потребности людей и направляем рекламу на аудиторию с 1 по 5 уровень.

Конверсия из-за этого значительно ниже, чем с контекста.

Поэтому для быстрого старта и результата возьмём 4-5 этап по лестнице Ханта, чтобы работать с горячей аудиторией через запуск контекстной рекламы в Яндекс Директ и Google Реклама.

2 этап
Осознание проблемы
3 этап
Сравнение решений
4 и 5 этап
Выбор продукта и поставщика
УТП УТП УТП
Проблемы/боли или возможность Раскрытие УТП или что делает компания? Выгоды продукта
Выгоды от продукта Блок про доверие Выгоды компании
Выгоды компании Выгоды продукта Блок про двоерие
Отзывы, гарантии и акции Отзывы, гарантии и акции Отзывы, гарантии и акции

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

Структура зависит и от продвигаемого продукта.

Для простого и дёшевого продукта (щебень оптом, вывоз мусора) достаточно 5-6 блоков.

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

Что ещё нужно знать про структуру? Это кто целевая аудитория.

Премиум дизайн, большое количество выгод, гарантий оттолкнёт в эконом-сегменте.

Простой дизайн и стандартная схема блоков: наши преимущества, наши работы, как мы работаем не сработает с премиум аудиторией.

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

Начнём с первого экрана, состоящего из: 

  1. Главного заголовка или оффера.
  2. Подзаголовка;
  3. Буллетов, они же преимущества;
  4. Призыва к действию, формы;
  5. Фона или картинки отображающую процесс оказания услуги или результат; 
  6. Логотип;
  7. Дискриптор, понятное описание деятельности; 
  8. Меню с основными важными разделами для пользователя; 
  9. Способов связи: номер телефона, мессенджеры для связи, для офлайн бизнеса добавляем адрес, для b2b почту. 
Первый экран лендинга

Первый экран конверсионного лендинга

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

Используй формулы: 

  • Ключевое слово (КС) ниши + выгода + выгода.
    Срочный ремонт iPhone при вас за 30 минут с гарантией 6 месяцев;
  • Полезность + уникальность + ультра-специфичность + срочность (4U).
    Законно спишем долги без потери имущества через процедуру банкротства за 6 месяцев с гарантией;
  • С вопросом: как, хотите, почему?
    Как списать долги без потери имущества за 6 месяцев?
    Хотите получить бесплатный дизайн-проект? 

Подзаговок раскрывает или дополняет оффер. В нём пишем дополнительное преимущество предложения или усиливаем боль потенциального клиента.  

Буллеты усиливают предложение. Что писать в буллетах:

  • Дополнительные преимущества, которые не вошли в оффер;
  • Выгоды от покупки;
  • Важные свойства и характеристики продукта;
  • Факты о продукте/компании.

Избегаем водности и неподтвержденных фактов: лидер рынка, низкие цены, квалифицированные профессионалы, лучшее качество.

Про кнопки и cta подробно написал в этой статье

Для некоторых ниш достаточно одного экрана, там где:

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

Одноэкранник по продаже десертов оптом — dessertbro.ru

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

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

Выписывав всевозможные варианты, раскидывай их по лендингу: крупные и объёмные вопросы (часто задаваемые) выносишь в отдельный блок, где подробно раскрываешь. 

Менее значимые добавляй в буллеты второстепенных блоков или в блок вопросов. 

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

Теперь подберём платформу и начнем сборку.  

  Пробный период руб./месяц
Creatium 14 дней От 600
Flexbe 14 дней От 750
ulanding (uKit) 7 дней От 640
Mottor (LPgenerator) 7 дней От 466
Tilda 14 дней От 750
Платформа LP 14 дней От 490
Wix 14 дней От 150

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

В таблице тарифы, с необходимый функционалом для нормальной работы.

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

Пример №1: пластиковые окна

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

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

Редактор Creatium

Первый экран:

  1. Шапка (лого, дискриптор, адрес, номер телефона, кнопка для заказа звонка);
  2. Изображение. В примере фото окна, лучше сделать фото мастера в спецодежде с логотипом компании, который устанавливает окно;
  3. Оффер по формуле КС + выгода + выгода: Пластиковые окна от производителя с гарантией 10 лет. Можно лучше, нужно докручивать;
  4. Подзаголовок: Установим за 1 день под ключ без наценок посредников с фиксированной смете в договоре;
  5. CTA-кнопка. В замерных нишах, где точной цены нет, используем целевое действие на расчёт стоимости.
Первый экран

Второй экран: 3-4 преимущества компании в приоритетном порядке.

Второй экран

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

Первая открытая форма

Третий блок: 3-4 преимущества продукта.

Третий экран

Четвертый блок о продукции, варианты покупки.

Четвертый экран

Кто не готов рассчитать проект предложим альтернативу — беспроцентную рассрочку на 6 месяцев.

Вторая открытая форма

Далее блок про доверие — выполненные проекты. Если в проект добавить 5-7 фото: снаружи/внутри объекта; со специалистами, устанавливающими окна, то ты подтверждаешь, что фотки не сворованные с интернета и компания реально существует.

А ещё прикрепи видеоотзыв на фоне выполненной работы и это неминуемо приведёт к поиску кнопки заказать.

Пятый экран

6 экран: дополнительные преимущества продукта + гарантия.

Шестой экран

Что-то давно не было форм. Дополним про расчет в других компаниях.

Третья открытая форма

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

Седьмой экран

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

Восьмой экран

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

Я не стал здесь шиковать и указал скидку 14% в день замера в случае подписания договора.

Девятый экран

Важно:

  1. Придумывай запоминающиеся заголовки, которые раскрывают твои преимущества;
  2. Несколько призывов к действию. Не втыкай кнопку расчёта в каждый блок, а продумай все варианты, что можешь предложить. На разный призыв найдётся свой покупатель;
  3. Текст ёмкий и несущий ценность, без воды. Не грузи терминами, а пиши на языке, понятном своей аудитории. Не больше 3-4 строк текста. С помощью иконок и картинок лучше воспринимается текст;
  4. Используй 1-2 шрифта. Делай правильные отступы, чтобы легче сканировать информацию;
  5. Собственные фото обязательно. Не копируй, как в моём примере выше. Качественное фото повысит доверие, а следовательно и конверсию. Один раз потрать пару тысяч на фотографа.

Пример: как создать лендинг самостоятельно

Пример №2: алмазная резка

Делаем одноэкранник с квиз-опросом на конструкторе Flexbe.

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

Лендинг на Flexbe

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

Квиз-лендинг на Flexbe

Благодаря второму вопросу понимаем срочность оказания услуги. График прогресса показывает, сколько вопросов осталось до получения результата.

Квиз-опрос на Flexbe

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

Квиз-опрос на Flexbe

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

Получение контактов в Flexbe

Важно:

  1. Обязательно пиши, что получит человек после прохождения опроса. Что можешь дать пользователю, что несёт ценность для него: подарок, скидка, подборка, чек-лист, инструкция; 
  2. При взятие контактов используй одно поле (номер телефона). Всё остальное можно узнать по телефону. Чем больше полей, тем меньше конверсия;
  3. Вопросы легкочитаемы и понятны широкой аудитории. Не вводят в ступор при ответе;
  4. Достаточно 3-5 вопросов, больше не нужно.

Создание лендинга под ключ: 13 этапов (правильный подход)

Самое важное в создании лендинга это его продающая структура. 

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

А вот в обратную сторону это работает, проработанные заголовки, тест и призывы к действию даже при посредственном дизайне дадут неплохую конверсию. 

Посредственный дизайн как у всех сойдёт на начальном этапе, но это не значит, что он неаккуратный, броский и отталкивающий. 

Ошибка 90% предпринимателей, фрилансеров или агентств начинать разработку без маркетинговой проработки.

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

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

Да бывает, что когда все сделано идеально с твоей точки зрения, лендинг не приносит отдачи. 

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

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

Как устроен процесс разработки в нашей студии:

1. Заполнение брифа на разработку

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

У нас процесс построен по-другому: созвон проходит в виде интервью и с помощью уточняющих вопросов раскрываются преимущества понятным языком. 

Уникальные технологии это какие? Шоковая заморозка, снижение температуры с +5° до −18° для длительного хранения продуктов.

После заполнения брифа переходим к маркетинговому анализу.

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

  1. Экономия бюджета на правки. Без исследовательской работы в 99% придется переделывать лендинг после получения первых результатов;
  2. Высокая конкуренция;
  3. Дорогая реклама.

2. Анализ компании

Задача изнутри изучить компанию, получить экспертизу в нише клиента, выявить детали, которые представят компанию №1 в глазах покупателей в интернете.

На основе ответов (более 50 вопросов на интервью): 

  • Составляется уникальное торговое предложение (УТП);
  • Формируются преимущества компании, основанные на фактах;
  • Создается продающая структура и пишется цепляющий текст.

Основные категории вопросов из анализа:

  1. Информация о компании;
  2. Информация о продукте;
  3. Клиент, опыт и портфолио;
  4. Сервис и условия;
  5. Команда и специалисты;
  6. Детали;
  7. Личность руководителя;

Если у компании есть лендинги, то запрашиваем доступ к Яндекс Метрике и Гугл Аналитике.

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

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

3. Исследование целевой аудитории

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

На вопрос кто твоя ЦА, собственник отвечает: девушки/женщины от 20 до 55 лет со средним доходом и выше из города-миллионника.

Это размытая информация и ничего полезного не несёт.

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

1 Landing Page - 1 Персонаж

Определяем основного персонажа, тот кто совершает покупки/приносит 80% прибыли.

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

Изучаем сайты отзовики, тематические форумы, соцсети и поисковые запросы в Яндекс Вордстат.

Вбиваем ключевое слово + форум и читаем проблемы людей. Берём формулировки и внедряем на лендинг. Таким образом говорим на одном языке со своей аудиторией.

Поищем дополнительные варианты, вбиваем в Яндекс Вордстат нишу и добавляем слова: +как, +что, +какой.

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

Критерии выбора, на что будет смотреть при выборе подрядчика (скорость, надёжность, доставка).

Потребности, зачем вдруг понадобилось?

Возражение и сомнения, что может помешать купить?

  • Плохой сайт, я не доверяю;
  • Нет бесплатной доставки и гарантий возврата;
  • А если это не принесёт результата?

В результате, знаем:

  1. Кому продаём;
  2. Что нужно отобразить на LP;
  3. Даём только то, что нужно;
  4. Попадаем в одну целевую аудиторию (платёжеспособную), увеличивая шансы на сделку. 

4. Анализ конкурентов

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

Выписываем офферы, выгоды, цены, продуктовую линейку, акции, уникальные блоки, фишки в таблицу по 10-15 конкурентам. Всё, что кажется привлекательным на твой взгляд для ЦА.

Как составить сравнительную таблицу? Критерии сравнения берём из анализа ЦА, а конкретнее из факторов принятия решения (качество, гарантии, срок реализации).

Оцениваем лендинг, как пользователь:

  • Оффер, заголовки, читабельный текст, призывы к действию, первый шаг для контакта;
  • Приятный и аккуратный дизайн;
  • Блоки доверия (отзывы, фото, команда);
  • Удобство пользования (юзабилити);
  • Скорость загрузки;
  • Адаптивность под разные устройства;

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

Анализ конкурентов

Анализ конкурентов

5. Продающая структура

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

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

Идеальной структуры не существует. Наличие блоков, элементов и их правильная последовательность будет разной в каждой новой ситуации и зависят от:

  1. Ниши;
  2. Продукта;
  3. Конкуренции;
  4. Целевой аудитории;
  5. Ситуации на рынке;
  6. Цикла сделки;
  7. Теплоты трафика;
  8. Канала трафика;
  9. Поставленной цели.

Что делает пользователь при переходе на сайт?

Сканирует страницу, не вчитываясь в контент, обращая внимание при прокрутке на крупные элементы — заголовки 2 уровня (заголовок 1 уровня на первом экране). Поэтому нужно зацепить внимание заголовком, попасть в критерии/потребности, чтобы после прочтения заголовка захотелось изучить блок со всем контентом.

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

6. Копирайтинг

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

Текст говорит на одном языке с клиентами и связан с их психологией покупки и выбора. Без воды, просто и понятно. Информационным стилем с фактами и цифрами.

7. Прототип

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

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

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

Большая часть конверсии зарыта на этом этапе.

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

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

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

8. Дизайн

Задачи продающего веб-дизайна:

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

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

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

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

Подбираем референсы работ. Дизайнер отрисовывает первый экран в графических программах Photoshop или Figma. В случае полного непопадания с ожиданиями заказчика переделывает. После согласования воспроизводится дизайн всего макета.

Лендинг в фотошопе

Дизайн лендинга в фотошопе

9. Вёрстка

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

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

К примеру, в конструкторах или cms-системах типа Wordpress подключены дополнительные библиотеки скриптов, которые на лендинге не используются, но загружаются для полного функционала применимого в будущем.

Вёрстка чистым кодом это:

  • Скорость загрузки 3-5 секунд;
  • Адаптивность под все устройства: смартфоны, планшеты, пк;
  • Кроссбраузерность. Лендинг одинаково отображается в разных браузерах: Яндекс, Google Chrome, Mozilla Firefox, Safari, Opera;
  • Кроссплатформенность. Верстка одинакова на iOS, Android и т.д.; 
  • Валидность, правильное написание кода без ошибок.

Готова продающая структура и wow-дизайн, казалось бы идеальный проект, который порвёт рынок. Но долгая загрузка, кривое отображение на устройствах или некорректный вид в браузерах, неработающие формы заявок и кнопки приблизят конверсию к 0.

Вёрстка лендинг пейдж

Вёрстка лендинга

10. Тестирование 

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

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

11. Базовая SEO-оптимизация 

Подключаем ssl-сертификат, чтобы соединение было по защищенному протоколу https.

Прописываем метаданные: h1, title, description. Добавляем файлы robots и sitemap.

Склейка зеркал, чтобы страница была доступна по одному адресу. 

Регистрация в Яндекс Вебмастер и в Google Search Console.

Подробнее о том, как продвигать одностраничник и рационально ли это, написал в лонгриде: SEO продвижение лендинга: 9 шагов оптимизации

12. Установка аналитики и настройка целей

Яндекс Метрика и Google Аналитика помогут проанализировать поведение пользователей. 

Настройка целей позволит отследить конкрентные действия посетителей и понять конверсию landing page. 

13. Работы по увеличению конверсии

Если заказываешь лендинг + трафик у нас: месяц бесплатно работаем над увеличением конверсии.

Что входит в работу: 

  1. A/B тестирование заголовков, подзаголовков, призывов к действию;
  2. На основе веб-аналитики изменяем содержимое страницы под потребности посетителей (ротация последовательности блоков, улучшение usability);
  3. Создание квиз-опроса;
  4. Внедрение фишек, повышающих конверсию.

Коротко о главном

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

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

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

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

Ну а дальше дело техники. На примере 2 конструкторов: Creatium и Flexbe подбираем готовые блоки и переносим в них текстовую информацию. 

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

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

Понравилась статья? Сохраняй в закладки нажатием клавиш: Ctrl + D