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

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

Разновидности

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

· Числа в картинках: наиболее распространённая категория, которая позволяет сделать числовые данные более удобоваримыми,

· Расширенный список: статистические данные, линия времени, просто набор фактов может быть визуализирован,

· Процесс и перспектива: служит для визуализации сложного процесса или предоставления некоторой перспективы. Может вообще не содержать числовых данных.

По способу отображения инфографика подразделяется на следующие виды:

· Статичная инфографика — одиночные изображения без элементов анимации;

· Динамическая инфографика — инфографика с анимированными элементами. Основными подвидами динамической инфографики являются видеоинфографика, анимированные изображения, презентации.

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

Движущиеся изображения, особенно в сочетании со звуковым сопровождением, привлекают внимание людей больше, чем статические изображения. Этот вид инфографики становится всё более популярным. Технологии HTML5, CSS3 и JavaScript (ранее — Flash) позволяют располагать текстовый и графический материал поверх видео, создавая эффект расширенной реальности^[14].

Интерактивные инфографические интерфейсы (англ. interactive infographic interfaces) варьируются от самых простых до сложных и динамических. Этот вид инфографики особенно приспособлен для презентации большого объёма данных и привлечения пользователя к активному исследованию при получении требуемой им информации. Через интерактивный интерфейс можно подать как фиксированную информацию (англ. hard-coded), информацию о ситуации в виде приборной доски, а также обновляющуюся информацию в реальном времени

 

По типу источника различают 3 основных вида инфографики:

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

· Новостная инфографика — инфографика, подготавливаемая под конкретную новость в оперативном режиме;

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

 

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

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

Следующий шаг — это поиск нужных данных и статистики. Проблема в том, что найти в открытых источниках эти материалы бывает сложно. Можно брать результаты исследований с сайтов Левада-Центр, ФОМ, Росстат. Еще удобно пользоваться специальным поиском в Гугл. Я искала всеми этими способами и получила 20 листов А4 одного только текста. А ведь были еще схемы, графики и иллюстрации.

 

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

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

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

Еще фотографии можно брать со стоков — это хранилища платных и бесплатных изображений. Конечно, уникальной картинки там не найти, но это способ решить проблему иллюстрирования работы без воровства. Самые известные ресурсы: Shutterstock, Gettyimage, Freeimages и другие.

 

Например Noun Project. Когда скачиваете символ, вам предлагают два варианта: либо забираете иконку бесплатно и используете только в творческих целях, либо покупаете для коммерческих проектов.

Одна иконка стоит 2 доллара, месячная подписка на все коллекции — 4 доллара, или можно купить доступ на год за 40. За эти деньги вы получаете лицензию типа Royalty-Free. Это значит, что иконку нельзя использовать в логотипе или выдать за свою работу, но вы можете изменять ее вид и вставлять в разные проекты без ограничений.

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

 

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

Лицензия с минимальными ограничениями это Creative Commons: CC-BY. Она позволяет использовать чужую работу как угодно при условии, что вы указываете авторство.

Онлайн инструменты

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

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

 

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

Сходство

Создать сходство (или контраст) в инфографике можно с помощью цвета, размера или формы

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

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

 

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

Близость

Группировать только то, что поддерживает общую логику инфографики

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

 

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

 

Простота

И отсечь все, что усложняет композицию и отвлекает от созерцания гармонии

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

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

 

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

Завершенность

Особенности восприятия «автоматически» дополнят картину

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

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

 

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

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

o примерно 65% людей воспринимают визуальную информацию гораздо лучше, чем текст;

o контент, в котором использованы визуальные элементы и графика, может генерировать до 94% больше просмотров;

o уровень взаимодействия с инфографикой со стороны посетителей примерно на 40% выше, чем по отношению к страницам, на которых размещено только текст;

o люди запоминают более 80% информации, которую видят, и менее 20% того, что читают;

o мозг обрабатывает визуальную информацию примерно в 60 000 раз быстрее, чем текст.

 

Думайте визуально

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

Используйте временную шкалу

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

Создайте диаграмму связей

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

Используйте метафору

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

Проиллюстрируйте тренд

Инфографика может продемонстрировать тренд в мире технологий (или в вашей индустрии) и при помощи графиков проиллюстрировать прогноз на будущее.

Создайте гид

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

 

