Оформление GetCourse
для «Prokeratin академии»
Адаптивная верстка главной страницы курса, модулей и списка уроков.
Разработка динамической карты, фразы дня и "растущего" персонажа.
Задача
Что было до
-
Устаревшее оформление
Дизайн курса уже приелся — требовалось освежить визуал для нового потока обучения.
-
Медленная загрузка
Страницы грузились долго из-за тяжелого кода. Нужно было провести аудит и оптимизировать.
Что нужно было сделать
- Сделать редизайн главной страницы курса
- Сделать редизайн страниц со списком модулей
- Сделать редизайн страниц со списком уроков
- Провести аудит кода и оптимизировать загрузку страниц
- Реализовать динамическую карту — путь меняется в зависимости от прогресса ученика
- Добавить «Фразу дня» — случайная фраза из списка, которая обновляется каждый день
- Создать «Персонажа», который растёт вместе с прогрессом обучения
Что было сделано?
01
Анализ текущего оформления
Изучил текущее оформление курса, проверил код на наличие «тяжелых» элементов и неиспользуемых стилей.
- Проверил размер шрифтов и медиафайлов
- Нашёл дублирующиеся стили
- Составил план работ по редизайну
02
Редизайн страниц
Полностью обновил дизайн главной страницы курса, списка модулей и уроков. Сделал оформление современным и удобным для учеников.
- Переработал навигацию — сделал её интуитивно понятной
- Обновил визуальные элементы (карточки, кнопки, иконки)
- Адаптировал все страницы под мобильные устройства
03
Динамическая карта и фичи
Реализовал интерактивные элементы, которые делают обучение более увлекательным и персонализированным.
- Динамическая карта: путь меняется в зависимости от прогресса ученика
- Фраза дня: автоматически обновляется из заготовленного списка
- Персонаж: растёт вместе с учеником, мотивируя продолжать обучение
Результат
Главная страница курса
Было
Стало
Список модулей
Было
Стало
Список уроков
Было
Стало
Видео-обзор
