Официальный сайт СибГМУ

Главное о кейсе

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

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


The main website of SSMU is not only an aesthetically attractive resource, but also the main system project of the university, which effectively presents it in the online space. We managed to create an easy-to-perceive platform, where complex content became maximally accessible to applicants, students, employees and partners of the university.

SibSMU was in dire need of updating its main website, so it contacted us. Since 2019, Paraweb has been actively helping the university with digitalization. During this time, the agency has developed 15 projects for the university: websites, mobile applications, and personal account systems.

Как проект изменил жизнь пользователей

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

Зависимость от конкретных разработчиков

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

Слабая безопасность

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

Сложности в масштабировании

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

Отсутствие совместимости

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

Ограниченные возможности

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

Бизнес-задача и ее решение

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

Цветовая палитра

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

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

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

Структура

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

Контент

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

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

Медиапортал

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

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

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

Студенческая жизнь

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

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

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


The previous version of the main website of SSMU was created in the distant 2010s. The university developed the resource on a unique code — at that time, this approach ensured the originality and individuality of the platform. However, in 2023, this decision only complicated the support of the site.

Dependency on specific developers

Only employees familiar with the code could make changes to it. This became a problem if the developers left the university and did not leave access and instructions for the future. Even highly qualified specialists found it difficult to immediately understand the code written specifically for the university.

Weak security

Unlike widely used frameworks, the unique code was less resistant to security threats. The lack of regular security updates made the site vulnerable to attacks by intruders.

Difficulty with scaling

The unique code is less flexible than common frameworks, which made it difficult to expand the functionality of the site or increase the number of users.

Lack of compatibility

The unique code was incompatible with some browsers and devices, which is why some users were unable to use the resource.

Limited capabilities

The functionality of the unique code was limited compared to what popular frameworks provide. The possibility of developing and improving the site in the future directly depended on this.

On the main page we highlighted three key areas of the organization’s activities - education, medical services and scientific research — presenting them in the form of a short but memorable slogan: “We teach. We treat. We create.” It is part of the branding, quickly explains what the educational institution does. The slogan also serves as a source of motivation for current and future students and employees, emphasizing a sense of pride and belonging to the university. And an interactive block with interesting facts offers users a quick overview of the university without spending a lot of time searching for information: random facts change at the click, revealing the secrets of the rich history of the university.

Colour palette

When developing the site, we adhered to the design system we created in previous projects.

And although the university is not afraid of experiments (the university launched a career platform in a dark version), the colour palette of the new resource has become a reason for debate. The main wish of the client was the maximum use of corporate red. But the abundance of this shade can reduce the usability of the site, since it is tiring for the eyes and is often associated with danger and warning signals.

To avoid discomfort and fatigue in users during a long stay on the resource, we offered the university a compromise solution. In the new design, we balanced the amount of red with calm white and muted blue. In the medical field, red and blue are perceived as paired colours that are associated with venous and arterial blood, and white is the colour of purity and sterility.

Structure

The platform structure reflects the scale of SSMU. We have completely redesigned the navigation menu, now it makes it easier to find information, and adapted it for different screens, which is especially important in the modern world of mobile Internet. Simple and intuitive design allows you to quickly navigate the site — the main sections can be reached in just two or three clicks.

Content

The website uses accessible language — even rules, policies, and other essential documentation are explained in a simple format so that a wide audience unfamiliar with academic terms can easily perceive this information.
On the first screen of the main page, users are greeted by an inspiring presentation video that illustrates how and where SSMU students study. The resource is full of authentic photographs and videos of the educational institution — the university liked this technique before, and we successfully used it on the platform of additional education. Content about the daily life of the university creates a positive image and shows applicants how active, diverse, and interesting student life can be.

The website also contains real reviews from students and graduates so that applicants can make decisions about admission based on the experience of others. Success stories, reviews about the quality of education, and a favourable social environment can motivate them.

While the resource provides basic information for applicants, they are redirected to the applicant site so that they can get more detailed information about admission rules, document requirements, study programs and opportunities for students.

Media portal

After the introductory video, users are greeted by the News and Events blocks on the main page. They demonstrate the university's dynamics and activity, attracting applicants and partners, and help students and teachers navigate what is happening.

News headlines are automatically “pulled” to the main site from the media portal — this is a separate resource where the university publishes its news and photos. Each news item, depending on its category, is sent to the corresponding page, and not just to the main one. Data is effectively synchronized between sites in real time.

