Onlinekurs.ru

Разработка интерактивных курсов дистанционного обучения

Тип
Лендинг
Год
2022

Онлайн-школа, специализирующаяся на обучении по различным направлениям (Photoshop, методические материалы и др.). На момент обращения сайт представлял собой простую страницу на WordPress, которая не отражала уникальность и интерактивность образовательного продукта. Заказчик хотел кардинально переработать дизайн, сделать его современным, технологичным, с 3D-персонажем и сложной анимацией, чтобы выделиться среди конкурентов и повысить вовлечённость пользователей.

**Цели создания сайта:**

Разработать уникальный, запоминающийся дизайн с использованием 3D-персонажа и сложной анимации (движение элементов, эффект «помех», параллакс), который подчеркнёт инновационность образовательного продукта.

Превратить простой лендинг в полноценный многостраничный сайт с блогом, разделом «О компании» и отдельными страницами для разных курсов (Photoshop, управление персоналом и др.).

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

Обеспечить заказчика удобной административной панелью WordPress для самостоятельного управления контентом (тексты, изображения, видео, примеры работ).

Интегрировать удобную систему оплаты (PayAnyWay) и решить проблему сложного пути регистрации в Moodle, сделав процесс покупки максимально простым и быстрым.

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

Особое внимание уделили анимации. На сайте появились «плывущие» кубы на фоне, реагирующие на движение мыши, эффект «глитча» (помех) в определённых блоках, анимированные переходы при наведении на коробки с курсами. Для блока с примерами курсов пришлось решать техническую задачу по встраиванию SCORM-пакетов через iframe: мы совместно с администратором школы настроили заголовки безопасности, чтобы контент отображался корректно. В дальнейшем, когда появилась страница услуги по оформлению методических материалов, добавили анимацию кисти, движущейся по тетради, и вылетающих объектов, что потребовало тонкой настройки скролл-триггеров.

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

Самой сложной задачей стала интеграция с Moodle и системой оплаты. Изначально планировалось делать полноценную регистрацию через API, но в процессе стало ясно, что это сильно затянет сроки и усложнит путь пользователя. Мы предложили альтернативу: на кнопках «Купить» сделать вызов виджета оплаты PayAnyWay, который собирает имя и email, а затем вручную (или через плагин) создавать учётную запись в Moodle. Такой подход позволил запустить продажи в разы быстрее. Позже, когда появилась необходимость в большем количестве курсов, мы добавили возможность настраивать цену и название товара прямо из админки WordPress, а сама форма оплаты была стилизована под общий дизайн сайта.

На протяжении всего сотрудничества мы оперативно реагировали на правки: исправляли отображение логотипов в отзывах, центрировали элементы на мобильной версии, решали проблемы с кэшированием, настраивали UTM-метки. Даже когда возникали непредвиденные сложности (например, с доменами и Cloudflare), мы совместно с заказчиком находили решение, не бросая проект на полпути.

[case_summary] В результате длительной и кропотливой работы онлайн-школа получила не просто сайт, а мощный маркетинговый инструмент с уникальным, запоминающимся дизайном. Сложная анимация, 3D-персонажи и интерактивные элементы превратили обычный лендинг в технологичный продукт, который идеально соответствует позиционированию школы. Заказчик теперь может самостоятельно управлять всеми разделами: добавлять новые курсы, посты в блог, обновлять примеры работ. Интеграция с PayAnyWay значительно упростила процесс оплаты и сократила путь клиента до покупки, что положительно сказалось на конверсии. Несмотря на множество итераций и доработок, команда сохранила дружеские отношения с клиентом, и он продолжает обращаться к нам за новыми задачами, доверяя нам развитие своего цифрового продукта. [/case_summary]

Технологии