Задача:Разработать новый дизайн для личного кабинета ученика и перенести его на на платформу GetCourse

Дизайн и верстка готовы:

  • Страница входа
  • Боковая панель
  • Главная страница тренингов
  • Страница курса
  • Списки уроков / подтренингов
  • Шаблон уроков
  • Шаблоны писем

Процесс работы

Начало сотрудничества

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


Но в этом проекте мы созвон заменили на записанный клиентом скринкаст, в котором он подробно рассказал, что уже у них есть, что им не нравится в старом дизайне, на что нужно обратить внимание.

Также клиент прислал референсы дизайнов, которые им нравятся и которые НЕ нравятся.


Изучив все, я отправила клиенту смету, он оплатил предоплату и мы приступили к преображению Геткурса.

РАЗРАБОТКА ДИЗАЙНА

Подбор шрифтов, цветовой палтиры, иконок....

Начала я с боковой панели и главной страницы тренингов.


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


Оформление тренингов. 3 вида карточек: бесплатные материалы с иконкой подарка, недоступные тренинги с замочкоми эффектом неактивности, доступные тренинги.


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

Верстка

Перенос макета из фигмы на платформу Геткурс. Верстка была реализована кодом (html, css, js)

Инструкции для клиента

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

Ссылка на это место страницы: #contacts

Оксана Иванова

веб-дизайнер, верстальщик

Связаться в мессенджере:

Написать в Telegram

Написать в whatsapp