Лучшая инфографика 2021 года: разбираем работы победителей Malofiej Awards

Malofiej Awards — это ежегодный международный конкурс инфографики. Его проводит Общество новостного дизайна — это 2600 визуальных журналистов со всего мира. Общество стремится уйти от полотен текста в публикациях к визуальной подаче. И у него это отлично получается: результаты Malofiej Awards с 1970-х годов становятся ориентиром визуального повествования для изданий всего мира.

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

«Тела в движении» — проект National Geographic

«Что происходит с вирусом в метро» — проект NY Times

«Маски работают. Реально. Мы покажем как» — проект NY Times

«Как распространялся коронавирус» — проект NY Times

«Как изменится климат, если выбросы углерода продолжат расти» — проект National Geographic

А ещё в конце статьи дадим ссылку на всех номинантов Malofiej Awards 2021 — всего их 165.

Но прежде чем переходить к разбору, напомним, что такое инфографика.

Инфографика — способ переработки информации, который отличается тремя характеристиками:

• информация структурирована;
• есть визуальные акценты на важном;
  
• данные наглядны, понятны и красивы.

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

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

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

Malofiej Awards тоже учитывает формат: печатную инфографику и лендинги оценивают отдельно — в номинациях Print и Digital соответственно. Мы будем разбирать работы из номинации Digital — это лендинги с анимацией, интерактивными элементами, трёхмерной графикой — самый актуальный формат для коммерческой инфографики.

Bodies in motion, или «Тела в движении», — инфографика, которая показывает, как передвигаются разные живые существа: четвероногие, например слон, прямоходящие — это человек, и даже те, у кого нет ног, например змеи. Фокус — на механике движения.

Проект взял золото в номинации Digital в формате Features.

Особенности проекта:

• простая линейная структура повествования — животных поделили на категории и кратко описали;
  

• 3D-объекты — каждое животное показывается трёхмерно и в движении;
• прозрачность — пользователь видит животных без кожи, мышц и меха — так механику движения показывают на костях;
• интерактивность — курсором можно остановить видео и изменить положение тела животного.

Задача проекта — развлечь читателя и дать ему чуть больше знаний о мире. Интерактивные движущиеся зверьки справляются с этим отлично.

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

Инфографика NY Times, которая показывает, как частицы вируса распространяются в вагоне метро. Проект взял серебро в номинации Digital в формате Features.

Авторы с помощью 3D-модели вагона метро и интерактивных элементов показывают, что происходит с частицами вируса: как они попадают в вагон, как распространяются, где оседают и как выводятся с помощью фильтров.

Особенности проекта:

• подробная 3D-модель, больше характерная для технических проектов или демонстрации принципа работы сложного металлургического процесса;
• механика — текстовые блоки поверх видео, появление которых синхронизировано со скроллом;
  
• цветовое кодирование — цвет текста соответствует потоку внутри вагона и синхронизируется с изображением;
  
• актуальная тема — проект опубликован в 2020 году во время пандемии коронавируса.
  

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

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

Инфографика NY Times, которая показывает, как маски защищают от коронавируса. Проект взял серебро в номинации Digital в формате «Инновационные проекты».

Особенности проекта:

• 3D-объекты, например частицы вируса и нити маски;
• WebGL — это программная библиотека для визуализации трёхмерной интерактивной графики в вебе без плагинов. Она позволяет в режиме реального времени двигать объекты, рассматривать их с разных сторон, поворачивая камеру, увеличивать и уменьшать масштаб — это околоигровая механика;
  
• сравнение двух типов масок — тканевой и респиратора N95;
  
• актуальная тема.
  

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

Где использовать идею: можно показать, как работают атомы, молекулы, наночастицы и всё, что не различить без микроскопа.

С помощью инфографики NY Times рассказывает, как коронавирус распространился по миру и почему запрет на путешествия не помог его сдержать. Спойлер: потому что ещё до запрета сотни тысяч людей из Уханя разбрелись по всему миру. Проект взял бронзу в номинации Digital в формате Features.

Особенности проекта:

• JavaScript — все точки и потоки точек на карте запрограммированы на определённую траекторию движения;
• большое исследование — авторы изучили случаи заражения и отследили путь заболевших из Уханя до родного города, а затем использовались данные по инфицированным в разных городах;
  
• актуальная тема.
  

На наш взгляд, из-за JavaScript проект получился «тяжёлым»: на устройствах с не самыми мощными процессором и видеокартой и небольшим объёмом памяти элементы движутся рывками. Если бы авторы использовали видео, страница грузилась бы легче и плавнее.

Задача проекта: показать, как распространялся вирус, и разобраться, почему карантин и запрет путешествий не сработали.

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

Инфографика National Geographic о климате взяла бронзу, но не сама по себе, а с ещё четырьмя проектами журнала — это формат «Портфолио» в номинации Digital.

Проект показывает, как изменится климат в разных городах к 2070 году. Чтобы изменения были понятнее пользователям, их демонстрируют через сравнение: например, в Бостоне через 50 лет климат будет как в Кентукки, а в Лондоне — как в Италии.

Особенности проекта:

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

• серьёзное исследование — авторы проанализировали 2500 населённых пунктов, чтобы создать этот проект. А потом для каждого спрогнозировали, каким будет климат в 2070 году;
• до и после — на карте есть шторка, которая показывает, как через 50 лет изменится климат в выбранном городе;
  
• подробная информация по каждому городу — кроме общих данных проект рассказывает, какими будут температура, количество осадков и жарких дней в конкретных городах (а их там 2500, напоминаем);
• вовлечение — в конце авторы предлагают посмотреть другие города, например самый уязвимый или самый жаркий.
  

Есть и особенности в плане механики: трёхмерная модель планеты, WebGL, mamboxGL — инструмент, который позволяет работать с интерактивными картами и стилизовать их под себя.

Задача проекта: привлечь внимание к изменению климата. Круто, что изменение климата связывают с конкретными городами и берут период всего в 50 лет. Жара в городе пользователя, в отличие от абстрактных фраз вроде «климат меняется», «ледники тают», делает проблему близкой: одно дело какие-то далёкие ледники, другое — засуха и жара в родном городе.

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

Наш сторилендинг «Почему утонул „Курск“?» — единственный российский проект, который получил призовое место на Malofiej Awards в 2021 году. Проект взял серебро в номинации Digital в формате «Инновационные проекты».

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

Особенности проекта:

• 3D-графика — пользователь может изучить все отсеки подводной лодки;
• интерактивные элементы — можно узнать имена членов экипажа, просмотреть события в хронологическом порядке с 12 по 23 августа;
  
• схемы — чтобы пользователь понял, как работают курковые клапаны торпеды;
  
• текст в конце синхронизирован с движением стрелки, которая показывает дату и время событий.
  

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

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

Ещё об инфографике

Все победители Malofiej Awards 2021— официальный гугл-док от организаторов

Вложили 300к+ в инфографику, а она не работает — 5 причин

Пять приёмов, как улучшить читаемость документов

4 принципа дизайна годовых отчётов

10 простых сервисов визуализации данных

6 главных ошибок в презентациях