ru en

Фонд содействия развитию науки «Институт «Вега»

Услуги

  • Разработка проекта с нуля
  • Прототипирование
  • UI/UX дизайн
  • Мультиязычная версия (ru/en)
  • Адаптивные версии
  • Кроссбраузерность
  • Верстка
  • Внедрение

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

Узнать больше о работе Фонда можно на сайте ВТБ и РИА Новости

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

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

Решение

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

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

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

Главная | Фонд содействия развитию науки «Институт Вега» 2021-06-10 19-21-39.pngpasted image 0.png
unnamed.png

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


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




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


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

верхнее меню.png

Боковое меню разворачивается при нажатии на кнопку в левом верхнем углу:
Главная | Фонд содействия развитию науки «Институт Вега» 2021-06-09 16-44-13.png

Третье меню расположено в футере:
Главная | Фонд содействия развитию науки «Институт Вега» 2021-06-10 19-24-19.png

Чтобы записаться на курс, пользователям необходимо подать заявку. Для этого создана многофункциональная форма, где каждой группе (студентам, аспирантам, преподавателям, научным сотрудникам и т.д.) открываются соответствующие поля для заполнения. Для некоторых категорий разворачивается дополнительное меню с вариантами выбора. Внедрена визуальная валидация для полей, которые выделяются синим, если информация введена корректно, и красным – если поле осталось пустым или заполнено неверно. После заполнения формы администрация Института вручную проверяет данные на достоверность и только после этого одобряет заявку. 
Курсы 2021-06-09 17-43-55.png
Курсы 2021-06-09 17-51-24.pngКурсы 2021-06-09 17-44-31.png

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

Home 2021-06-09 17-42-21.png
     
Так как пользователи, и особенно студенты, часто просматривают страницы на смартфоне, сайт был адаптирован под мобильные устройства и все виды браузеров.
мобильник.png

Заключение

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


Оставить заявку