Третье измерение: основной сайт ВолгГМУ

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

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

В марте 2025 года мы подписали контракт и приступили к полноценной работе над основным сайтом. Вместе с университетом нам предстояло найти ту самую дизайн-концепцию, которая станет лицом вуза на годы вперёд. Тогда мы ещё не знали, что этот поиск займёт почти половину всего проекта.

Образ будущего

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

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

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

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

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

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

Чистота и порядок

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

Это потребовало от ВолгГМУ серьёзной подготовительной работы. К моменту старта проекта структура университета в учётной системе нуждалась в систематизации: встречались дубли, неточная вложенность подразделений. Университет провёл большую работу по приведению данных в порядок, привлекая своих подрядчиков для доработки 1С.

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

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

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

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

Кроме того, мы настроили интеграцию всех форм обратной связи с CRM-системой университета. Заявки от абитуриентов, обращения через контакты подразделений, запросы от партнёров — все данные автоматически попадают в единую базу. Это позволило сотрудникам оперативно обрабатывать запросы, отслеживать историю коммуникаций и исключить потерю заявок. Для каждой формы можно настроить свою логику маршрутизации: например, заявки на поступление направляются в приёмную комиссию, а вопросы по сотрудничеству — в соответствующий отдел.

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

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

Живые клетки

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

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

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

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

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

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

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

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

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

Отдельно поработали с адаптивностью. У этого сайта большинство компонентов находятся в центральной части с четкими отступами слева и справа. Из полноэкранных элементов — только центральные баннеры и еще несколько на отдельных страницах. Поэтому анимации и взаимодействие с блоками стали особенно важны, чтобы сделать внешний вид интереснее. Мы сделали так, чтобы на любом экране примерно одинаково соблюдались пропорции контента и отступов. На больших экранах отступы чуть увеличиваются, на обычных устройствах контент всегда по центру, без пустых пространств. С масштабом то же самое: при значениях 90, 100, 110 и 120 процентов структура сохраняется.

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

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

На длинных страницах появилось меню с якорями: можно мгновенно перейти к блоку «Клиники», «Вакансии» или «Контакты». В мобильной версии это работает так же удобно.

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

Итог

Так сложилась цифровая экосистема ВолгГМУ: юбилейный сайт, портал для абитуриентов, обновлённый основной ресурс и следом за ним — «МедМол», первый в стране молодёжный портал медицинского университета. Кстати, на первом экране «головного» сайта установлены кликабельные ссылки на другие проекты, и наоборот.

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

Сотрудничество с вузом продолжается: мы на связи, помогаем с доработками и следим за качеством.