Введение в digital + Инфографика

1.

2.

3.

4.

5.

6.

7.

8.

9. ИНФОГРАФИКА

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

10. Есть три подхода к дизайну инфографики:

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

11. Хорошая инфографика должна обладать такими качествами как:

пригодность
полезность
красота
инфографика

12. Также для хорошей инфографики важны следующие аспекты:

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

13. Инфографики чаще всего бывают статичные и интерактивные

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

14. Основные способы визуализации данных

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

15. Основные способы визуализации данных

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

16. Основные способы визуализации данных

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

17. Основные способы визуализации данных

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

18. Основные способы визуализации данных

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

19. Основные способы визуализации данных

7. Круговой график.
Используется, когда есть множество переменных в отношении присущей им всем
характеристики.

20. Типы инфографики:

1. Инфографика-сравнение.
Когда исходные данные просты (с точки зрения своей структуры),
принадлежат к одному типу и наша задача — сравнить их между
собой, наглядно отобразив их соотношение.

21. Типы инфографики:

2. Инфографика-сценарий
Это инфографика, описывающая
некий процесс, действие,
разворачивающееся во времени.

22. Типы инфографики:

3. Рецепты, инструкции
По сути это частный случай предыдущего типа, ведь инструкция
или рецепт — это тоже процесс, разворачивающийся во
времени.

23. Типы инфографики:

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

24. Типы инфографики:

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

25. Типы инфографики:

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

26. Типы инфографики:

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

27. Типы инфографики:

8. Инфографика-карта
Информация, размещённая на карте.

28. Визуальный блок

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

29. Как создать инфографику?

1. Если вы работаете над определенной темой, то посмотрите на данные,
которые у вас есть или вы планируете с ними работать. Составьте список и
исследуйте их возможные связи, взаимосвязи, возможности для сравнения
и выбора. Хороший инструмент для этого — mindmap. Определите какие из
данных статичны, какие имеют непосредственную зависимость от других,
какие данные дискретны, а какие имеют системную природу.
2. Определите цель, с которой создается инфографика. Что вы хотите
донести, какие данные будут второстепенными и раскрывать нюансы, а
какие лягут в основную концепцию инфографики. Какой стиль оформления и
подачи информации вам выбрать. Очевидно, что если ваша цель состоит в
том, чтобы проинформировать людей в крупной корпорации, стиль
оформления и методы визуализации будут иные, чем если ваша цель
состоит в том, чтобы сделать вирусную инфографику для социальных сетей.
Точно также на выбор повлияют возраст, пол, культурные различия и
т.д. Продумайте концепцию и стиль изложения данных. Избегайте
неочевидных метафор — учитывайте национальный и культурный контекст.

30. Как создать инфографику?

3. Соберите данные из надежных источников. Пришло время собрать
информацию и данные — отнеситесь очень серьезно. Используйте только
надежные и авторитетные источники. Сообщения на форуме, записи блогов,
быстрый поиск в Яндексе или Ответы.Майл не являются надежными
источниками. Безусловно их можно использовать для укрепления
авторитетности, но не делайте ставку на данные, полученные из подобных
источников. Авторитетные источники это Wikipedia, сайты в доменной зоне
.gov (правительственные сайты), исследовательских кампаний и агрегаторов
статистической информации (www.google.com/publicdata/directory). Какая
информация у вас есть? Не обязательно цифры, это могут быть истории,
факты, биографии, процессы, сравнение результатов, прочее. Используйте
то, что подойдет для приближения к цели.
4. Опишите процесс повествования и подготовьте иллюстрации и
дизайн. Данные, которые вы выбрали для показа, должны быть показаны
последовательно, учитывать главное и второстепенное.

31. Как создать инфографику?

5. Внесите правки
Не пренебрегайте удобством восприятия ради красочности и эффектности. Смысл и данные на
первом месте, потом их оформление, которое лишь подчеркивает смысл и не более. Всегда
проверяйте себя вопросом “Что изменится, если я уберу эти данные или график?”.
Не вкладывайте смысл в цифры и текст, а продумайте сценарий и графику.
Не пытайтесь уместить слишком много смыслов в одной инфографике.
.
Старайтесь использовать ограниченное количество графиков и методов отображения.
Группируйте данные по используемому методу отображения.

32. Как создать инфографику?

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

33.

Не забывайте, что инфографика это не
иллюстрации с подписями.
Это не инфографика. Потому что информация
ложь, а во вторых потому что это иллюстрации с
подписями, а не инфографика.
Если пытаться выделить основные графически
части инфографики, то ими будут:
1. Основная метафора / основная иллюстрация
2. Дополнительные графики / дополнительные
иллюстрации
3. Сноски, фактоиды
4. Фон
5. Легенды, иконки, авторство, масштабные
единицы, пр.
В зависимости от выбранной метафоры, вы
сможете сделать выбор и по остальным
элементам — рассказ про историю разумно
показывать на таймлайне, а про производство с
помощью иллюстраций этапов процесса.

34.

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

35.

36.

Принцип 1+1=3 плох тем, что чем более
контрастно построенное на нем изображение,
тем больше возникает побочных визуальных
шумов. Именно поэтому использование
фигур светлых тонов на светлых же фонах
уменьшит веротность их возникновения.
Ниже
приведены
три
карты,
иллюстрирующие эту тактику. На первой
черные фигуры кварталов будто вибрируют.
Улицы ещё не подписаны, но уже очевидно,
что с этим возникнут проблемы. На второй
карте уменьшение толщин двух сторон
каждого блока приводят к тому, что одна из
границ каждой улицы толстая, а другая —
тонкая, таким образом принцип 1+1=3
деформируется (тонкие (как и серые) линии,
визуально
воспринимаются
как
более
легкие). А вот на последней карте, серый
цвет делает контуры спокойными, рядом с
ними
дополнительные
графические
элементы будут вполне уместны и не
создадут шума.

37.

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

38.

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

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53. Задание

На основе «Атласа новых профессий»
(http://atlas100.ru/index/) разработать инфографику
по профессии будущего, которая даст наиболее
полное представление о данной профессии, условиях
и предметах труда, необходимых компетенциях и т. д.
(инфографика — это графически представленная
структурированная информация, позволяющая
визуальными средствами передать смысл исходных
данных). Макет должен быть авторским, нигде ранее
не опубликованным.