Разработка лендинга – это важный этап для тех, кто собирается продвигать услуги или товары в интернете. С его помощью можно создать портфолио, запустить продажи или просто собрать заявки. Создать его может каждый – в этом нам помогают специальные конструкторы, в которых веб-дизайн сводится к простому перемещению блоков.

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

Как сделать лендинг самому: подготовка контента

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

Презентация компании и услуг для привлечения новых клиентов.​

Получение заявок из интернета или продажа товаров.​

Реклама курсов, тренинга, вебинара.​

Тестирование гипотез, погружение в сферу веб-разработки.​

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

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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2F71a2193961cd894999a69169c9d1fe8c.png&hash=7dd638db48c45e2469233f3fb3279fc7

Чтобы создать нечто подобное, важно проработать каждый этап, который включен в разработку сайта. Если сразу перейти к дизайну без каких-либо исследований и подготовок, то выйдет «ничего», а вы в итоге будете думать, что разработка сайтов – это не мое.

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

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

Вот стандартный бриф, заполненный одним из заказчиков:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2F26fc73efa062856b234ac0b473299eea.png&hash=9ff04c7f8b47249f4de6ca8bf9efa642

Взять пустой бриф вы можете на Google Диске – ссылка приведет вас в нужное место. Если по каким-либо причинам доступ будет закрыт, то сообщите об этом в комментариях.

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

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

Продумать, какие блоки можно добавить на сайт.​

Если нет фирменного цвета, то его можно выбрать, изучив конкурентов.​

Увидеть, чем «цепляют» клиентов другие компании.​

Найти конкурентов вы можете через Google или Яндекс. Если вы давно работает в офлайн-бизнесе, то должны знать своих конкурентов – найдите их сайты и посмотрите, что они собой представляют.

Другой способ – найти конкурентов через ключевые слова. Их можно посмотреть на Яндекс.Wordstat либо через Планировщик ключевых слов от Google. Рассмотрим для примера сервис от Яндекса:

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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2F907ec45551a6040a632b55112eaa06fe.png&hash=f3bc734a3310371ac8129b30a30c68b6

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

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

ЦА – это группа людей, которая с наибольшей вероятностью приобретет товар или услугу конкретной компании.​

Анализ ЦА – это ответ на вопрос «Кому мы продаем?». Если продавать все и всем сразу, то такие продажи не смогут приносить достойные плоды.​

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

Как может выглядеть анализ:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2F0fa916190864b5925d03c3d58ff33321.png&hash=a87ca0c7622e080f63cbf2cb8ccf1359

Важно не просто узнать возраст, пол и географическое положение потенциального клиента, но и понять его боли и страхи.

Где же это все взять? Самый простой вариант – походить по различным форумам и маркетплейсам, где пользователи оставляют отзывы. Узнать уровень дохода вы также можете там. Например, если компьютерный стол был куплен за 20 000 рублей, то это говорит о том, что отзыв оставил покупатель как минимум со средним достатком.

И вот еще один пример:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdf4e2395c5c625259330478522bdb81a.png&hash=1f41d1a8381dc9c4b265d9ab211295ef

Посмотрите на все эти столы и ответьте на вопрос: «Все эти 4 варианта будет искать одна и та же группа людей?». Очевидно, что нет – в этом и есть суть анализа целевой аудитории. Если его провести неправильно, то можно не только создать «плохой сайт», но и лишиться потенциальных клиентов.

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

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

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

Behance

Pinterest

Awwwards

Dribbble

Необязательно искать работы по своей тематике, вы можете посмотреть и другие проекты. Главное – найти интересные фишки и использовать их в своем проекте (но без плагиата).

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

Прототип, как правило, не включает в себя изображения, а содержит лишь правильное расположение блоков и текстовый контент:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fae50c188aadc578029bc77d1b42177bb.png&hash=a150c85b5bbc8469a74e8e4eb7f02412

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

Вот некоторые рекомендации, которые помогут вам со структурой:

Шапка лендинга – в ней, как правило, размещается логотип и основное меню сайта, добавляется номер телефона и прикрепляется кнопка действия, например, «Заказать звонок».​

Офферная конструкция – то, что располагается на первом экране. С ее помощью необходимо описать всю суть бизнеса, допустим, «Разработка сайтов за 7 дней». В нее также входит дополнительное описание подобного типа – «Помогу вашему бизнесу увеличить продажи», «Оставьте заявку и получите скидку». Все это прописывается ниже основного слогана, с меньшим размером шрифта. Ниже помещается кнопка действия, которая чаще всего вытекает из описания – если вы предлагаете оставить заявку, то и кнопку желательно назвать так же.​

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

Следом идут особенности – почему клиенту стоит выбрать ваш продукт.​

О компании – расскажите, как вы появились и почему стали востребованы.​

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

Сколько стоит – здесь прописывается ценовая политика компании.​

Отзывы – блок может поднять экспертность.​

Контакты – укажите контактные данные, чтобы клиенты смогли с вами связаться.​

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

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

Для разработки прототипа вы можете воспользоваться следующими программными средствами: Axure, Figma, Mockplus.

Важно полностью проработать прототип – вам же будет потом проще разработать весь сайт.

Собираем лендинг на конструкторе

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

Craftum​

Lpgenerator​

uKit​

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

Сервис платный, но новым клиентам предоставляется бесплатный 10-дневный доступ ко всем функциям.

Первым делом зарегистрируемся:

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

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

Переходим к созданию сайта:

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

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

На этом все. Удачи вам и вашему бизнесу!