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

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

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

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

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

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

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

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

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

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

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

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