Onlinekurs.ru

Информация о проекте

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

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

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

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

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

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

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

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