{"id":13465,"url":"\/distributions\/13465\/click?bit=1&hash=1e6228dc4e5e22730d5108e1c30ee96b3462205737e7a3fe7ce4c965aaacfe57","title":"\u041a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f Ozon \u2014 \u043a\u043e\u043c\u0443, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0440\u0438\u0437\u0438\u0441","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6b1e0c55-41d3-56c2-84e2-fe6f447e3825","isPaidAndBannersEnabled":false}
VIS - digital интегратор

Разработка корпоративного сайта для "Института "Вега" - совместного проекта МГУ и ВТБ

МГУ и ВТБ запустили совместный проект, направленный на поддержку и развитие в России школы финансовой математики, а также подготовку высококвалифицированных специалистов финансовой индустрии. Мы, VIS - digital integrator, создали платформу для Института, где студенты найдут подробную информацию о предстоящих курсах, лекторах и спикерах.

Задача клиента

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

Решение

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

Проект построен на платформе Битрикс24 корпоративный портал, так как в перспективе планируется запуск учебного портала (личного кабинета) и интранет для проектной работы. Реализация проекта выполняется без кастомизаций штатных компонентов, с использованием Rest Api, что позволит в будущем оперативно проводить процедуру обновления платформы. Мы полностью подготовили и настроили Битрикс-окружение и сервер. В результате сайт выдерживает высокие нагрузки и позволяет принять большой поток пользователей.

Дизайн полностью оригинален, в его разработке использовались только новые приемы веб-дизайна UX/UI. Заказчик предоставил брендбук, на который мы опирались при создании макета. В итоге проект получился лаконичным и функциональным, выполненным в фирменном стиле клиента. Его особенностью стали блоки, которые отображают большое количество информации о курсах, но при этом сохраняют визуальную легкость, а также изменение вида слайдера в зависимости от того, какой тип информации введен:

Слайдер на главной странице
Изменение вида слайдера
Информационные блоки

Большинство кликабельных элементов имеют разную механику взаимодействия, что облегчает пользование ими:

При наведении курсора элемент выделяется

Информацию на сайте можно найти с помощью поисковой строки. Она выводит только те данные, которые расположены в открытых разделах:

Строка поиска

Для дополнительного удобства разработано три типа меню. Первое появляется в шапке при прокрутке экрана вниз:

Верхнее меню

Боковое меню разворачивается при нажатии на кнопку в левом верхнем углу:

Боковое меню

Третье меню расположено в футере:

Футер

Чтобы записаться на курс, пользователям необходимо подать заявку. Для этого создана многофункциональная форма, где каждой группе (студентам, аспирантам, преподавателям, научным сотрудникам и т.д.) открываются соответствующие поля для заполнения. Для некоторых категорий разворачивается дополнительное меню с вариантами выбора. Внедрена визуальная валидация для полей, которые выделяются синим, если информация введена корректно, и красным – если поле осталось пустым или заполнено неверно. После заполнения формы администрация Института вручную проверяет данные на достоверность и только после этого одобряет заявку.

В выпадающем меню заявки можно выбрать род занятий
Для некоторых категорий открывается дополнительное выпадающее меню
Поля для заполнения меняются в зависимости от выбранной категории

Курсы проводятся на русском и английском языках, поэтому сайт необходимо было сделать мультиязычным, в связи с чем была разработана версия на английском. При этом контент отдельно контролируется для разных локаций. Если обязательные свойства (название, ФИО) не заполнены на одном из языков, их вывод будет происходить только в той локации, где информация внесена.

Главная страница в англоязычной версии

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

Вид на смартфоне

Заключение

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

0
Комментарии
Читать все 0 комментариев
null