Интерактивная инфографика примеры: Интерактивная | Infogra

Лучшие примеры анимированной инфографики / Хабр

alizar

25 июн 2007 в 19:10

Время на прочтение 2 мин

Количество просмотров

4.4K

Управление медиа *

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

Один з ведущих мировых специалистов в области анимированной инфографики Альберто Каиро (Alberto Cairo), готовит к изданию учебник по визуальной журналистике. Сейчас испанец переехал в США и преподаёт в университете Северной Каролины, а с некоторыми работами его студентов можно познакомиться на этой странице.

Точное определение инфографики довольно трудно подобрать из-за её изменчивой природы. В принципе, любое сочетание текста и визуальных элементов можно назвать инфографикой. Типичные примеры — изображение карты для передачи географической информации, использование диаграмм для передачи статистических данных. Эти виды инфографики можно увидеть почти в каждой газете. Хорошая инфографика способна показать невидимые тренды и зависимости. Огромные объёмы информации сжимаются до размера маленькой картинки.

Если говорить о лучших примерах анимированной инфографики в наше время, то на первом месте стоит сайт газеты New York Times благодаря совершенно замечательным средствам анимированной статистики с возможностью подстройки под пользователя. Интерактивная диаграмма снизу — один из примеров, как читатели могут «поиграться» с финансовой информацией.

Ещё более профессионально в NY Times была подана информация о стрельбе в Вирджинском университете. Альберто Каиро называет этот проект (беспл. рег.) лучшим, что он видел в жизни. С ним нельзя не согласиться: выглядит всё просто великолепно.

Отличная школа инфорграфики сохраняется в испанских онлайновых СМИ. На их страницах часто можно увидеть детальные 3D-модели тех или иных объектов.

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

via Интервью Альберто Каиро на OJR

Теги:

• Альберто Каиро
• инфографика
• анимация
• флэш
• 3D
• онлайновая журна

Хабы:

• Управление медиа

Всего голосов 8: ↑8 и ↓0 +8

Комментарии 3

Анатолий Ализар @alizar

автор, фрилансер

Telegram

Комментарии Комментарии 3

Как управляли нашим восприятием за счет инфографики и почему сегодня она уже не работает? Разбираемся в статье — Маркетинг на vc.

ru

Визуальному повествованию в онлайне уже около 20 лет. В 2000-е интернет перестал быть текстовым и начал сдвиг в сторону визуала. Одним из мощных инструментов считалась инфографика. Нам в ДАЛЕЕ стало интересно, как именно она развивалась, что дала интернету и во что трансформировалась сегодня. В статье — наши наблюдения и мысли.

2876 просмотров

Как инфографика пришла в онлайн

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

Инфографике, как явлению, уже много столетий. Даже наскальную живопись, средневековые чертежи и первые географические карты можно рассматривать как разновидности инфографики. Если говорить о более современном этапе, то в интернет она перешла из рекламных и печатных материалов. А основные постулаты инфографики сформулировал легендарный Эдвард Тафти в своих книгах.

Старожилы интернета помнят, что в 90-00-е он был, в основном, текстовым. Визуала не хватало. Да и в онлайне сидели гики, которым были не страшны лонгриды. Дальше подтянулась новая аудитория, которая использовала интернет, но не любила тексты. Инфографика стала прорывом для этого сегмента. Даже простой ее перенос, без учета особенностей для онлайна, произвел вау-эффект.

Преимуществом формата было то, что им хотелось делиться. Инфографика спекулировала на т. н. боязни пропустить что-то интересное (fear of missing smth out). Люди сохраняли ее себе в профиль или в заметки с мыслью: «Сейчас времени нет, но потом точно посмотрю», формируя бесконечный список для чтения. Что бывает с такими списками всем хорошо известно.

Большие охваты и вовлеченность подстегнули людей и бизнес создавать отделы по визуализации данных или даже студии инфографики. Россия не осталась в стороне — в 10-х крупные информагентства тоже пошли в сторону инфографики. Начала складываться российская индустрия и комьюнити инфограферов.

ТАСС и РИА Новости даже создали целые студии инфографики. Появились и коммерческие компании.

В те годы к ней не было определенных критериев, каждый делал кто во что горазд. И часто визуализация данных не облегчала восприятие информации, а служила украшением и была направлена на вау-эффект. Она лишь создавала у читателя ощущение, что он в чем-то разобрался. На волне популярности в этот формат начали упаковывать буквально все, и это не могло не сказаться на качестве.

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

Пример инфографики, выполняющей роль «декорации». В ней непонятен принцип размещения информации и то, откуда надо начинать или в каком порядке надо двигаться. Также не выстроены связи между группами данных. Источник: Tinder Foundation

Пример «тяжеловесной» по современным меркам инфографики от РИА Новости. В этом визуале слишком много текста. А разные сущности сливаются в одну из-за того, что используется лишь один тип диаграммы. Источник: РИА Новости.

Мы не считаем, что лонгриды и сложная инфографика никому не нужны. Просто пользователи за 10 лет стали избирательнее: они будут вчитываться и разбираться в материале, только если его полезность будет неоспоримой.

Инфографика была одним из инструментов, сделавших интернет визуальным. Она задала направление мысли для контентмейкеров — наглядность и желание поделиться. Однако несмотря на бешеную популярность в 2000-2010-е, сегодня она вытесняется более современными форматами и «ищет свое место» в постоянно обновляющемся цифровом мире.

Смысловые уровни инфографики

Визуализация данных → Визуализация процессов → Карта / экосистема
↓
Объединение всех форматов

Чем сложнее охватываемый материал, тем больше смысловых уровней должна охватить инфографика. Условно можно выделить четыре основных уровня, рассмотрим каждый.

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

Круговая диаграмма. Если рассматривать ее без легенды, то она малоинформативна. Источник: BuiltWith

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

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

Эта иллюстрация может работать в отрыве от контекста.

Источник: Skyword

Карта / визуализация процесса: разновидность единицы информации, которая содержит в себе контекст с взаимосвязями. Пользователь получает исчерпывающие данные о процессе или явлении.

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

Источник: MediaMarkt

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

Вот пример такой инфографики (она интерактивная).

Источник: National Geographic. The New New York Skyline.

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

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

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

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

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

Здесь картинка существует отдельно от текста и не добавляет контекста. Источник: СПбГБПОУ «Колледж Звёздный».

Что вытеснило инфографику

Есть две большие причины вытеснения инфографики.

#1. Инфографику тяжело «сканировать» взглядом по сравнению с другими форматами

В 2020 году Nielsen Norman Group провела исследования о том, как люди читают в интернете. Основной вывод обеих работ был таким:

«Мы говорим об этом с 1997 года: люди редко читают в интернете — они гораздо чаще сканируют, чем читают слово в слово. Это одна из фундаментальных истин в отношении поиска информации в сети, которая не менялась в течение 23 лет и которая существенно влияет на то, как мы создаем цифровой контент»

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

#2. Новая модель медиапотребления: видео

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

YouTube полностью поменял наше восприятие контента: перенес в видеоформат образование, развлечения, приучил к потоковому видео. Примерно в одно время с ним появился Twitter, положив начало эре коротких текстов. Дальше пришел TikTok, привнесший шортсы. Пока что это последнее большое изменение в медиапотреблении.

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

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

Что осталось от инфографики сегодня

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

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

Вот пример простой, но мощной инфографики о статистике смертей от огнестрельного оружия в США:

А здесь умелое использование инфографики вместе с другими форматами: текст, видео и аудио.

Источник: Возводя стены — спецпроект The Washington Post

Из примеров нескучной статичной инфографики можно выделить лонгрид NY Times What Happened Inside the Orlando Nightclub, где реальные фотографии и планы здания используются как фон для объяснения последовательности событий во время стрельбы в ночном клубе в Орландо. Но опять же: этот пример — скорее, исключение из правила.

Источник: NY Times, What Happened Inside the Orlando Nightclub

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

Новизна формата в 2000-е обеспечила ему популярность. С помощью инфографики СМИ и компании умело управляли пользовательским вниманием. Инфографика позволяла расставлять акценты так, как было выгодно автору(ам). Например, это хорошо работало в рекламных креативах, а за счет эффекта «сканирования» большая часть аудитории вряд ли могла раскусить хитрость. Или же этот прием помогал манипулировать статистикой. Это сейчас мы с вами умные и знаем, куда смотреть и на что обращать внимание. А в 2000-е аудитория была не искушена.

Как сделать инфографику, чтобы она не устарела через месяц

На наш взгляд, качественная инфографика в 2023 году должна соответствовать двум критериям:

