Создание дизайна landing page

Дизайн лендинга: основные правила

Теперь поговорим о дизайне лендинга, его основных правилах, ведь структура лендинга – это еще не все

Важно, чтобы landing page был привлекательным и в плане оформления.

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

• Минимализм. Дизайн должен быть стильным, шрифты читабельными. Тестовая часть и изображение следует чередовать. И не следует нагромождать много элементов. Пусть лучше будет побольше свободного пространства.
• Кнопки СТА стоит размещать в конце первого экрана. Это правило для лучшей продажи.
• Не стоит использовать шаблоны. Следует применять уникальные изображения продукции или хотя бы добавьте на шаблонные фотографии дизайнерские элементы, которые применяются в вашей компании.
• Сайт-страница должна быть удобна для посетителя: от активных элементов до кнопки СТА.

Соблюдая эти простые правила при дизайне лендинга, он принесет больше целевых действий

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

Что такое лендинг и для чего он нужен

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

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

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

И поэтому у посетителя лендинга есть только 2 варианта:

• Сделать целевое действие, которое от него хотят
• Закрыть сайт и пойти дальше «сёрфить» в интернете

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

Лендинг с технической стороны

Продающую страницу можно написать даже на чистом HTML + CSS. Но там не будет форм для отправки заявок, поэтому такой лендинг будет крайне низкопробным. Также проблемой станет редактирование элементов, потому что не каждый вебмастер справится с HTML и CSS. Перед непосредственной версткой шаблон landing page обычно создается в каком-нибудь графическом редакторе: Adobe Muse, Photoshop и т. д. В какой-то мере это двойная работа.

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

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

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

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

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

Как провести анализ лендинга?

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

1. Лендинг быстро загружается.

2. Шрифт хорошо читается, не слишком мелкий (не менее 12 кегля).

3. Фон – белый, шрифт – черный.

4. Заголовок содержит УТП.

5. Сделан акцент на одном продукте.

6. На лендинге есть качественные фотографии, иллюстрации.

7. Описание продукта / услуги четко доносит выгоды клиента от заказа или покупки.

8. Текст разделен на логические блоки.

9. В тексте имеются подзаголовки.

10. Важная информация визуально выделена (жирным или контрастным шрифтом, врезками, рамками и др.)

11. Если на странице есть видео, оно качественное.

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

13. Есть информация о гарантии (если гарантия предоставляется).

14. Есть призыв к действию (позвонить, оформить заказ, заполнить форму и т.д.) Четко обозначено, что получит пользователь, выполнив целевое действие.

15. Кнопка «купить» заметная.

16. Номера телефонов прописаны текстом (не картинкой).

Пользуйтесь и получайте высокие результаты от контекстной рекламы!

Рекомендуем

Что такое РСЯ в Яндекс.Директ? Как настроить рекламу в РСЯ?

РСЯ (Рекламная Сеть Яндекса) – это сайты, приложения и видео, на которых показывается реклама Яндекс.Директ. Вы наверняка замечали: стоит поискать …

Контекстная реклама – что это такое и как она работает?

Контекстная реклама – это реклама в интернете, связанная с интересами пользователя или с контекстом страницы. Например, пользователь задает в …

Ukit — дешевый и надежный

Ukit ориентирован в первую очередь на создание сайтов-визиток для малого и среднего бизнеса. Шаблонов лендингов здесь совсем немного — всего 12.

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

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

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

При регистрации вам предложат выбрать домен 3-го уровня. После того, как сайт будет готов, к нему можно прикрепить домен 2-го уровня. Его можно купить отдельно у любого регистратора, а можно приобрести прямо в личном кабинете Ukit.

После регистрации вы получаете бесплатный тестовый период 15 дней. Дальше нужно выбрать один из платных тарифов. Есть 4 базовых тарифа (в скобках цена при оплате за 2 года): «Премиум» 5$ (3,5$) в мес., «Премиум+» 10$ (7$) в мес., «Магазин» 12$ (8,4$) в мес. и «Про» 15$ (10,5$) в мес.

