3D, WebGL, Webflow… Заглядываем под капот виртуального музея Андрея Сахарова

3D, WebGL, Webflow… Заглядываем под капот виртуального музея Андрея Сахарова

проект

3D, WebGL, Webflow… Заглядываем под капот виртуального музея Андрея Сахарова

ссылка на проект

авторы

Сергей Лукашевский,
Наталья Самовер,
Бэла Коваль,
Андрей Бахмин,
Вера Полякова,
Павел Дергачев,
Александр Растегаев,
Илья Желамский,
Елена Былинкина,
Вячеслав Шейкин,
Артем Фокин,
Алексей Иванов,
Илья Исаенко,
Сергей Бисенов

финансирование

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

великая личность

год работы

человека в команде

Сергей Лукашевский,
автор идеи, директор Сахаровского центра

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

За годы, прошедшие после смерти Сахарова, память о великом физике и правозащитнике не исчезла, но сильно упростилась. Примерно до формулы: «Создатель советской водородной бомбы, который выступал на Съезде».

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

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

Каким должен быть виртуальный музей
В одной дискуссии я услышал такое понятие, как «воронка просвещения»:
 

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

У меня возникла идея сделать сайт по такому же принципу — сначала яркий холл для привлечения внимания, а потом все остальное для углубления в тему. Придумал три этапа.
 

  1. Для обычного человека или школьника, который просто интересуется Сахаровым или хочет написать реферат.
  2. Для студента, который готовит доклад на семинар. Он получает доступ к подробной биографии с разными отсылками, дополнительными историями.
  3. Для тех, кто хочет всерьез заниматься этой темой. Может быть, это студент, который пишет курсовую или дипломную работу, аспирант, исследователь… Для них есть «Библиотека», в которой находятся тексты Сахарова, тексты о Сахарове, разные аудиовизуальные и другие дополнительные материалы.

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

В чем концепция проекта?
Павел Дергачев,
креативный директор, создатель компании Redis

Студия Redis находится в Твери, мы выиграли тендер на создание виртуального музея. Сахаровскому центру хотелось создать нечто выдающееся к 100-летию Андрея Сахарова.

Все начиналось с обсуждения общей концепции, настроения, которое должен вызывать сайт. Главная страница — это самый сильный образ. Она начинается с цитаты: «Судьба моя была в каком-то смысле исключительной… Не из ложной скромности, а из желания быть точным, замечу, что судьба моя оказалась крупнее, чем моя личность. Я лишь старался быть на уровне собственной судьбы…».

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

Данный образ можно трактовать и как возможность приблизить Сахарова к аудитории. Ведь многие даже не знают кто это. Я сам думал, что Андрей Сахаров всего лишь обладатель Нобелевской премии за изобретение водородной бомбы.

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

Весь сюжет основан на серии фотографий в аэропорту. Когда мы увидели эти снимки, то сразу скрестили их, получился всеобъемлющий емкий визуальный образ, с интерактивом. Для его воплощения выбрали современную технологию WebGL, которая позволяет применять 3D и различные эффекты в браузерах на различных устройствах.

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

В нескольких главах его жизни у нас есть элементы драматургии, театральные приемы.

Цвета глав охарактеризованы настроением. Детство — это золотая пара, очень светлая. Но параллельно мы говорим о том, что идет красный террор, показываем разрыв золотой бумаги, и на бэкграунде видим то, что не видел Андрей Сахаров — в агрессивно-красном цвете Сталин, репрессии, тюрьмы, проволока…

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

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

 

Кроме текстов, других музейных материалов в чистом виде довольно мало. Сахаров был засекреченным физиком и за период 1950-1960-х почти никаких фотографий (кроме служебных) о его жизни не сохранилось. Есть немного детских. Его отец любил фотографировать, делал это полупрофессионально. Есть немало фотографии диссидентского периода, но они любительские и часто плохого качества. Видео тоже очень мало.

