Описание

Требуется современная интерактивная обучающая платформа для внутреннего курса по искусственному интеллекту.

Основные требования:
• сделать обучение максимально простым и понятным даже для сотрудников без технической подготовки;

• отказаться от скучных PDF и презентаций в пользу современной веб-платформы;

• объединить видеоматериалы, презентации, задания, практические упражнения и внешние AI-сервисы в едином интерфейсе;

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

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

Решение

Для реализации проекта была разработана кастомная HTML/CSS/JavaScript-платформа без использования тяжёлых CMS и шаблонов.

В ходе разработки были выполнены:
• проектирование структуры курса и логики навигации;
• разработка единого дизайн-шаблона для всех уроков;
• создание интерактивной главной страницы с карточками занятий;
• разработка шаблона уроков с единым стилем оформления;
• интеграция видеоматериалов, презентаций, PDF-документов, внешних AI-сервисов и практических заданий;
• реализация адаптивного интерфейса;
• создание динамического анимированного фона в виде нейронной сети;
• разработка собственной системы анимации нейронов, реагирующей на заголовки, кнопки и интерактивные элементы страницы;
• настройка эффектов подсветки элементов интерфейса;
• разработка единой системы карточек действий с автоматическим выравниванием независимо от количества кнопок;
• оптимизация скорости работы и плавности анимаций;
• создание универсального шаблона, который позволяет за несколько минут выпускать новые уроки с полностью одинаковым стилем оформления.

Особое внимание UX-дизайну — каждая мелочь (движение нейронов, плавность переходов, свечение элементов, расположение карточек и визуальная композиция) многократно дорабатывалась до получения максимально естественного восприятия.

Результат

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

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

Платформа позволяет:
• быстро запускать новые курсы без переработки дизайна;
• легко расширять программу обучения новыми уроками;
• объединять различные форматы материалов в одном интерфейсе;
• повышать вовлечённость сотрудников благодаря современному UX.

Разработанный шаблон используется как единая основа для всего корпоративного курса по искусственному интеллекту и позволяет существенно сократить время создания новых учебных модулей.

Презентация проекта