Геммологический Центр МГУ

www.gem-center.ru
Геммологический центр МГУ им. М.В. Ломоносова — признанный в России и за рубежом центр исследования драгоценных камней.

Адаптивный
дизайн
Личный кабинет
Английская
версия
InterLabs CMS
Система
дистанционного
образования

Проектирование

Прошло 10 лет после разработки нами первой версии сайта. За это время появилось множество новых страниц и разрослись разделы. Требовалось не только визуальное обновление, но и глубокий пересмотр структуры сайта.

Версия сайта 2010 года
2010–2019
10 70 страниц

Одной из первый задач стало составление карты текущей версии сайта с реальными страницами и контентом и её адаптации под новую структуру.

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

01 карта сайта 2010

Главная страница
Исследования
Оборудование
Экспертиза
Информационный центр
Консалтинг
Диагностика
Сертификация
Новости
Расписание курсов
Очное обучение
Дистанционное обучение
Клуб выпускников
страницы, не связанные со своим разделом

02 структура 2020

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

1
информация
о центре, о камнях,
фотогалереи
и новости
2
образование
курсы
и дистанционное
образование
3
путешествия
набор желающих
и организация
поездок
4
лаборатория
экспертиза
и сертификация
5
ассоциация
сообщество
и мероприятия
Т.к. функционал и структура личного кабинета не требовали серьезных изменений, было решено просто обновить его интерфейс, после утверждения стилистики нового сайта.

03 концепции

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

Прототип
Концепция 1
Концепция 2

04 финальная версия

Итоговый вариант главной страницы получил современный, аккуратный вид — меню лаконично убрано в бургер, основные блоки ведут
на главные разделы сайта.

Дизайн

Были выделены основные цвета: цвет тиффани и глубокий синий, которые безусловно ассоциируются с цветовой гаммой натуральных камней. Также были определены основные стили кнопок и элементов
для проектирования последующих страниц.

Внутренние страницы

После определения основных стилей, мы начали разрабатывать дизайн внутренних страниц. Всего по составленной карте получалось более 100 страниц. Стояла непростая задача объединить такой большой объем информации стилистически, и при этом не сделать его скучно-однотипным. Оформление многих блоков зависело от контента, который предоставлял клиент. Работа велась по направлениям:

  • учебные программы
  • лаборатория
  • путешествия
  • инфоцентр
  • личный кабинет

учебные программы

Особое внимание было уделено разделу «Учебные программы». Мы объединили стилистически курсы по разным направлениям (дистанционное образование, курсы гем-академии, очные курсы МГУ). Отдельно проработаны страницы каждого курса и расписание.

лаборатория

Для лаборатории был показан удобный способ проверки выданных документов с помощью QR-кода. Оформлены страницы с экспертным заключением, сертификатами и тарифами.

Проверка по QR - коду.
На всех экспертных заключениях нового образца изображен индивидуальный QR-код для верификации.

путешествия

В разделе все поездки можно отсортировать с помощью фильтра. Для просмотра доступны два формата отображения анонсов: полный
и компактный. Также проработана детальная страница тура.

инфоцентр

Раздел включал в себя несколько подразделов с различной по типу информацией. Это и стандартный новостной подраздел, и фотогалерея,
и библиотека со статьями. Для подраздела «Энциклопедия» отдельно проработали дизайн страницы «Глоссарий» с алфавитной навигацией.

личный кабинет

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

Особенности реализации

01 функционал СДО

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

После изучения пользователь может пройти онлайн-тестирование на время с сохранением всей статистики по пройденным тестам.
Также система имеет специальный форум для переписки учащегося с тьютором.

02 адаптация контента

Перенесли контент со старого сайта и адаптировали его под новый дизайн. После переноса дополнительной задачей стало «почистить» старые стили вёрстки, которые были встроены на некоторых страницах, имеющих уникальное форматирование. В итоге страницы были приведены
в единую стилистику с одинаковым форматированием.

заголовки
H1
font family: “Proxima Nova”; font-size: 60/73;
ссылки
font-size: 22/160; color: #2ABDBD;
основной текст
font-size: 18/160; color: #333333;
изображения и видео
<div align="left">
01
02
03
04

03 адаптивный дизайн

Все страницы сайта легко адаптируются под разрешения различных устройств.

1920х1080
768х1024
1024х768
320х568

Отзыв клиента