Способы оплаты: безналичный расчет, Visa, Mastercard или PayPal.

Достоинства

• Шаблоны выглядят современно и адаптированы под мобильные
• Можно заказать свой уникальный дизайн
• Неплохой функционал: SEO оптимизация, подключение «Яндекс.Метрики» и Google Analytics, SSL-сертификаты, почта, домен 2-го уровня.
• Интеграция с соц.сетями

Недостатки

• Очень мало шаблонов для лендингов
• Нет бесплатного тарифа

Landing Page Marketing Potential

The modern digital environment is very competitive, and it’s essential to promote your new product or service then through efficient tools. Thanks to A/B testing or A/B split testing, you can create a few landing pages conversion and optimize your content to drive traffic, build brand awareness, and boost leads through search, which will encourage landing page visitors to push the CTA button and leave their information. Via the calls to action (CTA) button color attraction, you can provide any encouraging actions, including case studies, consultations, webinars, and more, which will lead to homepage destination for product or service when new.

Чем занимается разработчик лендингов

Нажмите на изображение, чтобы открыть в полный размер

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

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

Чтобы понять, что делает специалист по созданию посадочной страницы, эффективнее всего описать процесс создания лендинга:

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

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

В таких текстах минимум воды и максимум сжатой информации. Стиль написания и количество информации может меняться в зависимости от целевой аудитории. Текст пишется по SEO, с использованием популярных вхождений ключевых слов конкретно для этого предложения.
Затем создается примерный шаблон посадочной страницы. На шаблоне видно, где будет текст и где будут визуальные элементы (изображения, видео). В процессе создания можно вносить корректировки.
В шаблон вставляется написанный текст, а затем дополняется визуальными элементами. Чаще всего изображения и видео получают у самого заказчика, чтобы использовать максимально качественный и эксклюзивный материал.
Лендинг готов.

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

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

Достоинства и недостатки профессии

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

Список плюсов:

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

Перечень минусов:

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

В каких ситуациях лендинг просто необходим

Посадочная станица позволяет качественно решать ряд задач.

Прямые продажи

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

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

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

Консолидация лидов для последующей коммуникации с ними

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

Лэндинг психолога

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

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

Общая схема создания лэндинга психолога подчиняется обычным законам создания продающих страниц.

Лендинг Инстаграм: примеры

Разрабатывать сам макет лендинга для Инстаграмма можно так в графическом редакторе или фотошопе, но вот в чём особенность: готовый макет нужно будет разделить на 9 частей и загрузить каждый кадр как отдельную фотографию. Это будет выглядеть следующим образом:

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

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

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

Где еще быстро создать лендинг: 13 качественных сервисов

Это англоязычный конструктор. У него большая база (более 500 шаблонов), сконструированных для быстрого сбора лидов. Есть возможность менять контент в зависимости от пришедшей аудитории. Сервис предоставляет многопользовательское управление, что позволит управлять сайтом разным специалистам. Цены не самые гуманные для российских пользователей – 149 $ в месяц при годовой подписке. Но если нужен красивый лендинг с динамическим контентом, можно протестировать эту платформу.

Это также англоязычная платформа с большой базой шаблонов. Ее редактор напоминает фотошоп. Элементы добавляются путем перетаскивания, каждая деталь гибко настраивается. Всплывающие окна хорошо отображаются на разных устройствах. Лендинг можно интегрировать с MailChimp, подключать к Google Analytics, тестировать. Стоимость – от 29 $/мес. при годовой оплате. Тарифы ограничены количеством посетителей в том числе. 

Стандартный конструктор посадочных страниц, который на всех тарифах предлагает:

• Интеграцию с внешними сервисами, Google Analytics и Яндекс.Метрикой;
• Полную адаптивность;
• Добавление всплывающих лид-форм;
• Сбор базы подписчиков;
• Хостинг и домен.

Минимальная стоимость – 400 руб./мес. 

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

Примеры лендингов, созданные на Bloxy

