Борьба за время и плавность скролла — о создании сторилендинга «Почему утонул «Курск»?»

Борьба за время и плавность скролла — о создании сторилендинга «Почему утонул «Курск»?»

проект

Борьба за время и плавность скролла — о создании сторилендинга «Почему утонул «Курск»?»

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

авторы

Николай Романов,
Марк Кузьмин,
Кристина Гилева,
Максим Тлеубаев,
Александр Зиенко

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

Агентство эффективных коммуникаций «Инфографика»

Сторилендинг «Почему утонул «Курск»?» создали в Агентстве эффективных коммуникаций «Инфографика». Проект взял золото в ежегодной международной премии за достижения в области инфографики, визуализации данных и дата-арте Moscow Dataviz Awards. Авторы сделали проект к 20-летию со дня трагедии в Баренцевом море и попытались разобраться в причинах гибели 118 членов экипажа.

месяца работы

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

лет со дня трагедии

Николай Романов,
автор проекта

Агентство «Инфографика», сооснователем которого я являюсь, помогает компаниям представить информацию в наглядной и понятной форме. Мы визуализируем материалы под бизнес-задачи. Используем разные форматы, начиная от статичного (буклеты, презентации), продолжая анимацией и заканчивая digital-проектами. Формат не так важно, важнее смысл, который мы выражаем.

Почему «Курск»?
Кроме коммерческих проектов, у агентства «Инфографика» есть творческое, для души. Сторилендинг «Почему утонул „Курск“?» — один из таких. Просто хотелось сделать проект к 20-летию со дня гибели подводной лодки, разобраться в причинах трагедии.

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

В 2019 году на YouTube я посмотрел выпуск программы «Редакция», где Алексей Пивоваров рассказывал о гибели подводной лодки. Он ссылался на книгу «В кильватерном строю за смертью. Почему погиб «Курск» военного эксперта Валерия Рязанцева, проводившего расследование.

У Пивоварова ответов не нашел. Как мне показалось, он ушел больше в эмоции, а не в то, чтобы наглядно и доходчиво объяснить, что произошло. И тогда у меня возникла идея: «Было бы круто сделать акцент на технической составляющей».

K
Я понял, что ничего не знаю об этой трагедии. Сразу же возникли вопросы: «Почему она произошла? Кто виноват?».
У нас есть отработанная схема подготовки подобных проектов. Ее же использовали в работе над «Курском»:
 

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

Из 10 глав книги «В кильватерном строю за смертью. Почему погиб „Курск“» причинам катастрофы посвящена одна. Ее мы и взяли за основу.

Я переработал текст, совместно придумали структуру. Это было где-то в марте-апреле 2020 года. Основная работа началась после майских праздников. Если бы мы занимались этим проектом фул-тайм, то, скорее всего, наша часть заняла бы максимум 15 рабочих дней и на программирование бы ушло около 6-7 рабочих дней. Итого примерно 22 дня. Но процесс растянулся на 4 месяца.

Обложка проекта
Как работали над визуализацией проекта
Марк Кузьмин,
инфографер проекта

Основной объем работы мы делали вдвоем, но участие в проекте принимал иллюстратор Александр Зиенко, который рисовал изображения подводной лодки, аниматор Максим Тлеубаев, программисты команды «Лига А».

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

Сторилендинг начинается с того, что подводная лодка у поверхности. Когда скролим, то как будто погружаемся вместе с ней и проживаем трагедию на учениях в Баренцевом море.

После второго взрыва и сообщения о 52 погибших бирюзовый фон меняется на черный.

В конце подлодка уже на фоне часов, идет таймлайн спасения.

А центральное наполнение — это как раз те процессы, которые проходили при взрыве. Все основное внимание сконцентрировано именно на этом.

 

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

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

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

 

При создании проекта решили, что уместно использовать таймлайн. Он помогает погрузить читателя в трагедию, прочувствовать ее, прожить последние минуты вместе с подводниками. Хотелось показать именно протяженность во времени.

Макет делался Figma — это сейчас стандарт для digital-проектов. Там удобно работать дизайнерам и программистам, вместе могут выполнять различные задачи и иллюстраторы, и аниматоры. Аниматор работал в After Effects. Это классический набор для создание подобного проекта.

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

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

 

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

С чем было сложно работать?

 

Каждый из этапов работы предъявляет свои требования, имеет свои особенности. Когда спрашивают, что сложнее — рисунки или тексты, — то привожу пример пирога: «Сложнее замесить тесто или поставить его в духовку?». Если ошибиться на одном этапе, то ничего не получится.

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

Структура всего повествования предъявляла самый главный вызов. Мы очень долго пытались нащупать ритм, чтобы не потерять смысл.

Долго пытались добиться плавности скрола. В самом низу, когда уже идет отсчет времени на спасательной операции, никак не удавалось сделать так, чтобы часы двигались как надо. Интуитивно понимали, как хотим, программистам объясняли, но каждый раз не получалось.

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

Совершенствуем методы продвижения

 

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

Когда делаем творческие проекты, то преследуем две задачи: 

  • реализовать тему, которая нам самим интересна,
  • отработать навыки, которые позволят круче делать коммерческие проекты.

По итогам сторилендинга «Почему утонул „Курск“?» мы сделали выводы и решили, что кроме привлечения информационных партнеров, нужно использовать другие пути. Например, сейчас прорабатываем сторилендинг об эпидемии ВИЧ в России и там планируем продвигаться через взаимодействие с инстаграм-блогерами.

Посты о «Курске» в социальных сетях «Инфографики» активно обсуждались. Люди писали: «Классный проект», «Круто, что эту тему подняли», «После прочтения материала многое стало понятнее»… Приходило немало отзывов в личку.

Проект отправили на конкурс Moscow Dataviz Awards-2021. Это ежегодная международная премия за достижения в области инфографики, визуализации данных и дата-арта. В 2021 году на суд жюри были присланы около 100 работ, 85 из них составили лонглист. Мы вышли в тройку обладателей «золота». Первое место не подразумевает денежное вознаграждение (конкурс еще развивается), но приятно, что нас оценили.

На какие мысли наталкивает проект

 

Мне кажется, трагедии нельзя было избежать, и тут проблема не в том, что Россия не та страна или еще что-то. Это многофакторная проблема…

Когда закончили работу над проектом, то я понял, что Путин, как президент, в трагедии не виноват. Трагедию в Баренцевом море нельзя было избежать. Это накопленные ошибки прошлого.

 

Недавно был в Крыму и видел заброшенную базу подводных лодок в Балаклаве. Там стоит памятник матросу, который в 60-х годах 20 века, погиб, спасая коллег на одной из подводных лодок. Трагедия похожая. Уже в 60-х годах была проблема с такими торпедами. Уверен, были и другие случаи.

Работая над проектом, мы не задавались вопросами: «Как накажем виновных?», «Зачем такие подлодки выпускают?». Мы не собирались обличать тех, кто заметает под ковер проблему. Нам хотелось разобраться, почему эта трагедия произошла.

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

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

Иллюстрации:
скриншоты проекта «Почему утонул «Курск»?»

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

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

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