Также можно проверять себя с помощью показателя data-ink ratio, придуманного Эдвардом Тафти.

Data-ink ratio — это соотношение ценности данных и количества пикселей для их визуализации (чернил, если говорить о печатных форматах).

Смысл в том, что вы пробуете убрать те или иные части из визуализации данных — если это получилось сделать безболезненно, инфографика была перегружена (низкий показатель data-ink). Если нет — поздравляем, у вас хорошая инфографика (высокий показатель data-ink).

Чек-лист

И вдогонку оставляем чек-лист по подготовке инфографики:

• Убедитесь, что вам точно нужен именно формат инфографики. Возможно, тему, которую вы хотите раскрыть, лучше подать в виде лонгрида или вообще сделать видео. Если инфографика ближе к визуализации данных, а не комплексного процесса, то это уже тревожный звоночек.

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

• Выберите 2-3 основных типа визуализации.

• Следите за показателем data-ink — сбережете и пиксели и свое время.

• Не забывайте о выстраивании связей между элементами. Попробуйте проверить читабельность таким способом: вслух проговаривайте утверждения, которые транслирует каждая единица информации в заданном дизайном порядке. Если получается связно, значит, все нормально.

Делитесь в комментариях вашими способами работы с инфографикой.

А здесь мы для вас собрали ссылки на интересные материалы по инфографике:

1. Больше годной инфографики на сайте с победителями Malofiej Awards — это ежегодная премия по инфографике.

2. Книги Эдварда Тафти в электронном виде.

3. Раздел Graphics от NYT, которые любят и умеют делать инфографику.

5. Большой архив инфографики: примеры с разбивкой по тематике, компании, статьи, инструменты для ее создания и т. д.

P. S.: Подписывайтесь на 👉наш Telegram, там пишем полезное о digital, рассказываем о нашей внутрянке.

Лучшая интерактивная инфографика 2020

Интерактивная инфографика: Мы покажем вам лучшее

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

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

И чтобы убедиться, что вы получили достаточно вдохновения, я искал лучшую интерактивную инфографику. Вуаля, вот и сливки, которые в настоящее время распространяются в Интернете.

Лучшая интерактивная инфографика 

«Пластиковые моря» 

Нажмите здесь, чтобы перейти к интерактивной версии.

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

Хронология Вселенной

Это не интерактивная инфографика в привычном понимании, а видеоинфографика. Но при этом одинаково интерактивный. Драматическая музыка в сочетании с впечатляющей графикой создают загадочную атмосферу и переносят зрителя в захватывающее дух путешествие по истории вселенной. Идеальный способ передать сложные знания в увлекательной форме и надолго остаться в памяти целевой группы.

«Горизонт Нью-Йорка»

Нажмите здесь, чтобы открыть интерактивную версию.

Корона, возможно, разрушила вашу долгожданную поездку мечты в Большое Яблоко. Тем не менее, вы можете получить небольшое представление о небоскребах Нью-Йорка. Журнал National Geography показывает вам в интерактивной инфографике, как горизонт изменился с 2004 года. Возможен даже 3D-просмотр. Пакуйте чемоданы и поехали!

«Как построить человеческий мозг» — GIF-инфографика

Источник: spielcreative.com

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

Графика проводит пользователя в визуальном путешествии по всем 40 неделям беременности и, таким образом, объединяет разнообразную ценную информацию под одной крышей, не перегружая ее. Дополнительная анимация сразу привлекает внимание. Интересно, почему такие иллюстрации не используются чаще в классах. По крайней мере, на уроках биологии ученики будут уделять больше внимания ;).

Целевая страница – передовой опыт 

Нажмите здесь, чтобы открыть интерактивную версию.

Как создать эффективную целевую страницу? Это именно то, на что E-mail Monks хочет ответить этой анимированной инфографикой. Зритель проезжает по «Дороге целевой страницы» и достигает пункта назначения после различных остановок. Красочный, привлекательный дизайн добавляет завершающий штрих. Ну тогда удачной езды!

 Экономические диспропорции в США

Щелкните здесь, чтобы открыть интерактивную версию.

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

Как динамики издают звук – анимированная инфографика

Щелкните здесь, чтобы открыть интерактивную версию.

Есть здесь музыканты, любящие технологии? Эта инфографика может быть особенно интересна для вас. GIF-анимация подробно показывает, как устроен громкоговоритель или музыкальный автомат и как он воспроизводит звук. Прекрасное доказательство того, насколько эффективной может быть инфографика для объяснения сложных технических продуктов.