Конструктор предлагает 1300+ шаблонов, которые поделены на сферы деятельности. Есть пустая страница, позволяющая собрать одностраничник с нуля. Конечно же, страницы адаптированы под мобильные устройства, есть виджеты и онлайн-оплата. Бесплатный тариф действует 2 недели, затем минимальная стоимость будет составлять 315 руб./мес. 

Здесь можно сделать лендинг с абонентской платой от 210 руб./мес. Есть бесплатный тариф с поддоменом, возможностью добавить 5 товаров и 20 фотографий. Доступно 100+ шаблонов.

Сайты интегрируются не только с CMR, но и “Мой склад”, СДЭК. Есть выгрузка товаров в Яндекс.Маркет. 

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

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

Можно подключиться к Bazium CRM, составлять свои формы. Содержание лендинга обойдется в 290 руб./мес. при годовой оплате. 

Конструктор предлагает посмотреть шаблоны лендингов и возможности редактирования до регистрации, что удобно. Базовый тариф стоит 190 руб./мес. В нем доступно 60+шаблонов, бесплатный домен (на год), но всего 50 Мб места на сервере. Платформа подойдет для стандартного лендинга, без тяжелой графики.

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

Платформа позволяет без регистрации просмотреть не только веб-версию шаблона, но и мобильную. Дизайны современные, отличаются простотой и большим количеством «воздуха». Стоимость начинается от 3.19 $/мес. 

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

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

Что такое лендинг пейдж

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

Лендинг представляет собой одностраничный сайт

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

Множество таких ресурсов широко представлены в Интернете.

Если обратиться к исходному значению, landing page в переводе с английского означает «целевая» или «посадочная страница». Множество таких ресурсов широко представлены в Интернете.

Пример лэндинга компании «Море желаний»

Три причины сделать лендинг-пейдж:

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

Три задачи лендинг пейдж:

1. Продажа продукта. С этой целью применяются стимулирующие слова («купить», «оставить заявку», «позвонить», «сделать заказ»).
2. Сбор информации. Для этого используются термины «подписаться», «узнать больше».
3. Распространение программного обеспечения посредством продаж.

Алгоритм осуществления продаж при помощи лендинг пейдж состоит из четырех этапов:

• посетители увидели ссылку на посадочную страницу (к примеру, 100 человек);
• заинтересовавшись, сделали клик и совершили переход (к примеру, 40 человек);
• оставили заявку (к примеру, 10 человек);
• приобрели продукт (к примеру, два человека).

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

Лендинг пейдж необходим компании в следующих случаях:

1. Низкая конверсия основного интернет-ресурса компании.

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

Чтобы рассчитать конверсию, применяют такую формулу:

ПП / ОП * 100%,

где ПП — это число сделавших целевое действие пользователей, ОП — общее количество посетителей ресурса за сутки.

К примеру, за 24 часа ваш сайт посетили 360 человек, 18 посетителей подписались. В таком случае конверсия будет равна 5 %.

В рунете средние показатели конверсии сайтов колеблются на уровне 0,5 %, при этом конверсия лендингов показывает от 5 до 10 %. Эта разница демонстрирует явное преимущество лендинг пейдж, перед полноценными сайтами.

2. Запуск нового продукта.

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

3. Решение конкретной задачи.

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

Однако для того, чтобы он по-настоящему «заработал», необходимо предпринять следующие действия:

1. Активировать контекстную рекламу на вашем одностраничнике.
2. Сгенерировать электронную рассылку по готовой базе подписчиков. Текст письма должен содержать краткое описание маркетингового проекта или продукта, а также ссылку на лендинг.
3. Провести широкомасштабную рекламную акцию на всех доступных ресурсах (к примеру, социальные сети, форумы, площадки для объявлений, сайты-партнеры), обязательно сопроводив ее ссылкой на одностраничник.

Проще говоря, это пример продающего лендинг-пейдж, который «работает» вкупе с другими маркетинговыми ресурсами компании, усиливающими эффект от продаж. 

Вас также может заинтересовать: Продвижение услуг в Интернете