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

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

1. Бизнес. С помощью инфографики можно продемонстрировать бизнес-проект инвесторам, показать заработок организации, план работ и многое другое.
2. Образование. Дети, да и не только они, любят красочные картинки. Так почему бы не использовать такую особенность в образовательных целях? Благодаря красочности получится дольше удерживать внимание учащихся, что позволит дать им больше знаний. К тому же, картинки вызывают ассоциации: после такой презентации темы, ребята смогут запомнить больше информации.
3. Контент. Неважно, делаете вы инфографику для бумажного издания или для социальных сетей. Во всех случаях она будет привлекать внимание и сильно разбавлять текстовый контент. Однако цена за такой вид контента будет в разы больше, чем обычный текстовый (об этом мы поговорим чуть позже). 

4. Маркетинг. Инфографика в маркетинге ― это отличная возможность передать потенциальным потребителям информацию не в форме надоедливой рекламы.

    

Существуют пять основных типов инфографики:

1. Аналитическая, или цифровая. В ней представлено много цифр, диаграмм, графиков и др. Текста почти нет. Такой вид часто используют We Are Social и Hootsuite в своем ежегодном отчёте о состоянии цифровой сферы Global Digital.
   
   Инфографика: пример. Источник: Отчёт Global Digital 2021

    

2. Информационная, или новостная инфографика. Её задача — кратко описать какое-либо событие, отразить этапы происходящего. У этого вида инфографики обычно больше всего текста на изображении.
   
   Источник: https://www.kaspersky.ru/resource-center/infographics/safe-money

    

3. Инфографика-конструктор. Показывает, из чего состоит объект или как происходит явление. Иногда такой вид используют, чтобы показать  хронологию исторического события. В этом случае, в отличие от информационного вида, на изображении намного меньше текста. Это скорее выглядит, как схема.
   
   Источник: https://infogra.ru/infographics/kofejnaya-infografika

    

4. Рекламная инфографика. Она помогает компаниям рассказать о преимуществах продукта, выгодных ценах. Это работает лучше, чем обычный рекламный баннер. 
   
   Источник: http://infographicsmag.ru/works/static/reklama-v-stile-infografiki.html

    

5. Инфографика-сравнение. Позволяет сделать наглядное сравнение характеристик двух и более объектов. 
   
   Источник: https://riamo.ru/article/86505/kofe-protiv-chaya-chto-poleznee-dlya-zdorovya.xl

    

Плюсы

Начнём с положительных сторон этого инструмента. 

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

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

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

Минусы

Теперь перейдём к недостаткам. 

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

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

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

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

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

Если речь идёт о создании картинок, то здесь никуда без сервиса Canva. В ней есть шаблоны для инфографики разного вида. Главный минус этого инструмента ― нельзя сделать горизонтальную инфографику. В Canva есть шаблоны только для вертикальных и длинных картинок. 

Из положительного: 

• 100+ профессионально разработанных шаблонов,
• удобная настройка текста, диаграмм, цветов,
• можно сохранить в нескольких форматах: JPG, PNG, PDF,
• HTML-код для вставки на сайт.

Так же, как и в Canva, все шаблоны длинные и вертикальные. Других вариантов, к сожалению, нет.

Доступна опция совместной работы. Чтобы к вам не заглядывали незванные гости, в программе можно  ограничить права доступа. Сервис предлагает сотни шаблонов, интерактивных графиков и более 500 карт. Интерактивные диаграммы, отчёты и карты могут собирать данные об их просмотрах. Созданные изображения можно сохранять в форматах PNG, PDF или GIF или встраивать на сайт благодаря HTML-коду. Сервис умеет работать с Google Drive и Dropbox. Как и в предыдущих сервисах, можно делать только вертикальную инфографику.

Вот здесь шаблоны ограничены не только вертикальными изображениями. На выбор есть много горизонтальных. Созданную инфографику можно сохранить в виде JPG-файла, а можно разместить сразу на сайте с помощью HTML-кода. Большой минус сервиса ― нет автоматического сохранения, поэтому при работе с изображением не забывайте нажимать на кнопку «Save».

Шаблоны очень разнообразные как по форме, так и по размеру, что определённо выделяет его на фоне других приложений. Есть возможность  добавления форм подписки и опросов. К слову, они ведут интересный блог на своём сайте, где приводят много примеров инфографики. Оттуда можно почерпнуть вдохновения для новых работ. 

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

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

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

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

Стиль должен соответствовать теме. Элементы схемы должны быть не только едины между собой, но и соответствовать теме. Например, для темы о еде не стоит выбирать мрачные тона. Читатель может подумать, что ваш рецепт не очень вкусный.  

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

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

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

