Основной сайт СибГМУ: трендовый дизайн и классическое представление медицины

Основной сайт СибГМУ — это не только эстетически привлекательный ресурс, но и главный системный проект вуза, который эффективно представляет его в онлайн-пространстве. Паравеб рассказывает, как удалось создать легкую для восприятия платформу, где сложный контент стал максимально доступным для абитуриентов, студентов, сотрудников и партнеров.

Прошлая версия основного сайта СибГМУ была создана в далеких 2010-х годах. Вуз разработал ресурс на уникальном коде — тогда такой подход обеспечивал оригинальность и индивидуальность платформы. Однако в 2023 году это решение лишь усложняло поддержку сайта:

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

В отличие от широко используемых фреймворков уникальный код был менее устойчив к угрозам безопасности. Отсутствие регулярных обновлений безопасности делало сайт уязвимым для атак злоумышленников.

Уникальный код менее гибкий по сравнению с распространенными фреймворками. Из-за этого возникали трудности при расширении функционала сайта или увеличении числа пользователей.

Уникальный код был несовместим с некоторыми браузерами и устройствами, из-за чего у части пользователей не получалось воспользоваться ресурсом.

Функциональность уникального кода была ограниченной по сравнению с тем, что предоставляют популярные фреймворки. От этого напрямую зависела возможность развития и улучшения сайта в будущем.

СибГМУ критически нуждался в обновлении основного сайта, а потому обратился к нам. С 2019 года Паравеб активно помогает вузу с цифровизацией. За это время агентство разработало для университета 15 проектов: сайты, мобильные приложения и системы личных кабинетов.

СибГМУ — один из ведущих медицинских вузов страны, при котором также работает сеть многопрофильных клиник. И хотя Паравеб сотрудничает с университетом более четырех лет, прежде чем приступить к разработке нового ресурса, мы решили посетить его лично.

Встреча с руководителями СибГМУ позволила нам получить более глубокое представление о целях, ценностях и культуре учебного заведения. Мы установили с заказчиком более тесные отношения и пришли к взаимопониманию — это повысило доверие клиента и упростило коммуникацию в процессе разработки.

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

На увлекательной экскурсии по кампусу мы прочувствовали атмосферу СибГМУ: сотрудники провели нас по аудиториям и лабораториям, где каждый день учатся будущие врачи и работают опытные специалисты. Собственные научные разработки, современное оборудование и выдающиеся преподаватели — эти сильные стороны вуза, которые было необходимо отразить на новом ресурсе.

На главной странице мы выделили три ключевых направления деятельности организации — образование, медицинские услуги и научные исследования — представив их в виде краткого, но запоминающегося слогана: «Учим. Лечим. Создаем». Он является частью брендинга, быстро объясняет, чем занимается учебное заведение. Также слоган служит источником мотивации для текущих и будущих студентов и сотрудников, подчеркивая чувство гордости и принадлежности к вузу. А интерактивный блок с интересными фактами предлагает пользователям быстро получить общее представление об университете, не тратя много времени на поиск информации: по клику меняются случайные факты, раскрывающие тайны богатой истории вуза.

При разработке сайта мы придерживались дизайн-системы, созданной нами в рамках предыдущих проектов. Подробнее о том, зачем СибГМУ нужна дизайн-система и в чем ее особенности, читайте в этом кейсе.

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

Чтобы избежать дискомфорта и усталости у пользователей при длительном пребывании на ресурсе, мы предложили вузу компромиссное решение. В новом дизайне мы сбалансировали количество красного со спокойным белым и приглушенным синим. В медицинской сфере красный и синий воспринимаются как парные цвета, которые ассоциируются с венозной и артериальной кровью, а белый — как цвет чистоты и стерильности.

Структура платформы отражает масштаб СибГМУ. Мы полностью переработали навигационное меню, теперь оно облегчает поиск информации, и адаптировали его для различных экранов, что особенно важно в современном мире мобильного интернета. Простой и интуитивно понятный дизайн позволяет быстро перемещаться по сайту — до основных разделов можно добраться всего в два-три клика.

На сайте используется доступный язык — даже о правилах, политиках и другой важной документации вуз рассказывает в простом формате, чтобы широкая аудитория, незнакомая с академическими терминами, легко воспринимала эту информацию.

На первом экране главной страницы пользователей встречает вдохновляющее презентационное видео, которое иллюстрирует, как и где учатся студенты СибГМУ. Ресурс насыщен аутентичными фотографиями и видеороликами учебного заведения — такой прием и раньше нравился университету, мы удачно использовали его на платформе ДПО. Контент о повседневной жизни вуза создает позитивный образ и показывает абитуриентам, насколько активной, разнообразной и интересной может быть студенческая жизнь.

