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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

Верхнее меню
Верхнее меню

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

Боковое меню
Боковое меню

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

Футер
Футер

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

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

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

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

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

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

Заключение

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

Начать дискуссию