Как сделать лендинг онлайн-курса

Лендинг онлайн-курса — это посадочная страница об образовательном продукте, которая должна привлекать внимание, заинтересовать посетителя сайта и убедить его купить курс. Какие шаги нужно предпринять, чтобы разработать эффективный лендинг онлайн-курса и запустить его на Тильде — поделились эксперты из SETTERS EDUCATION: digital-тимлид Наталия Катерова и веб-дизайнер Мария Шкляева. Статья будет полезна маркетологам и создателям образовательных продуктов, которые хотят самостоятельно запустить страницу о курсе.

Первый этап в создании лендинга — получить ответы на ключевые вопросы:

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

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

Возможная структура лендинга онлайн-курса:

Зачастую бывает так, что продуктовый отдел или клиент приносит на брифинге глобальную мысль о новом курсе, главные мысли, особенности, не имея при этом детально проработанной программы. И это нормально, потому что создание курса, его методология — это процесс, которому нужно время. Чтобы не терять время до запуска и получать предварительные заявки на курс, спрогнозировать спрос на него, мы сначала делаем мини-лендинг, где отображаем главные блоки: о чём курс, для кого, как будет проходить обучение, какой будет результат, форма заявки. Дальнейшие вопросы по начинке курса прорабатываются нашим отделом продаж. Вот пример такого лендинга: https://setters.education/mini-lending.

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

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

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

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

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

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

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

Главный экран

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

Текстовый блок

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

Блок с карточками

Одну и ту же информацию можно показать по-разному. Старайтесь разнообразить дизайн лендинга, например, в одном блоке показать карточки в три колонки, а в другом — в две. Где-то можно добавить иконки или иллюстрации. Это поможет сделать композицию более динамичной и не даст посетителю сайта заскучать.

Программа курса

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

Форма заявки

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

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

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

На какие показатели смотреть:

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

Если вы хотите узнать больше о создании лендингов, рекомендуем пройти бесплатный курс «Создание Landing Page» от Тильды. Вы научитесь проектировать, оформлять и запускать конверсионные лендинги и увеличивать количество клиентов. На Tilda Education вы найдёте и другие полезные практические руководства по дизайну и маркетингу для цифровых проектов.