Кейсы
September 3, 2021

Разработка ЛК для онлайн-школы фотографии «Sensei School»

Вот и ещё один стильный ЛК сошёл с конвейера)) На этот раз разработка делалась по максимально минималистичному дизайну, который акцентирует внимание пользователя только на том, что ему нужно видеть.

Скриншот страницы тренингов

Как видите, распознать во всём этом платформу GetCourse уже абсолютно нереально. И это во многом благодаря тому, что теперь привычного левого меню нет (от слова "совсем"). Теперь, чтобы перейти в профиль или в другие настройки, пользователю нужно кликнуть на своё имя в верхнем меню.

Как видите, в меню у ученика остались только самые важные пункты.
Но, конечно, в отличии от учеников, админы и сотрудники видят стандартное меню, т.к. им нужно гораздо больше страниц для работы.

В целом, этот дизайн делался на основе стандартного оформления геткурса, т.е. у дизайнера изначально была цель, не менять интерфейс слишком сильно)) Поэтому некоторые элементы всё ещё отдалённо напоминают геткурс. Например, список уроков.

Скриншот страницы тренинга со списком уроков


Кстати, вот этот тёмный баннер над списком уроков, это не картинка, как многие спецы по геткурсу могли подумать :) Этот блок генерируется автоматически. Тут сделано так, что картинка тренинга и даты доступа к нему прописываются в описании тренинга (вручную), а специальный скрипт подтягивает эти данные оттуда и выводит в шапку тренинга.

Так было сделано потому что в этой онлайн-школе очень много тренингов, и картинок на них не напасёшься))

Конечно, можно было бы даты тренинга подтягивать из "Блока продления купленного продукта", но проблема в том, что в нём выводятся не все тренинги. И опять же из-за большого кол-ва тренингов настраивать это администраторам было бы намного сложнее.

Скриншот страницы урока


Страницы уроков претерпели минимальные изменения, в целом всё осталось, как и было в геткурсе, просто на все элементы были натянуты новые стили, чтобы они вписывались в дизайн))

По поводу синей плашки на видео-блоке не кидайтесь камнями, её нереально изменить в геткурсе (так же, как и кнопку "Play" на стандартном видеоплеере), т.к. эти элементы находятся внутри айфрейма с другим доменом))

Скриншот страницы "Мой профиль"

А вот и страница профиля — моя гордость)) Тут я прям превзошёл сам себя, т.к. переделал её практически полностью.

Для того, чтобы она чётко соответствовала дизайну, пришлось писать целую кучу скриптов, которые сортируют все поля настроек в нужном порядке и изменяют логику работы некоторых полей. Например, выбор пола и языка теперь делается кнопками, а не через <select>, как было раньше.

Если учесть ещё то, что на этой странице изначально не работают никакие скрипты и стили, то могу вам признаться, что застилизовать страницу профиля так, было ну прям очень сложно)

Скриншот страницы "Мои покупки"



Ну и, конечно, страница "Мои покупки" не осталась без внимания. Кстати, пока что это единственный проект, в котором её решили застилизовать. Что странно. Потому что на неё пользователи заходят тоже довольно часто. И если уж браться стилизовать геткурс под свой фирменный стиль, то надо доводить это дело до конца. На то он и есть "стиль", чтобы пользователи при каждом контакте с сайтом, чувствовали вашу уникальную профессиональную атмосферу.