Лучшая инфографика 2021 года: разбираем работы победителей Malofiej Awards
Malofiej Awards — это ежегодный международный конкурс инфографики. Его проводит Общество новостного дизайна — это 2600 визуальных журналистов со всего мира. Общество стремится уйти от полотен текста в публикациях к визуальной подаче. И у него это отлично получается: результаты Malofiej Awards с 1970-х годов становятся ориентиром визуального повествования для изданий всего мира.
В сфере инфографики получить награду Malofiej Awards — всё равно что стать обладателем Пулитцеровской премии. Конкурс престижный, а работы победителей можно считать эталонными и брать за образец. В статье мы разобрали пять работ и придумали, как использовать идеи из них в коммерческой сфере.
А ещё в конце статьи дадим ссылку на всех номинантов Malofiej Awards 2021 — всего их 165.
Но прежде чем переходить к разбору, напомним, что такое инфографика.
Инфографика — способ переработки информации, который отличается тремя характеристиками:
- информация структурирована;
- есть визуальные акценты на важном;
- данные наглядны, понятны и красивы.
Благодаря этим характеристикам читателю не нужно прилагать усилия, чтобы разобраться в информации.
Инфографика решает разные задачи: привлекает внимание к проблеме, превращает огромные гайды в чёткие инструкции, помогает обучать сотрудников, привлекать инвесторов и партнёров.
От задачи зависит выбор формата инфографики, например буклет или лендинг, тест или настольная игра, плакат или анимация, — его выбирают, ориентируясь на то, кто, где и зачем будет изучать инфографику. Подробнее об отличии инфографики от других форм и её задачах мы рассказывали у себя в блоге.
Malofiej Awards тоже учитывает формат: печатную инфографику и лендинги оценивают отдельно — в номинациях Print и Digital соответственно. Мы будем разбирать работы из номинации Digital — это лендинги с анимацией, интерактивными элементами, трёхмерной графикой — самый актуальный формат для коммерческой инфографики.
🥇 «Тела в движении» — проект National Geographic
Bodies in motion, или «Тела в движении», — инфографика, которая показывает, как передвигаются разные живые существа: четвероногие, например слон, прямоходящие — это человек, и даже те, у кого нет ног, например змеи. Фокус — на механике движения.
Проект взял золото в номинации Digital в формате Features.
Особенности проекта:
простая линейная структура повествования — животных поделили на категории и кратко описали;
- 3D-объекты — каждое животное показывается трёхмерно и в движении;
- прозрачность — пользователь видит животных без кожи, мышц и меха — так механику движения показывают на костях;
- интерактивность — курсором можно остановить видео и изменить положение тела животного.
Задача проекта — развлечь читателя и дать ему чуть больше знаний о мире. Интерактивные движущиеся зверьки справляются с этим отлично.
Где использовать идею: подобная трёхмерная графика подойдёт, чтобы показать любую механику движений, а прозрачность — чтобы продемонстрировать всё, что скрыто под каким-либо покрытием, например кожей или металлом.
🥈 «Что происходит с вирусом в метро» — проект NY Times
Инфографика NY Times, которая показывает, как частицы вируса распространяются в вагоне метро. Проект взял серебро в номинации Digital в формате Features.
Авторы с помощью 3D-модели вагона метро и интерактивных элементов показывают, что происходит с частицами вируса: как они попадают в вагон, как распространяются, где оседают и как выводятся с помощью фильтров.
Особенности проекта:
- подробная 3D-модель, больше характерная для технических проектов или демонстрации принципа работы сложного металлургического процесса;
- механика — текстовые блоки поверх видео, появление которых синхронизировано со скроллом;
- цветовое кодирование — цвет текста соответствует потоку внутри вагона и синхронизируется с изображением;
- актуальная тема — проект опубликован в 2020 году во время пандемии коронавируса.
Задача проекта: снизить панические настроения по поводу коронавируса и показать, что в метро всё не так страшно, потому что фильтры и входящий поток воздуха не дают вирусу распространяться слишком быстро.
Где использовать идею: трёхмерную модель и синхронизированные с текстом потоки можно использовать, чтобы показать, как работает сложная техника или промышленные установки.
🥈 «Маски работают. Реально. Мы покажем вам как» — проект NY Times
Инфографика NY Times, которая показывает, как маски защищают от коронавируса. Проект взял серебро в номинации Digital в формате «Инновационные проекты».
Особенности проекта:
- 3D-объекты, например частицы вируса и нити маски;
- WebGL — это программная библиотека для визуализации трёхмерной интерактивной графики в вебе без плагинов. Она позволяет в режиме реального времени двигать объекты, рассматривать их с разных сторон, поворачивая камеру, увеличивать и уменьшать масштаб — это околоигровая механика;
- сравнение двух типов масок — тканевой и респиратора N95;
- актуальная тема.
Задача проекта: показать, как именно маски работают, и так убедить людей пользоваться ими. Для этого авторы использовали детализацию и трёхмерную графику: пользователь попадает в увеличенную маску и видит, как её нити задерживают частицы вируса. Такая демонстрация убеждает сильнее, чем сухие выводы исследований и рекомендации ВОЗ.
Где использовать идею: можно показать, как работают атомы, молекулы, наночастицы и всё, что не различить без микроскопа.
🥉«Как распространялся коронавирус» — проект NY Times
С помощью инфографики NY Times рассказывает, как коронавирус распространился по миру и почему запрет на путешествия не помог его сдержать. Спойлер: потому что ещё до запрета сотни тысяч людей из Уханя разбрелись по всему миру. Проект взял бронзу в номинации Digital в формате Features.
Особенности проекта:
- JavaScript — все точки и потоки точек на карте запрограммированы на определённую траекторию движения;
- большое исследование — авторы изучили случаи заражения и отследили путь заболевших из Уханя до родного города, а затем использовались данные по инфицированным в разных городах;
- актуальная тема.
На наш взгляд, из-за JavaScript проект получился «тяжёлым»: на устройствах с не самыми мощными процессором и видеокартой и небольшим объёмом памяти элементы движутся рывками. Если бы авторы использовали видео, страница грузилась бы легче и плавнее.
Задача проекта: показать, как распространялся вирус, и разобраться, почему карантин и запрет путешествий не сработали.
Где использовать идею: для визуализации любых потоков, движущихся по стране или миру, например данных, денег, товаров, животных и людей.
🥉 «Как изменится климат, если выбросы углерода продолжат расти» — проект National Geographic
Инфографика National Geographic о климате взяла бронзу, но не сама по себе, а с ещё четырьмя проектами журнала — это формат «Портфолио» в номинации Digital.
Проект показывает, как изменится климат в разных городах к 2070 году. Чтобы изменения были понятнее пользователям, их демонстрируют через сравнение: например, в Бостоне через 50 лет климат будет как в Кентукки, а в Лондоне — как в Италии.
Особенности проекта:
привязка к местоположению пользователя — после первых фактов рассказ начинается с того города, в котором находится пользователь (или с ближайшего к нему). Например, у нас открылся Санкт-Петербург;
- серьёзное исследование — авторы проанализировали 2500 населённых пунктов, чтобы создать этот проект. А потом для каждого спрогнозировали, каким будет климат в 2070 году;
- до и после — на карте есть шторка, которая показывает, как через 50 лет изменится климат в выбранном городе;
- подробная информация по каждому городу — кроме общих данных проект рассказывает, какими будут температура, количество осадков и жарких дней в конкретных городах (а их там 2500, напоминаем);
- вовлечение — в конце авторы предлагают посмотреть другие города, например самый уязвимый или самый жаркий.
Есть и особенности в плане механики: трёхмерная модель планеты, WebGL, mamboxGL — инструмент, который позволяет работать с интерактивными картами и стилизовать их под себя.
Задача проекта: привлечь внимание к изменению климата. Круто, что изменение климата связывают с конкретными городами и берут период всего в 50 лет. Жара в городе пользователя, в отличие от абстрактных фраз вроде «климат меняется», «ледники тают», делает проблему близкой: одно дело какие-то далёкие ледники, другое — засуха и жара в родном городе.
Где использовать идею: карту со шторкой «до-после» можно использовать везде, где нужно показать, как что-то изменяется в мире или в отдельных городах. А привязку к местоположению — там, где важна география пользователей.
🇷🇺🥈 Бонус. «Почему утонул „Курск“?» — наш проект
Наш сторилендинг «Почему утонул „Курск“?» — единственный российский проект, который получил призовое место на Malofiej Awards в 2021 году. Проект взял серебро в номинации Digital в формате «Инновационные проекты».
Проект рассказывает об одной из версий трагедии подлодки «Курск» в формате сторилендинга — это лендинг, который постепенно погружает читателя в историю через линейное повествование и интерактивные элементы.
Особенности проекта:
- 3D-графика — пользователь может изучить все отсеки подводной лодки;
- интерактивные элементы — можно узнать имена членов экипажа, просмотреть события в хронологическом порядке с 12 по 23 августа;
- схемы — чтобы пользователь понял, как работают курковые клапаны торпеды;
- текст в конце синхронизирован с движением стрелки, которая показывает дату и время событий.
Задача проекта: разобраться в неофициальной версии катастрофы подлодки «Курск» и рассказать о ней читателям. Заодно показать на примере, как можно упаковывать истории в сторилендинги.
Где использовать идею: с помощью подобной графики, схем и интерактивных элементов можно показывать, как работают сложные технические штуки. А синхронизация текста и хронологии подойдёт, чтобы объяснить последовательность событий.
Ещё об инфографике
Все победители Malofiej Awards 2021— официальный гугл-док от организаторов
Дожили, что малофья это конкурс такой🤦♂️
Про нейминг конкурса вопрос к испанцам :)
Комментарий недоступен
Мало-мало-мало-мало-малофья
Я хочу еще немного больше
Про Курск - круто сделано!
Спасибо!
да, про "Курск" супер!
Единственное — хронология в конце — мне кажется перемудрили с хронометром, хочется просто текст который можно пробежать глазами.
За динозавра лайк однозначно.
Курск красота!
Вообще круто, но победители какие-то однотипные. Динозавры конечно самые уматовые.
Есть предположение, что это из-за специфики 2020 года. Посмотрите таблицу с призерами, там много интересных проектов https://docs.google.com/spreadsheets/d/1TlFa6pFM1kVlS5lfcJox0IkB0TTLqZI-O6eIOeNR0pw/edit?usp=sharing
Да, "Курск" очень крутой получился..
Комментарий недоступен
Крутые работы, делайте еще подборки.
На скелетах залип :))
Есть ли какая-то возможность что-то использовать, не нарушая авторских прав?
Как и с кем заключить Договор?
Тут нужно политику каждого из участников читать. Это же в основном большие медиа типо NY Times, там есть свои нюансы
Комментарий недоступен
Про маски смешно :) они там с масштабом ниче не напутали часом? И опять же, кто сказал, что первоначално задержанные частицы вируса при последующем вздохе не срываются и не попадают в легкие? Ну и еще один момент - к маскам нужны очки, так как через слизистую глазок все прекрасно попадает в ваш организм.