Далеко не у всех западных телекомпаний хорошо содержатся архивы. У нас ушло почти полгода, чтобы компания «Эй-би-си» предоставили и разрешила пользоваться качественными записями интервью Сахарова 1980 года, где он протестует по поводу ввода советских войск в Афганистан.

Через несколько недель после этого интервью его задержали и отправили в Горький…

Как выстраивали работу над проектом и его структуру?

 

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

Разделы «История жизни» и «Библиотека» выполнены с помощью Webflow. Этот продукт нельзя назвать конструктором, как Тильду, это более сложный инструмент, который позволяет выполнять весь цикл от дизайна до разработки дизайнером/верстальщиком в обход привлечения разработчиков. Очевидна экономия, потому что рынок программирования перегрет. Весь сайт, кроме главной страницы, реализован на Webflow с очень редким и точечным применением java-скриптов.

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

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

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

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

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

 

Работать начали до пандемии, несколько раз встречались. Была идея, что каждые два месяца будем собираться на планерки, но в результате все перешло в онлайн. Было много серий вычитки, обсуждений, как расставить фотографии. Долго решали делать ли вводную 3D модель.

В основе виртуального музея — материалы из архива Сахарова, наша огромная коллекция с разнообразными документами, например, с Ульяновского завода, где во время войны работал Андрей Дмитриевич. Это коллекция, которая собиралась 30 лет.

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

Работали с норвежским и американским телекомпаниями, РИА «Новости», ТАСС, Красногорским архивом. Какие-то материалы помогло получить Международное историко-просветительское, благотворительное и правозащитное общество «Мемориал». В нашем распоряжении была коллекция фотографий Юрия Роста, который разрешил ими пользоваться, но этого не хватало для иллюстрирования всех аспектов жизни Сахарова. Нам пришлось использовать фотографии, например, Съезда, на котором выступал Андрей Дмитриевич. Это материалы из государственных архивов. Довольно много фотографий пришлось покупать.

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

С какими сложностями столкнулись и в чем уникальность виртуального музея Андрея Сахарова?

 

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

Это очень большой проект, запускались в несколько этапов, приходилось много перерабатывать, но справились. Это ведь очень актуальная на данный момент тема — свобода человека, свобода слова. Актуальная во всем мире. Мы понимали, что делаем мощный проект, была внутренняя мотивация и актуализация помогала.

Минусов много, и под капотом мы уже после запуска дорабатывали некоторые детали. Например, были нарекания на медленность открытия главной страницы. Вес сайта на самом деле не такой большой, но из-за 3D на некоторых устройствах сайт немного подтормаживает. Поэтому придумали с Сахаровским центром пропускать «заставку» — вводную часть на webGL.

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

 

Я не первый раз участвую в создании сайта на уровне идеи и общего руководства процессом. Каждый раз сталкиваешься с тем, что приходится принимать решения, последствия которых трудно оценить, не будучи специалистом. А специалист, даже самый расположенный, тоже до конца не все может рассказать. И это, наверное, самая сложная история. Я в среднем с этой проблемой сталкиваюсь раз 5-6 лет, за эти годы технологии, мода и все остальное успевают измениться.

По образованию я историк, и сотрудница Центра Наталья Самовер, которая была главным автором текста, тоже историк с хорошим академическим бэкграундом. Нам было очень сложно переложить большой объем информации на язык визуального восприятия, вписаться в формат, учитывая требования верстки и дизайна. Было сложно выделить лид, смириться, что какая-то часть информации, будет не сверху, а внутри текста.

Были трудные споры с Redis, но в общем мы вырулили, и я считаю, что это хорошо.

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

Спецпроекты sdelano.media

Над материалом работал
Дмитрий Артюх

Иллюстрации:
скриншоты виртуального музея Андрея Сахарова

Делали похожие проекты? Расскажите о своем опыте, нам интересно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: