МГУ и ВТБ запустили совместный проект, направленный на поддержку и развитие в России школы финансовой математики, а также подготовку высококвалифицированных специалистов финансовой индустрии. Мы, VIS - digital integrator, создали платформу для Института, где студенты найдут подробную информацию о предстоящих курсах, лекторах и спикерах.
Задача клиента
Создание мультиязычного проекта «под ключ» для размещения информации о Фонде, курсах и лекторах, а также для записи на занятия. Данная платформа – лишь первый этап в разработке закрытого образовательного портала с обширными правами доступа. После окончания всех работ студентам, преподавателям и научным сотрудникам станет доступна площадка, где они смогут обучаться и проводить исследования. Там они найдут записи лекций, базу знаний, домашние задания, тестирования и многое другое.
Решение
Так как проект разрабатывался с нуля, первой задачей стало прототипирование. У клиента не было референсов и представления о том, как должен выглядеть сайт, поэтому мы создали более десятка вариантов прототипов. После их защиты перед заказчиком была утверждена окончательная версия.
Проект построен на платформе Битрикс24 корпоративный портал, так как в перспективе планируется запуск учебного портала (личного кабинета) и интранет для проектной работы. Реализация проекта выполняется без кастомизаций штатных компонентов, с использованием Rest Api, что позволит в будущем оперативно проводить процедуру обновления платформы. Мы полностью подготовили и настроили Битрикс-окружение и сервер. В результате сайт выдерживает высокие нагрузки и позволяет принять большой поток пользователей.
Дизайн полностью оригинален, в его разработке использовались только новые приемы веб-дизайна UX/UI. Заказчик предоставил брендбук, на который мы опирались при создании макета. В итоге проект получился лаконичным и функциональным, выполненным в фирменном стиле клиента. Его особенностью стали блоки, которые отображают большое количество информации о курсах, но при этом сохраняют визуальную легкость, а также изменение вида слайдера в зависимости от того, какой тип информации введен:
Большинство кликабельных элементов имеют разную механику взаимодействия, что облегчает пользование ими:
Информацию на сайте можно найти с помощью поисковой строки. Она выводит только те данные, которые расположены в открытых разделах:
Для дополнительного удобства разработано три типа меню. Первое появляется в шапке при прокрутке экрана вниз:
Боковое меню разворачивается при нажатии на кнопку в левом верхнем углу:
Третье меню расположено в футере:
Чтобы записаться на курс, пользователям необходимо подать заявку. Для этого создана многофункциональная форма, где каждой группе (студентам, аспирантам, преподавателям, научным сотрудникам и т.д.) открываются соответствующие поля для заполнения. Для некоторых категорий разворачивается дополнительное меню с вариантами выбора. Внедрена визуальная валидация для полей, которые выделяются синим, если информация введена корректно, и красным – если поле осталось пустым или заполнено неверно. После заполнения формы администрация Института вручную проверяет данные на достоверность и только после этого одобряет заявку.
Курсы проводятся на русском и английском языках, поэтому сайт необходимо было сделать мультиязычным, в связи с чем была разработана версия на английском. При этом контент отдельно контролируется для разных локаций. Если обязательные свойства (название, ФИО) не заполнены на одном из языков, их вывод будет происходить только в той локации, где информация внесена.
Так как пользователи, и особенно студенты, часто просматривают страницы на смартфоне, сайт был адаптирован под мобильные устройства и все виды браузеров.
Заключение
В результате работы был создан многостраничный корпоративный сайт на русском и английском языках, отвечающий всем требованиям и пожеланиям заказчика. Выполнен полный спектр работ от прототипирования и разработки дизайна до программирования и внедрения. Реализованы адаптивные версии для мобильных устройств, поддерживается кроссбраузерность. Проект является стартовой платформой для студентов, на которой они смогут получить доступ к закрытому учебному порталу.