ReSkill — дизайн и интеграция Getcourse

Старый дизайн

Старая версия дизайна

Главная страница

Страница курса

Страница модуля

Страница урока

Библиотека

Для начала мы поменяли цвета и шрифты нашего готового решения на клиентские.

Все легкло просто отлично. Надо только добавить деталей фирменного стиля, чтобы разбавить однотонный фон.

Дизайн основных страниц

По главной странице все было просто изначально. Клиент хотел курсы в 3 колонки — мы сделали курсы в 3 колонки и кроме заголовка здесь больше нет элементов.

Идём на страницу модуля. Берем картинки модулей из текущего кабинета, но только из другого курса. Справа оставляем место под боковую панель с расписанием и кнопками обратной связи.

Но надо проработать модули без обложек, не к каждой неделе будешь делать отдельную обложку.

Начинаем перебирать варианты обложек

Нам понравился последний вариант, но клиенту он кажется пустоватым. Ему нравится первый и последний вариант. Попросил скрестить.

Делаем гибрид.

Примеряем в дизайн — больше подходит версия без фона, так как расписание делаем акцентным фиолетовым цветом.

Сейчас не нравится шапка. Находим фото в фирменном стиле — добавляем в шапку.

Отлично! Теперь шапка задаёт настроение.

Идём делать расписание на страницы.

Делаем 5 вариантов. Клиент тяготеет к последнему варианту, но пока в раздумьях. Идём делать что-то другое.

На всех страницах в правой части будет расписание и кнопка обратной связи. Надо заняться этой кнопкой.

Делаем обычную кнопку по UI-киту. Но она какая-то скучная и неприметная.

Добавляем Никиту и Алину. Вроде бы стало лучше, но всё равно плохо.

Меняем белый цвет на фиолетовый и уменьшаем массу. Стало лучше, но всё сливается.

Меняем композицию. Выглядит лучше. Не нравится текст в этажа и неявная кнопка.

Текст делаем в 2 строки, меняем положение фото и делаем явной кнопку написать.