Геммологический центр МГУ им. М.В. Ломоносова

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

Прошло 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

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