Mindbox: лендинг подписки на курс «Автоматизация маркетинга» с mobile‑first дизайном и интерактивным превью

TL;DR

Для Mindbox разработали лендинг подписки на курс «Автоматизация маркетинга». Спроектировали по принципу mobile‑first, встроили в визуальный стиль сайта и собрали интерактивное превью формата курса с плавным автоскроллом письма в рамке смартфона.

Pitch

Mindbox запустили обучающий курс для менеджеров и владельцев бизнеса и хотели собрать релевантную базу подписчиков. Мы спроектировали отдельный лендинг подписки в рамках основного сайта — начали с мобильной версии, перенесли решения на десктоп и сохранили визуальный стиль mindbox.ru. Самый сложный блок — интерактивное превью формата курса, где письмо в рамке смартфона плавно прокручивается само и останавливается по нажатию пальцем. Для плавной анимации использовали requestAnimationFrame, настроили события для отслеживания конверсий в рекламных системах и аналитике.

Контекст клиента

Мы работаем с Mindbox в направлении поддержки и рекламы сайта с 2017 года. Наш клиент — лидер среди платформ автоматизации маркетинга в России на основе CDP (Customer Data Platform).

Задача

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

Структура лендинга для курса содержит следующие блоки:

• форма подписки;
• содержание;
• изображения экспертов;
• интерактивное превью формата курса.

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

Что сделали

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

Содержание

В мобильной версии блок содержания курса представлен в виде слайдера.

Для десктопа блок содержания реализован в виде плитки из 6 элементов со ссылкой «Показать ещё».

Формат курса

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

В версии для десктопов блок выглядит так:

Его содержание можно просмотреть с помощью скролла.

Александр Шутов, веб‑программист Intensa:

Для того, чтобы анимация в браузере была плавной, нужно учесть, что свойства, меняющие позицию объекта, делают это по‑разному. Например, для максимально плавного скролла на любых устройствах мне нужно было задействовать GPU. Я выбирал из 3‑х вариантов: вставить видео напрямую, использовать специальные свойства или requestAnimationFrame на JS. Выбрал последний за его гибкость. RequestAnimationFrame позволяет управлять отрисовкой каждого кадра через JS и применять события в любой момент, тогда как CSS заранее подготавливает анимацию в GPU. Что касается обработки нажатий — я использовал свойство ontouch для сенсорных устройств.

Разработка дизайна

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

При разработке дизайна мы учли следующие аспекты:

1. На сайте mindbox.ru преобладает белый и светло‑серый, много пространства, акцентный цвет — зеленый.
2. Легкие тени добавляют интерфейсу контраста и графичности, выделяя определенные элементы как в статике, так и при взаимодействии с пользователем.

Таким образом было выбрано самое лаконичное и простое визуальное решение, не противоречащее общей стилистике сайта.

Леонид, веб‑дизайнер Intensa:

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

Леонид, веб‑дизайнер Intensa:

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

Леонид, веб‑дизайнер Intensa:

Самым интересным, в плане реализации, стал последний блок. Он состоит из интерактивного элемента и дает больше вариантов для оформления. В ТЗ клиент предлагал взять фотоизображение смартфона и использовать его для обрамления письма, чтобы наглядно показать формат курса. Я нашел подходящее изображение лаконичной модели, отретушировал, но итоговый результат в контексте дизайна сайта выглядел инородно и неуместно. Тогда я решил подойти к пожеланиям клиента с другой стороны и использовать стиль контурных иконок, используемых на сайте. Но «каркасное» отображение смартфона выглядело недостаточно целостно и отвлекало внимание от основного контента характерными элементами. В результате я стилизовал смартфон несколько по‑другому, используя тени и характерные детали.

Леонид, веб‑дизайнер Intensa:

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

Аналитика

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

Результат

• Спроектировали и собрали отдельный лендинг подписки на курс в едином визуальном стиле с основным сайтом mindbox.ru.
• Реализовали mobile‑first подход: сначала проработали мобильную версию, затем перенесли решения на десктоп.
• Собрали интерактивный блок превью формата курса с плавным автоскроллом письма в рамке смартфона и обработкой нажатий пальцем — по принципу историй в социальных сетях.
• Настроили события для отслеживания конверсий в рекламных системах и аналитике.

Оценить дизайн‑решение, удобство лендинга и работу интерактивного элемента можно по ссылке https://mindbox.ru/⁠course/.

Команда

• Александр Шутов — веб‑программист
• Леонид — веб‑дизайнер
• Кирилл Трофимов — куратор кейса со стороны Intensa

Технологии

• Анимация: requestAnimationFrame (JS) для плавного скролла с задействованием GPU
• Обработка нажатий: свойство ontouch для сенсорных устройств
• Подход: mobile‑first проектирование
• Аналитика: события на полезные действия для рекламных систем и систем аналитики

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠mindbox‑course/
• Лендинг курса: https://mindbox.ru/⁠course/
• Сайт клиента: https://mindbox.ru
• Связанные кейсы у того же клиента: Mindbox: на 3 дня ускорили выпуск материалов журнала, Mindbox: модуль интеграции для Bitrix, Mindbox: крупные интеграции