Изменение климата – интерактивная инфографика 

Нажмите здесь, чтобы открыть интерактивную версию.

Глобальное потепление — жестокая реальность, с которой нужно бороться как можно скорее. В этом контексте «Проект решений» имеет очень четкую цель: США должны полностью перейти на возобновляемые источники энергии к 2050 году. Чтобы запустить проект, они создали интерактивную инфографику карты, которая иллюстрирует текущее состояние энергопотребления. Пользователь может нажать на любой штат США, чтобы получить подробную информацию. Инфографика в виде карт, как правило, является идеальным способом яркой передачи географически связанных данных.

Дорога Cleverclip к совершенству Малкольм Гладуэлл играет в Seinem Buch «Outliers-The story of Success», dass wir nach 10’000 Stunden Ausübung, Meister in einer bestimmten Aktivität werden.

Meine Kollegen und Kolleginnen bei Cleverclip haben ihn sehr beim Wort genommen und darauf basierend eine «путь к совершенству» erstellt.

Ob Zwiebelschneiden, Schuhebinden oder Tauchen, der Nutzer kann in null Komma nichts erfahren, wie gut er in einer beliebigen Aktivität wirklich ist. Übrigens, водопады es noch Spielraum nach oben gibt, geben wir natürlich auch ein paar Expertentipps. Нажмите здесь, чтобы воспроизвести или прочитать дело полностью. или прочитать полный вариант использования.

13 причин, по которым ваш мозг жаждет инфографики 

Нажмите здесь, чтобы открыть интерактивную версию.

Поскольку мы все это время говорили об инфографике, возможно, стоит напомнить себе, почему она так важна. Именно так подумала команда NeoMam Studios и таким образом визуализирует 13 причин, по которым наш мозг любит инфографику. Инфографика развлекательная, четко структурированная и вдобавок очень информативная. Вот именно так и надо!

Распорядок дня известных творческих личностей

Щелкните здесь для интерактивной версии.

Сколько часов в сутки спал Моцарт? Сколько раз в день ел Бенджамин Франклин? А сколько часов творческой работе посвятил себя Пикассо? Теперь вы можете легко это узнать с помощью этой интерактивной инфографики. Основываясь на «Ежедневных ритуалах» Мэйсона Карри, вы можете фильтровать по различным категориям, а затем наводить указатель мыши на столбцы, чтобы получить больше информации.

Семейные доходы WiHow влияют на шансы детей поступить в колледж

Нажмите здесь, чтобы открыть интерактивную версию.

Это не совсем классическая инфографика, но все же очень интересный и интерактивный метод передачи фактов посредством сторителлинга. Здесь вы можете сначала составить свою смету, сравнить ее и получить дополнительную информацию.

Как далеко Марс?

Щелкните здесь для просмотра интерактивной версии.

Впечатляющий способ показать пользователю, как далеко Марс находится от Земли. С отображением дополнительной информации все путешествие по космосу превращается в занимательное приключение.

Путь социальных изменений 

Щелкните здесь для просмотра интерактивной версии

Захватывающая интерактивная инфографика, иллюстрирующая социальные изменения в США. Анализируются шесть основных тем: смешанные браки, запрет, избирательные права женщин, аборты, однополые браки и легализация марихуаны. Нажимая на соответствующие состояния, пользователь может узнать, как эти области развивались или могут измениться в будущем.

Поток беженцев в Европу

Щелкните здесь для просмотра интерактивной версии.

Тоже уже не совсем актуальная, но все равно очень информативная. Здесь показано движение беженцев с 2012 года в Европе. Каждая точка является репрезентативной примерно для 25 человек. Пользователь может перемещать указатель мыши по отдельным странам, чтобы получить более подробную информацию. На временной шкале также можно установить точный год и месяц.

Как создать такую ​​захватывающую дух интерактивную инфографику

Теперь, когда вы (надеюсь) достаточно вдохновлены, чтобы приступить к делу, вы можете задать себе вопрос из всех вопросов: «Как мне на самом деле создать интерактивную инфографику?

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

Интерактивная инфографика обычно реализуется с помощью HTML5, Javascript и JQuery. В принципе, сначала создается статическая HTML-страница со встроенными скриптами, которые затем включают динамику. Для креативного оформления инфографики также есть множество онлайн-инструментов. Вот подборка особо популярных программ:

