Разработка интерфейса сайта для Школы Видео

В этой статье предлагаю посмотреть на результат нашего совместного труда с ребятами из проекта «Укротитель Геткурс».

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

Давайте разберём самые интересные моменты. Для удобства я разбил скриншот на логические блоки.

Логические блоки сайта

Левое меню

Да, мы снова переделали стандартное боковое меню до неузнаваемости))
Пока что ни один ЛК не обошёлся без него) Просто многие не догадываются, что с помощью скриптов можно, полностью убрать левое меню и переместить наверх, например. Кстати, неплохая идея, чтобы выделиться среди других школ на ГК 😉

Заметили, что в этом меню почти не осталось стандартных кнопок? Из-за этого админы совсем не могут им пользоваться. Поэтому мы сделали так, чтобы это меню видели только ученики. При этом админы и сотрудники видят стандартное.

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

Верхнее меню

🟪 Фиолетовый блок

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

🟦 Голубой блок

Тут пользователь может увидеть свой текущий "бонусный баланс".

🟧 Оранжевый блок

В нём выводится кол-во баллов, которые набрал пользователь.

Основоной контент страницы

🟩 Зелёный блок

Это просто красивые кликабельные промо-картинки, которые можно вставить даже через стандартный редактор страницы))

🟨 Жёлтый блок

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

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

🟥 Большой красный блок внизу

А это тренинги, к которым у пользователя доступа нет. При клике на них пользователя перекидывает на страницу продажи.

Как вам? Хотите так же? 😋