Заказчик
Российская академия наук — высшая научная организация страны с 300-летней историей. В научных центрах РАН совершаются открытия в области естественных, технических, гуманитарных и общественных наук, которые не только расширяют границы человеческого знания, но и находят практическое применение — от сохранения здоровья людей до освоения новых технологий.
Даже в годы Великой Отечественной войны учёные Академии наук продолжали работать, внося ощутимый вклад в приближение Победы. Несмотря на эвакуацию и нехватку ресурсов АН СССР удалось не только сохранить научные силы, но и увеличить число учреждений и сохранить масштаб исследований. Рассказать об этом подвиге учёных решили в цифровом спецпроекте, посвящённом 80-й годовщине Победы.
Дизайн как способ сохранения памяти
Молодое поколение вряд ли пойдёт в архивы вчитываться в сотни страниц фронтовой хроники и воспоминаний участников тех событий. Однако люди откликаются на язык современного дизайна, визуального сторителлинга и вовлекающих интерфейсов.
Главная миссия проекта — создание цифровой формы памяти, которая смогла бы заговорить с аудиторией на понятном ей языке. Речь шла не просто о передаче исторических фактов, важно было вызвать эмоциональный отклик и вовлечь пользователя в изучение темы, которую трудно воспринимать «на бегу».
Предстояло решить сразу несколько задач:
- Рассказать о вкладе учёных АН СССР в годы Великой Отечественной войны и структурировать сотни архивных документов.
- Сделать сложную тему понятной и вовлечь пользователя в изучение.
- Передать атмосферу эпохи через визуальные и смысловые решения.
- Адаптировать сайт под интерактивную панель в здании Академии наук, технические параметры которой оставались неизвестными почти до конца разработки.
- На первых этапах работать с минимумом исходных текстовых материалов.
- Работать в условиях сжатых сроков — на разработку и реализацию 1 месяц.
Поиск визуального языка: от классики до брутализма
На старте проекта финальный контент был ещё не готов, поэтому первым этапом стала разработка общей концепции и визуального направления. Поиск решений отталкивался от внутреннего отклика и личных ощущений, связанных с этой объёмной и эмоционально сложной темой.
Почти у каждого жителя нашей страны есть своя история, связанная с Великой Отечественной войной. Именно поэтому в проекте не хотелось отрываться от привычных ассоциаций. Важно было, с одной стороны — сохранить преемственность, вписаться в визуальный и культурный контекст, но при этом найти новые и нестандартные, выразительные решения. Это необходимо, чтоб сделать сайт современным и понятным для каждого.
В процессе поиска подходящих образов, метафор и визуальных приёмов было подготовлено пять концептуально разных вариантов — от деликатно классических, до смелых решений с легким налётом брутализма, противоречивыми цветовыми сочетаниями и акцидентной типографикой.
Так появились ключевые визуальные приёмы и метафоры, которые легли в основу финального варианта.
Бетонные текстуры — с одной стороны, метафора жестокости и тяжести времени, с другой — стойкости и несокрушимости науки и учёных в эти сложные времена.
Массивные заголовки — отсылка к монументальной архитектуре памятников и музейных экспозиций. Они не столько информируют, сколько создают атмосферу грандиозности и величия подвига.
Красно-чёрная палитра — тревожность и торжественность одновременно. Здесь красный не только про праздник, но и про тревогу и цену Победы.
Архивность — ощущение, что перед глазами реальные документы и их сотни. Приём переносит наблюдателя на позицию актора — пользователь становится исследователем и самостоятельно собирает паззл по обрывкам информации.
Текстура из текста — ощущение объема и глубины, как метафора скрытых дополнительных смыслов, до которых придётся докопаться самому. Такой подход подчёркивает, что память — не плоская картинка, а многоуровневая структура, которая можно рассмотреть только спустя время.
«Ожившие» фото — эффект присутствия и ещё большего погружения. Это всё не просто какие-то незнакомые люди, застывшие на картинке вне времени. В движении они становятся «ближе», раскрывая свою уникальную историю.
На этом этапе разработки ещё не были известны точные параметры интерактивной панели, на которой предстояло разместить сайт. Поэтому было принято решение использовать автоскейл — тип вёрстки, при котором интерфейс автоматически подстраивается под размеры экрана. Это позволило сохранить цельную визуальную композицию и обеспечить надёжную работу всех элементов сайта на любом устройстве.
Дизайн, который заставит замедлиться
Современный веб-дизайн предельно человекоцентричен: каждая деталь выверена так, чтобы избавить пользователя от лишних усилий. Интерфейсы становятся прозрачными, словно исчезают, уступая место привычке, скорости и комфорту. Люди поглощают контент на автопилоте, а чтение становится поверхностным и неосознанным. Именно это и стало отправной точкой для финального варианта сайта — захотелось выбить пользователя из привычного паттерна восприятия, заставить замедлиться, вчитаться, сосредоточиться.
Непривычная вёрстка
В финальной версии сайта всё подчинено главной цели — вызвать честное, местами некомфортное ощущение. Для реализации этой идеи была выбрана — сложная, нарочито нелогичная вёрстка. Здесь нет стремления угодить пользователю в привычном смысле: навигация не подсказывает очевидный путь, тексты требуют внимания и концентрации, а визуальный ритм противоречит принятым стандартам.
Было важно создать ощущение, будто пользователь оказался в архиве и работает с подлинными документами — где каждую строчку нужно «добывать», всматриваться, вычленять смысл из фрагментов. Такое решение становится частью нарратива: визуальный язык сайта работает на равных с текстом и личными историями. Всё вместе это вызывает эмоциональный отклик, подталкивает к размышлениям и создаёт эффект участия.
«Ожившая» галерея
Одной из ключевых задач проекта стало переосмысление галереи учёных, чьи фотографии сегодня висят в здании Академии наук. Они существуют как фон, как часть интерьера, а не как живые образы. Хотелось дать этим изображениям новую жизнь — с помощью нейросети фотографии «оживили»: не ради визуального эффекта, а чтобы подчеркнуть связь времён и вовлечь пользователя в более глубокое взаимодействие с сайтом. При наведении на изображение портрет «оживает» — не автоматически, а только в ответ на действие. Это создаёт эффект участия, будто пользователь сам «пробуждает» историю и вступает в диалог с прошлым.
Этот приём решает сразу несколько задач: с одной стороны, сохраняется историческая достоверность, потому что фотографии реальны. С другой — добавляется эмоциональный и интерактивный слой, превращающий сухой архив в личный опыт. Это придаёт галерее не только выразительность, но и смысл: человек прошлого становится ближе, а сама история — более живой и осязаемой.
Объёмный и сложный фон
Глубина — ещё одна метафора, лежащая в основе проекта. Чтобы это визуализировать использовались размытые тексты и архивные документы на фоне. Они работают как фактура и создают ощущение многослойности, словно посетитель смотрит сквозь стекло музейной витрины, за которым скрываются подлинные документы. Эффект параллакса усиливает это восприятие, и сайт ощущается объёмным, почти физически осязаемым.
Многослойность изображения и текста — ещё один важный приём, добавляющий глубины. Фотографии намеренно частично перекрывают текстовые блоки, усиливая эффект и подчеркивая, что перед пользователем не просто интерфейс, а «пространство» памяти, где визуальный и смысловой ряды постоянно пересекаются.
Цветовая драматургия
Выбранная цветовая палитра: красный, серый, чёрный и белый — помогает вызывать необходимые эмоции. Первые блоки окрашены в серые тона — это визуальное погружение в тяжёлое начало Великой Отечественной войны. По мере продвижения пользователь видит, как серый фон постепенно сменяется белым — появляется «просвет», ощущение движения вперёд и надежда. Цветовое чередование поддерживает эмоциональную динамику повествования.
Навигация оформлена с акцентом — агрессивный красный цвет в оглавлении одновременно отсылает к торжественности, но при этом создаёт напряжение и тревожность. Это подчёркивает противоречивость исторического контекста и не даёт воспринимать сайт слишком спокойно.
Смена ритма повествования
Визуально-смысловой ритм сайта намеренно выдержан в насыщенном, местами перегруженном темпе. Чтобы уравновесить нагрузку и дать пользователю возможность выдохнуть использовались блоки с видеоинтервью. Истории, рассказанные голосом, позволяют отдохнуть от чтения, снизить напряжение, временно переключиться. Смена темпа помогает удержать внимание и делает взаимодействие с сайтом более человечным и сбалансированным.
Важно, что видео не дублируют текст, а дополняют его, предлагая другой взгляд на те же события. Это позволяет глубже прожить материал и при этом не перегрузиться.
Все используемые приёмы не работают сами по себе, а только вместе эффективно решают поставленную цель — заставляют пользователя встать на место исследователя и самостоятельно погружаться в контекст. Сайт не рассказывает историю «в лоб», а позволяет прочувствовать её, буквально пройти сквозь неё.
Смотреть проект — naukafrontu.ru
Проект в цифрах
1 месяц на реализацию
1 дизайнер
5 дизайн-концепций сайта
12 «оживших» фото
108 оцифрованных биографий учёных
Более 1000 заходов на сайт в день запуска
>20 публикаций о проекте в СМИ, включая федеральные