1. Визуальный
2. Канва
3. Висме
4. Картограф (для интерактивной карты)
5. Битовый
6. Adobe Spark

Важные шаги при создании интерактивной инфографики

Независимо от того, является ли инфографика интерактивной или статической, всегда следует учитывать некоторые общие факторы:

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

2. Ключевое сообщение и добавленная стоимость
Инфографика должна передавать ключевое сообщение, а также наиболее важные моменты, которые аудитория может понять в течение короткого времени. Также убедитесь, что инфографика предоставляет аудитории решающую дополнительную ценность.

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

4. Визуально привлекательный
Эффективная инфографика характеризуется хорошим балансом между графикой и негативным пространством. Без достаточного пустого пространства любая инфографика быстро становится перегруженной. Цветовая схема также играет роль: как правило, эмпирическое правило состоит в том, чтобы ограничить себя максимум тремя цветами из цветовой палитры, причем самый светлый цвет обозначает фон, а два более темных — разные элементы.

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

Помимо самостоятельного создания с помощью онлайн-инструментов, конечно, также возможно сотрудничество с профессиональным агентством. Это особенно полезно, если тема сложная и содержит много информации и фактов. Несмотря на более высокие затраты, агентство точно знает, как должна быть представлена ​​информация, чтобы предоставить аудитории решающую дополнительную ценность. Творческая команда поможет вам профессионально интегрировать интерактивные элементы и, таким образом, создать захватывающий пользовательский интерфейс с привлекательным дизайном. Хорошее агентство также всегда будет пытаться найти хорошее соотношение цены и качества для разных бюджетов.

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

Заключение

Я очень надеюсь, что вам понравилось это небольшое визуальное путешествие в страну визуализации данных. Интерактивная инфографика определенно может обогатить вашу маркетинговую стратегию. Они упаковывают сложную информацию в захватывающую историю и мотивируют зрителя к активному участию. Благодаря интерактивным элементам они также могут вместить больше информации, чем статическая инфографика. Вы сталкивались с интересной интерактивной инфографикой, которой нет в этой статье? Тогда дайте нам знать. Кстати, в последнее время я ищу много «лучшего». Посмотрите лучшие обучающие видеоролики 2020 года или окунитесь в увлекательное путешествие по целевой странице.

Более 10 анимированных и интерактивных инфографик, оживляющих контент

Аззиф Халик из отдела культуры. Обновлено 6 апреля 2023 г. .

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

Одним из способов сделать это является анимированная инфографика .

Анимированная и интерактивная инфографика, особенно разработанная с использованием HTML5, вполне возможно будущее инфографики . Анимированная инфографика лучше привлекает зрителей и может помочь повысить интерес к темам, которые в противном случае могли бы показаться обыденными.

Вот список из 10+ анимированных и интерактивных инфографик , которыми вы можете наслаждаться и черпать вдохновение. Щелкайте по ссылкам, чтобы перейти к полной версии инфографики с анимацией.

20+ лучших инструментов для инфографики

20+ лучших инструментов для инфографики

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

Hungry Tech Giants

Эта интерактивная инфографика представляет собой хронологию приобретений пяти крупнейших мировых технологических компаний за последние 15 лет.

Готовность к HTML5 и CSS3

Эта интерактивная инфографика представляет собой разбивку поддержки HTML5 и CSS3 во всех основных веб-браузерах до 2013 года.

Эволюция Интернета

В этой инфографике используются элементы SVG, хронология браузеров и технологий, а также развитие самого Интернета.

Inception

В этой инфографике используется анимация, которая помогает объяснить, что произошло в фильме «Inception». Минималистский дизайн определенно помогает достичь этой цели.

Flights Interactive

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

Бонд: водительские права

Эта прекрасно анимированная, разработанная и нарисованная инфографика показывает эволюцию автомобилей Бонда, начиная с Sunbeam Alpine в «Докторе» и заканчивая «Dr. Нет», вплоть до Land Rover Defender в «Скайфолл».

Крупнейшие в мире утечки данных

Эта интерактивная инфографика представляет собой визуализацию всех крупнейших утечек данных с 2004 года.

Тринадцать причин, почему ваш мозг жаждет инфографики

Эта очаровательная анимированная инфографика дает краткий обзор того, почему мы так любим инфографику.

Как работает поиск

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