Собрали сайт для курса по C# за 1.5 месяца и 161 000 ₽

Клиент: образовательный проект «Процион», онлайн-курс по программированию на C#.

Исходные: курс продавался на Stepik, была группа во ВКонтакте, отдельного сайта не было.

Задача: собрать продающий лендинг на Tilda в стилистике курса (космос/комиксы/геймификация), чтобы за первые 15 секунд было понятно, что это за обучение, какой формат и уровень. Дополнительно – удержать внимание анимацией, но не просадить скорость, особенно на мобильных.

В рамках проекта было решено:

• собрать и структурировать контент со Stepik и перевести его в структуру лендинга: что за курс → кому подходит → что внутри → формат обучения → геймификация → преимущества → преподаватели/наставники → как начать

• подготовить 3 дизайн-концепта и выбрать направление, которое совпадает с визуальным языком курса (космическая комикс-стилистика)

• доработать первый экран: сократить текст и вынести ключевые параметры (объём/что внутри/срок прохождения) в теги, чтобы смысл считывался быстро

• отрисовать авторские иллюстрации и собрать дизайн-макет главной страницы

• перенести макет в Tilda, настроить адаптивы и анимации (step-by-step + стандартные появления)

• оптимизировать мобильную версию: упростить часть анимаций и следить за скоростью загрузки

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

Наш клиент – образовательный проект «Процион». Компания создаёт доступные продукты в сфере IT, рассчитанные на новичков. Помогает освоить новые навыки за минимальный промежуток времени. В Darvin Digital специалисты обратились за лендингом на Tilda для курса по программированию на языке C#. Основная точка продаж до этого – платформа Stepik. 

Stepik даёт промостраницу с готовой структурой и блоками (описание, программа, преподаватели, отзывы/комментарии). Проблема появляется, когда продукту нужно больше, чем быть просто карточкой проекта – страницу нельзя полностью настроить по дизайну и сценариям взаимодействия, как на отдельном лендинге. Подача курса здесь получается более универсальной, а управление восприятием ограничено.

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

Но сайта, который бы системно презентовал курс, доносил его ценности и объяснял формат, уровень обучения, не было. И в случае с этим инфопродуктом от «Проциона» это было особенно важно. Потому что обучение программированию рассчитано на молодую аудиторию и использует геймификацию: материал подаётся в формате комиксов с космической тематикой. Это часть продукта и узнаваемости бренда. Поэтому нейтральная посадочная не подходила: возникал разрыв между тем, как курс ощущается на Stepik, и тем, каким он оказывается в реальности после покупки. И если для пользователей платформы Stepik такая посадка подходила, то для дополнительного трафика с других каналов – совсем нет: для холодного посетителя (не из группы в ВК) возникал бы явный разрыв между презентацией продукта и им самим – с комиксами и геймификацией. 

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

- 50 миллисекунд (0,05 секунды): столько времени требуется пользователю, чтобы сформировать визуальное мнение о сайте. Это буквально мгновение ока.

- 10–20 секунд: если пользователь остался после первого визуального впечатления. Это критическое окно, в которое он решает, несёт ли контент ценность. Если за это время он не находит ответ на свой запрос, он уходит.

Ключевое отличие инфопродукта: товар нельзя просто показать на фотографиях или дать быстрое и наглядное сравнение “до/после”. Обучение так не продаётся: человек покупает чужой опыт и его не видно вот так сходу. Поэтому, во-первых, лендинг должен был визуально совпасть с продуктом: тот же язык, та же “вселенная”, тот же тон, чтобы человек зашёл и сразу понял атмосферу курса. Во-вторых, структура должна была быстро объяснять суть: что внутри и как устроено обучение, какой формат, на какой уровень рассчитано. В-третьих, анимации, которые были неотъемлемой частью презентации, должны были усиливать подачу и динамику, но не ломать мобильный опыт, потому что на Tilda – это чувствительная зона. Этот конструктор позволяет быстро собрать эффективный лендинг, но тяжёлая графика и сложная step-by-step анимация легко просаживают скорость загрузки, особенно на телефонах. 

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

Работа началась с контента. Сам курс уже был подробно описан на Stepik. Именно это и стало базой для будущего лендинга.

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

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

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

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

Первый вариант – минимализм: тёмный космос, звёздный фон и оранжевые акценты. 

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

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

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

Третий – тёмный фон: серьёзный, глубокий, с акцентами и реалистичными деталями. 

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

Заказчик остановился на втором варианте. Чтобы точнее отразить ценности компании, концепт доработали. 

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

У первых экранов онлайн-курсов почти всегда одна и та же проблема: текста много, а ясности мало. Человек открывает страницу и вместо ответа на базовые вопросы видит красивое вступление. Что за курс? Для кого? Какой уровень? Что именно внутри и сколько времени это займёт? Дать ответы на такие объёмные вопросы нужно было ёмко. Так, чтоб пользователю сразу всё было понятно. А уже дальше предлагать подробности.  

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

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

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

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

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

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

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

Скорость проверяли через PageSpeed – сервис, который показывает, насколько быстро грузится страница и где она теряет производительность.

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

На лендинге эту механику важно было не просто упомянуть, а объяснить. C# для многих звучит как что-то сложное. И если человек видит на странице только общие слова про пользу и карьеру, тревога никуда не уходит. А когда формат обучения разложен по-человечески, становится спокойнее: понятно, как именно будет устроен процесс и почему он не выглядит как бесконечные лекции. Этот процесс позволяет повысить вовлеченность к обучению, превращая сложные темы в интересный челлендж, а также поддерживает интерес на всем протяжении курса.

Параллельно детальнее расписали преимущества обучения и добавили блок с преподавателями и наставниками. 

Это усиливает доверие и делает картину цельной: есть понятный формат, есть ценность, и есть люди, которые ведут и поддерживают.

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

Структура стала проще для чтения: быстрее считывается, что внутри, какой объём и как устроен процесс. Анимации добавили динамику и ритм, но без фанатизма – на мобильной версии эффекты пришлось упрощать, чтобы страница не превращалась в красивую, но тормозящую витрину.