Составьте коллаж

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

Добавьте «приманку»

«Приманка» — это то, что привлекает внимание пользователя. В качестве «приманки» вполне можно использовать инфографику, либо ее ярки элемент.

Мыслите универсально

Хотя все мы понимаем вещи по-разному (из-за разного восприятия, опыта и окружения), постарайтесь использовать только те данные и изображения, которые будут расценены большинством людей одинаково.

Добавьте призыв к действию

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

 

Кто участвует в создании инфографики.

Аналитик. Собирает информацию, потом анализирует и обрабатывает её, приводит к одному знаменателю — обычно это неоформленные графики, гистограммы
Журналист. Пишет тексты, придумывает канву
Дизайнер. Компанует полученный материал, наводит марафет
Программист. Работает над интерфейсом и динамическими элементами

Как сделать?

Сбор информации

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

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

Создаем историю

Советы — рассказ о том, как поступить в том или ином случае. Рассчитаны на определенную категорию читателей, отличаются тем, что со временем не устаревают.

Факты, которые вы не знали — инфографика представляет новые или малоизвестные факты в интересном
свете. Можно также комбинировать известные факты и представить их по-новому.

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

Эскизы/раскадровка

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

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

Макетирование

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

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

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

Разновидности

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

· Числа в картинках: наиболее распространённая категория, которая позволяет сделать числовые данные более удобоваримыми,

· Расширенный список: статистические данные, линия времени, просто набор фактов может быть визуализирован,

· Процесс и перспектива: служит для визуализации сложного процесса или предоставления некоторой перспективы. Может вообще не содержать числовых данных.

По способу отображения инфографика подразделяется на следующие виды:

· Статичная инфографика — одиночные изображения без элементов анимации;

· Динамическая инфографика — инфографика с анимированными элементами. Основными подвидами динамической инфографики являются видеоинфографика, анимированные изображения, презентации.

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

Движущиеся изображения, особенно в сочетании со звуковым сопровождением, привлекают внимание людей больше, чем статические изображения. Этот вид инфографики становится всё более популярным. Технологии HTML5, CSS3 и JavaScript (ранее — Flash) позволяют располагать текстовый и графический материал поверх видео, создавая эффект расширенной реальности^[14].

Интерактивные инфографические интерфейсы (англ. interactive infographic interfaces) варьируются от самых простых до сложных и динамических. Этот вид инфографики особенно приспособлен для презентации большого объёма данных и привлечения пользователя к активному исследованию при получении требуемой им информации. Через интерактивный интерфейс можно подать как фиксированную информацию (англ. hard-coded), информацию о ситуации в виде приборной доски, а также обновляющуюся информацию в реальном времени

 

По типу источника различают 3 основных вида инфографики:

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

· Новостная инфографика — инфографика, подготавливаемая под конкретную новость в оперативном режиме;

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

 

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

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

Следующий шаг — это поиск нужных данных и статистики. Проблема в том, что найти в открытых источниках эти материалы бывает сложно. Можно брать результаты исследований с сайтов Левада-Центр, ФОМ, Росстат. Еще удобно пользоваться специальным поиском в Гугл. Я искала всеми этими способами и получила 20 листов А4 одного только текста. А ведь были еще схемы, графики и иллюстрации.

 

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

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

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

Еще фотографии можно брать со стоков — это хранилища платных и бесплатных изображений. Конечно, уникальной картинки там не найти, но это способ решить проблему иллюстрирования работы без воровства. Самые известные ресурсы: Shutterstock, Gettyimage, Freeimages и другие.

 

Например Noun Project. Когда скачиваете символ, вам предлагают два варианта: либо забираете иконку бесплатно и используете только в творческих целях, либо покупаете для коммерческих проектов.

Одна иконка стоит 2 доллара, месячная подписка на все коллекции — 4 доллара, или можно купить доступ на год за 40. За эти деньги вы получаете лицензию типа Royalty-Free. Это значит, что иконку нельзя использовать в логотипе или выдать за свою работу, но вы можете изменять ее вид и вставлять в разные проекты без ограничений.

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

 

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

Лицензия с минимальными ограничениями это Creative Commons: CC-BY. Она позволяет использовать чужую работу как угодно при условии, что вы указываете авторство.

Онлайн инструменты

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

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

 

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