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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Начинающий предприниматель, нет бюджета от слова совсем;
2. Нет цели. Просто нужна страница, чтобы разместить основную информацию о компании: перечень услуг, портфолио/галерея, faq, контактные данные, подвал, в общем типичная сайт-визитка;
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 Реклама.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К примеру, для привязки домена в каких-то приложениях придётся перейти на платный тариф. 

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

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

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

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

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

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

Визуальный редактор внутри выглядит вот так:

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

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

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.

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

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

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

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

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

Важно:

1. Обязательно пиши, что получит человек после прохождения опроса. Что можешь дать пользователю, что несёт ценность для него: подарок, скидка, подборка, чек-лист, гайд, пошаговая инструкция; 
2. При взятие контактов используй одно поле (номер телефона). Имя и email можно узнать потом по телефону. Чем больше полей, тем меньше конверсия сайта;
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 лет со средним доходом и выше из города-миллионника.

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

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

Определяем основного персонажа, тот кто совершает покупки/приносит 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ть и сможет достучаться до нужной аудитории.