Цифровой музей истории СибГМУ

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

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

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

The anniversary website of Siberian State Medical University can be called an interactive film. Accompanied by the speaker's speech and the sounds of music, the user goes on a journey through the university's past. He gets acquainted with the history of the university, where representatives of dynasties of doctors have been studying and working for 135 years. Learn about the fates of great doctors and discoveries made at Siberian State Medical University. He sees what the life of students looked like then, and what the everyday life of students consists of now.

This is an innovative resource that not only emphasizes the importance of history for the development of universities and medicine. The site involves more people in celebrating the anniversary and strengthens the presence of Siberian State Medical University on the Internet. At the end of the holiday, the resource will become the site of the Museum of the History of Cathedral Scientific Schools.

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

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

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

Анимированный фон выполнен в технике «градиент», которая кинематографично воссоздает ощущение погружения в прошлое.

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

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

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

The goal of the project is to create a website for the 135th anniversary of Siberian State Medical University, which:
• lovingly tells the large-scale and fascinating history of the university;
• promotes festive events among Tomsk residents;
• advertises the university among students, employees, applicants, graduates and residents of other regions.

The structure of the site is built around key events from the history of Siberian State Medical University, which goes far into the past. The design, in turn, uses many elements reminiscent of old photo albums.

The animated background is made using a gradient technique that cinematically recreates the feeling of being immersed in the past.

In the foreground is the DNA helix — it consists of more than ten thousand individual particles combined into one model. The spiral rotates around its axis and reacts to scrolling; small particles move chaotically around it.

Facts about the educational institution are also presented in the form of a quiz. The results can be shared on social networks — this is a tool for promoting the resource, events and the university itself.

The anniversary site, recognized by many as a work of art, evokes emotions and feelings. When watching, even those who have never been associated with Siberian State Medical University feel nostalgia for the bright and memorable times of the university.

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

Сайт основан на впечатляющих скролл-эффектах и бесшовных переходах, реализованных с использованием библиотеки Barba.js. Это обеспечило более плавное и интерактивное взаимодействие с контентом.

Кроме того, мы интегрировали 3D-эффекты, созданные с помощью библиотеки Three.js и шейдерного программирования. Это позволило добавить глубину и объем к элементам сайта, делая его более привлекательным.

Фон приобрел уникальный вид благодаря манипуляциям с шумом Перлина. Была собрана геометрия, состоящая из множества частиц, и преобразована в форму ДНК при помощи формулы построения спирали.

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

The site is based on impressive scrolling effects and seamless transitions, implemented using the Barba.js library. This provided a smoother and more interactive experience with content.

In addition, we integrated 3D effects created using the Three.js library and shader programming. This allowed us to add depth and dimension to the site's elements, making it more attractive.

The background took on a unique look thanks to Perlin noise manipulation. The geometry, consisting of many particles, was assembled and converted into the form of DNA using the formula for constructing a helix.

On the detailed story pages, we used shader textures, which allowed us to blend them seamlessly into the background composition.

Прочая информация о кейсе

На сайте присутствуют звуковые эффекты: речь диктора, фоновая музыка, которая специально подбиралась для создания соответствующей атмосферы, и звуки кнопок. Вместе с системой плавных переходов между страницами они помогают глубже погрузиться в историю вуза. Уникальные элементы дизайна, например переливающиеся кнопки и карточки с личностями, были сделаны с помощью шейдеров, специальных программ для видеокарты. Органичная работа 3D-моделей, анимаций и переходов позволяет добиться эффекта цельной страницы.

The site contains sound effects: the speaker's speech, background music that was specially selected to create the appropriate atmosphere, and button sounds. Together with a system of smooth transitions between pages, they help to dive deeper into the history of the university. Unique design elements, such as iridescent buttons and personality cards, were made using shaders, special programs for the video card. The organic work of 3D models, animations and transitions allows you to achieve the effect of a solid page.

Скриншоты