The Events block is integrated with the calendar in the SSMU personal accounts system. With its help, the university community can submit requests for the publication of their events. The request contains general information about the event, including the date, location, category, photos, and a link to registration. After submission, the request is sent for approval to the person in charge via 1C: Document Management, and then transferred to the media portal press service, which edits the event and publishes it.

Student Life

In the Student Life section, we used a bright design, unique effects and an individual structure. The page feels fun and youthful with plenty of lively animations, colourful photos, and vertical videos inspired by the Stories format of social media.

The section is focused on students as much as possible. For example, the Support block provides information on scholarships, psychological and financial assistance. A distinctive feature is the personalized approach: by clicking on Psychological Help, the student goes not to a simple phone book, as in many universities, but to a specialised section where the available types of support are described in detail.

New character
The university continues to use faculty characters — superhero doctors created for the applicant website. Recently, the educational institution has created an "Institute of Healthcare", for which we also developed our own character — a successful businesswoman in the field of medicine. This image is due to the fact that the institute teaches not only nursing, social work, clinical psychology, but also management.

Крафт (мастерство), реализация, технические детали

Интерактивная карта

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

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

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

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

Конструктор

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

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

1С

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

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


Interactive map

The interactive map makes it easier for applicants, students, teachers, and visitors to navigate the university campus. For applicants, this is a convenient and interesting way to explore the campus before they decide to enrol.

We have digitalized the Tomsk map, including roads and buildings, using advanced GL technologies. Animations and effects improve the visual perception of the map and allow you to assess the scale of the campus in the context of the entire city.

Although most of the objects are blurry and devoid of relief, the SSMU campus is detailed and highlighted in bright colour. Using a filter, you can adjust the visibility of objects according to type — academic buildings, clinics, laboratories, and dormitories. Clicking on a building displays its address and a link to go to detailed information.

The map is convenient to use not only from a computer, but also from mobile devices — students can search for the location of a particular academic building right before class.

Constructor

We have created a scalable system that allows you to easily assemble pages from existing components, while maintaining the structure and design of the site. For example, a block with a presentation video can be easily adapted to educational seasons using a content management system. In the summer, it can broadcast information for applicants, and in the fall, after the completion of the admissions campaign, it can broadcast useful information for first-year students.

All blocks on the site can flexibly change their location and interact with each other. If the university becomes part of a new project, development program, or the Ministry introduces new requirements, the university will be able to independently adapt to them, while maintaining a single site design.

1C

The unified data management system automates updating information about students, teachers, faculties, departments, laboratories, departments, programs, university structure, rector, schedules and other aspects of the educational process. Reliable data synchronization between different systems prevents errors and duplication of information.

For example, detailed pages of employees are automatically generated and regularly updated due to integration with the 1C master system. When an employee adds a new publication to their scientific portfolio through their personal account, after confirmation, it instantly appears on their detailed page. In the event of changes in staff or a change in the head of a department, information about the new employee is automatically displayed on the main site.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

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

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


SSMU is one of the leading medical universities in the country, which also operates a network of multidisciplinary clinics. And although Paraweb has been cooperating with the university for more than four years, before starting to develop a new resource, we decided to visit it in person.

Meeting with the heads of SSMU allowed us to gain a deeper understanding of the goals, values, and culture of the educational institution. We established closer relationships with the customer and came to a mutual understanding - this increased the client's trust and simplified communication during the development process.

During interviews with teachers and students, we identified the features and needs of the organization that were worth integrating into the design, functionality, and content of the site.

During a fascinating tour of the campus, we felt the atmosphere of SSMU: the staff took us through the classrooms and labs where future doctors study and experienced specialists work every day. In-house scientific developments, modern equipment, and outstanding teachers are the strengths of the university that needed to be reflected on the new resource.

We were able to create the resource thanks to fruitful interaction with the university staff. The heads of all development areas of “Priority 2030”, vice-rectors and representatives of key departments of SSMU actively participated in the design process. Each stage of development, starting with prototypes, was carefully discussed and agreed upon with the supervising vice-rector and other university employees. The contribution of the rector should be especially emphasized: throughout the history of our interaction with universities, Evgeny Kulikov proved himself to be the most active participant in the development process on the part of the university. He actively encouraged his subordinates to be more involved in working on the project for its successful implementation. We carefully worked through each section, taking into account the opinions of all those responsible for the project. University representatives were involved in collecting content — their professional contribution helped make the platform more meaningful and complete.

Скриншоты