Студия Турум-бурум

Структура продающего лендинга: Кейс о дизайне landing pages для компании Битрикс24

Структура продающего лендинга: Кейс о дизайне landing pages для компании Битрикс24
236

Какой должна быть структура продающего лендинга для проведения промо-кампаний и анонса конференций? На примере дизайнов landing pages для компании Битрикс24 расскажем основные правила создания лендинга, которые помогают конвертировать пользователей в партнеров, подписчиков и покупателей.

Пару слов о компании «Битрикс24»

CRM «Битрикс24» по всему миру насчитывает уже более 7 млн. регистраций, а 275 000 онлайн-проектов работают на основе продукта «1С-Битрикс: Управление сайтом».

В Украине продукты Битрикс представляет самостоятельная компания «Битрикс24», сервисом которой пользуется 80 000 людей и более 10 000 украинских компаний.

В Турум-бурум мы не только разрабатываем интернет-магазины на Битрикс, но и помогаем компании Битрикс24 презентовать продукты и анонсировать конференции уже более 6 лет. За это время мы создали 60 дизайнов лендингов, у каждого из которых 100 000 посещений в месяц.

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

За это время мы создали 60 дизайнов лендингов

Главные преимущества создания лендинга

Лендинг — это «посадочная» страница, которая направлена на привлечение внимания целевой аудитории, продвижение и усиление эффективности маркетинга. 

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

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

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

Пример лендинга для конференции, которая проходила в Казахстане.Концепция: “Yellow Submarine – прекрасная метафора для предстоящего мероприятия, которое призвано познакомить людей, живущих далеко друг от друга.”
Пример лендинга для конференции, которая проходила в Казахстане.
Концепция: “Yellow Submarine – прекрасная метафора для предстоящего мероприятия, которое призвано познакомить людей, живущих далеко друг от друга.”

Структура продающего лендинга: основные пункты

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

1. Привлечение внимания

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

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

мы создавали множество лендингов для анонса сезонных скидок на продукты

мы создавали множество лендингов для анонса сезонных скидок на продукты

мы создавали множество лендингов для анонса сезонных скидок на продукты

2. Раскрываем подробности и заинтересовываем

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

Раскрываем подробности и заинтересовываем
Раскрываем подробности и заинтересовываем
Раскрываем подробности и заинтересовываем

3. Прорабатываем возражения

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

«Ясность побеждает убеждение» — это хороший принцип.

Раскрываем подробности и заинтересовываем

Сразу даем ответы на часто задаваемые вопросы

4. Определяем одно целевое действие

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

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

Например, сквозная кнопка в шапке.
Например, сквозная кнопка в шапке.

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

Примеры структуры продающих лендингов для Битрикс24

Мы создавали множество посадочных страниц как для рекламных кампаний и сезонных акций, так и для анонса конференций и партнерских мероприятий.

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

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

Лендинг Анатомия Бизнеса

Это пример лендинга, который транслирует предстоящие конференции компании. 

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

Анатомия битрикса

Анатомия бизнеса лендинг

Интересно, что компания пошла дальше и теперь использует эти иконки в качестве декора в офисе, при создании футболок и толстовок. 

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

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

Лендинги с сезонными акциями

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

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

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

image 267 (5).png
Навигация этого лендинга построена на горизонтальном скролле, каждый следующий элемент является продолжением предыдущего. Это создает впечатление бесконечного поля, где собираются скидки. Каждый последующий фон блока с текстом становится немного ярче, создавая эффект повышения температуры.

Тематические мероприятия

Когда дело касается анонса мероприятий, то структура продающего лендинга выглядит так:

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

Но отличительной особенностью является то, что каждый лендинг имеет свою идею и тему. 

Например, дизайн лендинга для партнерской конференции в античном стиле. 

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

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

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

Интересно, что далее дизайн лендинга компания протягивает на всю полиграфию и email-рассылку. Т.е. стилистика landing page, становится айдентикой всего мероприятия. 

Целостность и внимание к мелочам — наше негласное правило партнерства с «Битрикс24».

В качестве еще одного примера вспомним лендинг для конференции под названием  «Выше облаков». 

Структура лендинга отвечает основным правилам: привлекаем внимание, раскрываем подробности, заинтересовываем. СТА — сквозная кнопка в шапке.
Структура лендинга отвечает основным правилам: привлекаем внимание, раскрываем подробности, заинтересовываем. СТА — сквозная кнопка в шапке.

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

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

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

Главный принцип создания продающего лендинга

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

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



Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.