Лучшая инфографика 2021 года: разбираем работы победителей Malofiej Awards
Malofiej Awards — это ежегодный международный конкурс инфографики. Его проводит Общество новостного дизайна — это 2600 визуальных журналистов со всего мира. Общество стремится уйти от полотен текста в публикациях к визуальной подаче. И у него это отлично получается: результаты Malofiej Awards с 1970-х годов становятся ориентиром визуального повествования для изданий всего мира.
В сфере инфографики получить награду Malofiej Awards — всё равно что стать обладателем Пулитцеровской премии. Конкурс престижный, а работы победителей можно считать эталонными и брать за образец. В статье мы разобрали пять работ и придумали, как использовать идеи из них в коммерческой сфере.
Фрагмент инфографики одного из победителей Malofiej Awards 2021. Показывает механику движения тиранозавра Рекса
А ещё в конце статьи дадим ссылку на всех номинантов Malofiej Awards 2021 — всего их 165.
Но прежде чем переходить к разбору, напомним, что такое инфографика
Инфографика — способ переработки информации, который отличается тремя характеристиками:
Инфографика решает разные задачи: привлекает внимание к проблеме, превращает огромные гайды в чёткие инструкции, помогает обучать сотрудников, привлекать инвесторов и партнёров.
От задачи зависит выбор формата инфографики, например буклет или лендинг, тест или настольная игра, плакат или анимация, — его выбирают, ориентируясь на то, кто, где и зачем будет изучать инфографику. Подробнее об отличии инфографики от других форм и её задачах мы рассказывали у себя в блоге.
- информация структурирована;
- есть визуальные акценты на важном;
- данные наглядны, понятны и красивы.
Инфографика решает разные задачи: привлекает внимание к проблеме, превращает огромные гайды в чёткие инструкции, помогает обучать сотрудников, привлекать инвесторов и партнёров.
От задачи зависит выбор формата инфографики, например буклет или лендинг, тест или настольная игра, плакат или анимация, — его выбирают, ориентируясь на то, кто, где и зачем будет изучать инфографику. Подробнее об отличии инфографики от других форм и её задачах мы рассказывали у себя в блоге.
Malofiej Awards тоже учитывает формат: печатную инфографику и лендинги оценивают отдельно — в номинациях Print и Digital соответственно. Мы будем разбирать работы из номинации Digital — это лендинги с анимацией, интерактивными элементами, трёхмерной графикой — самый актуальный формат для коммерческой инфографики.
«Тела в движении» — проект National Geographic
Bodies in motion, или «Тела в движении», — инфографика, которая показывает, как передвигаются разные живые существа: четвероногие, например слон, прямоходящие — это человек, и даже те, у кого нет ног, например змеи. Фокус — на механике движения.
Проект взял золото в номинации Digital в формате Features.
Особенности проекта:
Задача проекта — развлечь читателя и дать ему чуть больше знаний о мире. Интерактивные движущиеся зверьки справляются с этим отлично.
Где использовать идею: подобная трёхмерная графика подойдёт, чтобы показать любую механику движений, а прозрачность — чтобы продемонстрировать всё, что скрыто под каким-либо покрытием, например кожей или металлом.
- простая линейная структура повествования — животных поделили на категории и кратко описали;
- 3D-объекты — каждое животное показывается трёхмерно и в движении;
- прозрачность — пользователь видит животных без кожи, мышц и меха — так механику движения показывают на костях;
- интерактивность — курсором можно остановить видео и изменить положение тела животного.
Задача проекта — развлечь читателя и дать ему чуть больше знаний о мире. Интерактивные движущиеся зверьки справляются с этим отлично.
Где использовать идею: подобная трёхмерная графика подойдёт, чтобы показать любую механику движений, а прозрачность — чтобы продемонстрировать всё, что скрыто под каким-либо покрытием, например кожей или металлом.
«Что происходит с вирусом в метро» — проект NY Times
Инфографика NY Times, которая показывает, как частицы вируса распространяются в вагоне метро.
Авторы с помощью 3D-модели вагона метро и интерактивных элементов показывают, что происходит с частицами вируса: как они попадают в вагон, как распространяются, где оседают и как выводятся с помощью фильтров.
Авторы с помощью 3D-модели вагона метро и интерактивных элементов показывают, что происходит с частицами вируса: как они попадают в вагон, как распространяются, где оседают и как выводятся с помощью фильтров.
Проект взял серебро в номинации Digital в формате Features.
Особенности проекта:
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
- подробная 3D-модель, больше характерная для технических проектов или демонстрации принципа работы сложного металлургического процесса;
- механика — текстовые блоки поверх видео, появление которых синхронизировано со скроллом;
- цветовое кодирование — цвет текста соответствует потоку внутри вагона и синхронизируется с изображением;
- актуальная тема — проект опубликован в 2020 году во время пандемии коронавируса.
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
«Маски работают. Реально. Мы покажем вам как» — проект NY Times
Инфографика NY Times, которая показывает, как маски защищают от коронавируса.
Проект взял серебро в номинации Digital в формате «Инновационные проекты».
Особенности проекта:
Задача проекта: показать, как именно маски работают, и так убедить людей пользоваться ими. Для этого авторы использовали детализацию и трёхмерную графику: пользователь попадает в увеличенную маску и видит, как её нити задерживают частицы вируса. Такая демонстрация убеждает сильнее, чем сухие выводы исследований
и рекомендации ВОЗ.
Где использовать идею: можно показать, как работают атомы, молекулы, наночастицы и всё, что не различить без микроскопа.
- 3D-объекты, например частицы вируса и нити маски;
- WebGL — это программная библиотека для визуализации трёхмерной интерактивной графики в вебе без плагинов. Она позволяет в режиме реального времени двигать объекты, рассматривать их с разных сторон, поворачивая камеру, увеличивать и уменьшать масштаб — это околоигровая механика;
- сравнение двух типов масок — тканевой и респиратора N95;
- актуальная тема.
Задача проекта: показать, как именно маски работают, и так убедить людей пользоваться ими. Для этого авторы использовали детализацию и трёхмерную графику: пользователь попадает в увеличенную маску и видит, как её нити задерживают частицы вируса. Такая демонстрация убеждает сильнее, чем сухие выводы исследований
и рекомендации ВОЗ.
Где использовать идею: можно показать, как работают атомы, молекулы, наночастицы и всё, что не различить без микроскопа.
«Как распространялся коронавирус» — проект NY Times
С помощью инфографики NY Times рассказывает, как коронавирус распространился по миру и почему запрет на путешествия не помог его сдержать. Спойлер: потому что ещё до запрета сотни тысяч людей из Уханя разбрелись по всему миру.
Проект взял бронзу в номинации Digital в формате Features.
Особенности проекта:
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
- подробная 3D-модель, больше характерная для технических проектов или демонстрации принципа работы сложного металлургического процесса;
- механика — текстовые блоки поверх видео, появление которых синхронизировано со скроллом;
- цветовое кодирование — цвет текста соответствует потоку внутри вагона и синхронизируется с изображением;
- актуальная тема — проект опубликован в 2020 году во время пандемии коронавируса.
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
«Как изменится климат, если выбросы углерода продолжат расти» — проект National Geographic
«Портфолио» в номинации Digital.
Проект показывает, как изменится климат в разных городах к 2070 году. Чтобы изменения были понятнее пользователям, их демонстрируют через сравнение: например, в Бостоне через 50 лет климат будет как в Кентукки, а в Лондоне — как в Италии.
Проект показывает, как изменится климат в разных городах к 2070 году. Чтобы изменения были понятнее пользователям, их демонстрируют через сравнение: например, в Бостоне через 50 лет климат будет как в Кентукки, а в Лондоне — как в Италии.
Инфографика National Geographic о климате взяла бронзу, но не сама по себе, а с ещё четырьмя проектами журнала — это формат «Портфолио» в номинации Digital.
Особенности проекта:
Задача проекта: привлечь внимание к изменению климата. Круто, что изменение климата связывают с конкретными городами и берут период всего в 50 лет. Жара в городе пользователя, в отличие от абстрактных фраз вроде «климат меняется», «ледники тают», делает проблему близкой: одно дело какие-то далёкие ледники, другое — засуха и жара в родном городе.
Где использовать идею: карту со шторкой «до-после» можно использовать везде, где нужно показать, как что-то изменяется в мире или в отдельных городах. А привязку к местоположению — там, где важна география пользователей.
- привязка к местоположению пользователя — после первых фактов рассказ начинается с того города, в котором находится пользователь (или с ближайшего к нему). Например, у нас открылся Санкт-Петербург;
- серьёзное исследование — авторы проанализировали 2500 населённых пунктов, чтобы создать этот проект. А потом для каждого спрогнозировали, каким будет климат в 2070 году;
- до и после — на карте есть шторка, которая показывает, как через 50 лет изменится климат в выбранном городе;
- подробная информация по каждому городу — кроме общих данных проект рассказывает, какими будут температура, количество осадков и жарких дней в конкретных городах (а их там 2500, напоминаем);
- вовлечение — в конце авторы предлагают посмотреть другие города, например самый уязвимый или самый жаркий.
Задача проекта: привлечь внимание к изменению климата. Круто, что изменение климата связывают с конкретными городами и берут период всего в 50 лет. Жара в городе пользователя, в отличие от абстрактных фраз вроде «климат меняется», «ледники тают», делает проблему близкой: одно дело какие-то далёкие ледники, другое — засуха и жара в родном городе.
Где использовать идею: карту со шторкой «до-после» можно использовать везде, где нужно показать, как что-то изменяется в мире или в отдельных городах. А привязку к местоположению — там, где важна география пользователей.
Бонус. «Почему утонул „Курск“?» — наш проект
Проект рассказывает об одной из версий трагедии подлодки «Курск» в формате сторилендинга — это лендинг, который постепенно погружает читателя в историю через линейное повествование и интерактивные элементы.
Наш сторилендинг «Почему утонул „Курск“?» — единственный российский проект, который получил призовое место на Malofiej Awards в 2021 году. Проект взял серебро в номинации Digital в формате «Инновационные проекты».
Особенности проекта:
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
- подробная 3D-модель, больше характерная для технических проектов или демонстрации принципа работы сложного металлургического процесса;
- механика — текстовые блоки поверх видео, появление которых синхронизировано со скроллом;
- цветовое кодирование — цвет текста соответствует потоку внутри вагона и синхронизируется с изображением;
- актуальная тема — проект опубликован в 2020 году во время пандемии коронавируса.
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
Cанкт-Петербург
Большая Конюшенная, 19/8
