{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}

Лучшая инфографика 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, которая показывает, как частицы вируса распространяются в вагоне метро. Проект взял серебро в номинации 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— официальный гугл-док от организаторов

0
18 комментариев
Написать комментарий...
BLVCK SQUARE

Дожили, что малофья это конкурс такой🤦‍♂️

Ответить
Развернуть ветку
Николай Романов
Автор

Про нейминг конкурса вопрос к испанцам :)

Ответить
Развернуть ветку
Анна Оботнина

Конкурс назван в честь аргентинского картографа, пионера инфографики Алехандро Малофея (Alejandro Malofiej) 😊

Ответить
Развернуть ветку
Artemy

Мало-мало-мало-мало-малофья
Я хочу еще немного больше

Ответить
Развернуть ветку
Дмитрий

Про Курск - круто сделано! 

Ответить
Развернуть ветку
Николай Романов
Автор

Спасибо!

Ответить
Развернуть ветку
Максим Глущенко

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

Ответить
Развернуть ветку
Смелый блик

За динозавра лайк однозначно. 

Ответить
Развернуть ветку
Александр Смирнов

Курск красота!

Ответить
Развернуть ветку
Гриша Булыжников

Вообще круто, но победители какие-то однотипные. Динозавры конечно самые уматовые.

Ответить
Развернуть ветку
Николай Романов
Автор

Есть предположение, что это из-за специфики 2020 года. Посмотрите таблицу с призерами, там много интересных проектов https://docs.google.com/spreadsheets/d/1TlFa6pFM1kVlS5lfcJox0IkB0TTLqZI-O6eIOeNR0pw/edit?usp=sharing

Ответить
Развернуть ветку
Петр Виноградов

Да, "Курск" очень крутой получился..

Ответить
Развернуть ветку
Анна Оботнина

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

Ответить
Развернуть ветку
Юджин Нубченко

Крутые работы, делайте еще подборки.
На скелетах залип :))

Ответить
Развернуть ветку
Борис Васильев

Есть ли какая-то возможность что-то использовать, не нарушая авторских прав?
Как и с кем заключить Договор?

Ответить
Развернуть ветку
Николай Романов
Автор

Тут нужно политику каждого из участников читать. Это же в основном большие медиа типо NY Times, там есть свои нюансы

Ответить
Развернуть ветку
Roman Trifonov

Почти все работы прекрасно будут работать на новом iMac с i7, 32 Гбайт RAM и какой-нибудь 5500XT на 8 Гбайт. 

Но как только эти поделия приземлятся на старый ноутбук с i3, 4 Гбайт RAM и встроенной HD520 (или около того), вся верстка в лучшем случае пойдет через задницу, а в худшем — вообще не будет грузиться.

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

Ответить
Развернуть ветку
Алексей Ковалёв

Про маски смешно :) они там с масштабом ниче не напутали часом? И опять же, кто сказал, что первоначално задержанные частицы вируса при последующем вздохе не срываются и не попадают в легкие? Ну и еще один момент - к маскам нужны очки, так как через слизистую глазок все прекрасно попадает в ваш организм.

Ответить
Развернуть ветку
Читать все 18 комментариев
null