Также на сайте есть реальные отзывы студентов и выпускников, чтобы абитуриенты принимали решение о поступлении, учитывая опыт других. Истории успеха, отзывы о качестве образования и благоприятной социальной среде могут мотивировать их.

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

Анимированные переходы между страницами, эффекты при наведении мыши и другие декоративные элементы не отвлекают пользователя, а дополняют контент, при этом не перегружая ресурс и сохраняя его официальный стиль.

После вступительного видеоролика на главной странице пользователей встречают блоки «Новости» и «События». Они демонстрируют динамику и активность университета, привлекая абитуриентов и партнеров, и помогают студентам и преподавателям ориентироваться в происходящем.

Заголовки новостей автоматически «подтягиваются» на основной сайт с медиапортала — это отдельный ресурс, где вуз публикует свои новости и фотографии. Каждая новость, в зависимости от ее категории, направляется на соответствующую страницу, а не только на главную. Данные эффективно синхронизируются между сайтами в реальном времени.

Блок «События» интегрирован с календарем в системе личных кабинетов СибГМУ. С его помощью университетское сообщество может подавать заявки на публикацию своих мероприятий. Заявка содержит общую информацию о событии, включая дату, место проведения, категорию, фотографии и ссылку на регистрацию. После подачи заявка поступает на согласование ответственному через 1С: Документооборот, а затем передается пресс-службе медиапортала, которая редактирует мероприятие и публикует его.

Интерактивная карта облегчает ориентацию на территории вуза для абитуриентов, студентов, преподавателей и посетителей. Для поступающих это удобный и интересный способ исследования кампуса до того, как они примут решение о поступлении.

Мы цифровизировали карту Томска, включая дороги и здания, используя передовые технологии GL. Анимации и эффекты улучшают визуальное восприятие карты и позволяют оценить масштаб кампуса в контексте всего города.

Хотя большая часть объектов размыта и лишена рельефа, кампус СибГМУ детализирован и выделен ярким цветом. С помощью фильтра можно настраивать видимость объектов в соответствии с типом — учебные корпуса, клиники, лаборатории и общежития. По клику на здание отображается его адрес и ссылка для перехода к подробной информации.

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

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

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

Вуз продолжает использовать персонажей факультетов — врачей-супергероев, созданных для сайта абитуриента. Недавно в учебном заведении появился «Институт здравоохранения», для которого мы также разработали своего персонажа — успешную бизнесвумен в области медицины. Такой образ обусловлен тем, что в институте учат не только сестринскому делу, социальной работе, клинической психологии, но и менеджменту.

Мы создали масштабируемую систему, позволяющую с легкостью собирать страницы из имеющихся компонентов, сохраняя структуру и дизайн сайта. Например, блок с презентационным видеороликом легко адаптировать под образовательные сезоны, используя систему управления контентом. В летний период он может транслировать информацию для абитуриентов, а осенью, по завершении фазы приемной кампании, — полезную информацию для первокурсников.

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

Единая система управления данными автоматизирует обновление информации о студентах, преподавателях, факультетах, кафедрах, лабораториях, управлениях, программах, структуре университета, ректоре, расписаниях и других аспектах учебного процесса. Надежная синхронизация данных между различными системами предотвращает ошибки и дублирование информации.

Например, детальные страницы сотрудников автоматически формируются и регулярно обновляются за счет интеграции с мастер-системой 1С. Когда сотрудник добавляет новую публикацию в свое научное портфолио через личный кабинет, после подтверждения она мгновенно появляется на его детальной странице. В случае изменений в штате или смены руководителя подразделения, информация о новом сотруднике автоматически отображается на основном сайте.

Мы смогли создать ресурс благодаря плодотворному взаимодействию с сотрудниками университета. В процессе проектирования активно участвовали руководители всех направлений развития «Приоритет 2030», проректоры и представители ключевых подразделений СибГМУ. Каждый этап разработки, начиная с прототипов, тщательно обсуждался и согласовывался с курирующим проректором и другими работниками вуза. Особо следует подчеркнуть вклад ректора: на протяжении всей истории нашего взаимодействия с вузами, Евгений Куликов проявил себя как наиболее деятельный участник процесса разработки со стороны университета. Он активно поощрял своих подчиненных к более вовлеченной работе над проектом для его успешной реализации. Мы внимательно прорабатывали каждый раздел, учитывая мнение всех ответственных за проект. Представители университета были вовлечены в сбор контента — их профессиональный вклад помог сделать платформу более содержательной и полной.

Ссылка на сайт: https://ssmu.ru/