8 примеров интерактивной инфографики, рассказывающих впечатляющие истории

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

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

Что такое интерактивная инфографика?

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

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

Использование интерактивной инфографики для визуального повествования

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

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

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

8 Примеры интерактивной инфографики

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

ServiceNow

Инфографика ServiceNow « The Sustainability Advantage» была создана в Vev компанией Message Lab. На этом интерактивном веб-сайте подробно рассматривается важность экологических, социальных и корпоративных структур. По мере того, как читатель прокручивает страницу вниз, контент оживает разными способами, превращая то, что в противном случае могло бы быть сухим фрагментом контента, в визуально привлекательную динамичную историю.

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

Управление ООН по наркотикам и преступности

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

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

Нам всегда нравится видеть примеры веб-сайтов, которые опираются на повествование при развертывании контента, и Треверк так хорошо рассказывает о себе с помощью этого дизайна, который они разработали вместе с Вев.

Human Rights House Foundation

Годовой отчет 2021 некоммерческой организации Human Rights House — еще один прекрасный пример того, как интерактивная инфографика может помочь читателям визуализировать данные. Начало с видео людей помогает очеловечить проблемы в отчете, который также сделан в Vev, и сразу же придает контенту убедительный фотожурналистский вид.

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

Eidsiva Energi

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

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

WWF Canada

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

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

Oxfam Ireland

Еще одним прекрасным примером использования интерактивной инфографики в некоммерческих целях является отчет Oxfam Ireland за год . Цель инфографики — сообщить о влиянии Oxfam Ireland на мир. Он начинается с интерактивной карты, которая постоянно меняется по мере прокрутки читателем, при этом различные участки карты выделяются и появляются текстовые поля.

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

Морской попечительский совет

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

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

Penguin Books UK

Хорошим примером интерактивной инфографики, рассказывающей историю с помощью иллюстраций, является Penguin UK’s 9.0011 Lit in Color , который был создан с помощью аналитического центра по вопросам расового равенства The Runnymede Trust. Цель состояла в том, чтобы сделать преподавание и изучение английской литературы более инклюзивным, и инфографика начинается с использования иллюстрированной статистики, чтобы подчеркнуть текущее отсутствие разнообразия в школьной программе.

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

Простой способ создания расширенной интерактивной инфографики

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

Откройте для себя Vev

Хотите узнать больше?

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

Создавайте интерактивную инфографику бесплатно

Интерактивная инфографика делает любые данные или процессы запоминающимися и легкими для понимания. С Genially создавать инфографику легко и бесплатно. Кроме того, они полны интерактивности и анимации.

Интерактивная инфографика на все случаи жизни

Инфографика пришла в вашу жизнь, чтобы гарантировать успех.

Временная шкала или диаграмма

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

Образовательная инфографика

Каким было бы обучение без наглядных пособий? Сделайте любую тему запоминающейся.

Маркетинговая инфографика

Выделиться и общаться с аудиторией стало проще благодаря интерактивной инфографике.

Резюме Инфографика

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

Сделайте гениальную, а не стандартную инфографику

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

НЕ НАЧИНАЙТЕ С НУЛЯ

Самые креативные инфографические шаблоны

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

• Gowin’s Vee Diagram

• Self-Evaluation Rubric

• Squares Timeline Diagram

• Sales Pipeline

• Body Parts

• Inbound Cycle Diagram

• Pyramid Of Needs

• Руководство по чтению

• Гендерная диаграмма

• Хронология терраццо

• Резюме микросайта

• Резюме инфографики

Шаги по созданию интерактивной инфографики

ШАБЛОНЫ

Шаг 1: Выберите отличный шаблон

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

РЕДАКТИРОВАТЬ

Шаг 2: Настройте его по своему вкусу

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

MAGIC

Шаг 3: Анимация и добавление интерактивности

Чтобы упростить вам задачу, шаблоны Genially уже имеют предопределенные интерактивность и анимацию. Редактируйте и добавляйте больше интерактивности и анимации по своему вкусу, быстро и интуитивно.

ПОДЕЛИТЬСЯ

Шаг 4: Поделись со всем миром!

Готово! Представьте свою инфографику от Genially. Или вы можете поделиться ссылкой по электронной почте или в социальных сетях, вставить ее на веб-сайты или загрузить свою инфографику в формате PDF или HTML.

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

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

Легко. Инфографические шаблоны Genially разработаны профессионалами, чтобы сделать ваше творение привлекательным. Просто отредактируйте содержимое и измените дизайн по своему вкусу. Кроме того, в разделе «Вдохновение» вашего аккаунта вы найдете лучшие гениальные идеи от нашего сообщества. Вдохновляйтесь самой креативной инфографикой.

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