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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

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

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

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

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

За 17 лет работы агентства мы переделали десятки сайтов и поняли, в чём настоящая проблема: дело в управляемости. Сайт должен быть инструментом маркетинга, а не тормозом. В статье с кейсами на нашем сайте подробно разбираем все известные конструкторы и CMS: WordPress, Tilda, Битрикс, кастомные CMS, Shopify. В материале делимся таблицей сравнения. Каждая платформа имеет сильные и слабые стороны. Важно выбирать ту, что решает именно ваши задачи. Если вы хотите быстро тестировать гипотезы, запускать кампании и не зависеть от программистов – ищите платформу, где правки можно делать самостоятельно.

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

Статья-сравнение с разбором всех известных конструкторов и CMS

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

Хотите понять, удобен ли ваш сайт для пользователей? Мы подготовили чек-лист для самостоятельного аудита юзабилити сайта за 15 минут. Помогает быстро проверить ключевые элементы и выявить, что мешает конверсии.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наталья Головченко

арт-директор, Darvin Digital

“С помощью иллюстраций мы погружали посетителей сайта в продуктовую систему клиента. Чтобы пользователи сразу понимали, что из себя представляет этот продукт: как подана информация на сайте и как потом она будет подана в курсе. На этом этапе мы сделали хорошую отсылку и соотнесли внутренний продукт и отдельный канал коммуникации – новый лендинг. Я думаю, это одно из самых важных, что нам удалось сделать. И в итоге мы получили такой уникальный сайт” .

Чек-лист для самостоятельного аудита юзабилити сайта

3. Результаты сотрудничества

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

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

Сайт обошёлся клиенту в 161 000 рублей.

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

Наталья Головченко

арт-директор, Darvin Digital

“Проект получился очень детализированным. Мы тщательно проработали иллюстрации, анимацию, структуру и распределение контента, выделяя ключевые смыслы. Ещё одна особенность, которую хочется отметить, – нестандартная форма блоков, основанная на элементах логотипа. Мы старались максимально адаптировать сайт под подачу информации в самом курсе. И даже за счёт именно этого лендинг усиливает ценность продукта. Он не выбивается вообще из общего визуального языка самого образовательного проекта. Мы получили уникальный сайт, который не просто продаёт курс, а транслирует его философию и формат”.

Бесплатная консультация