Middle Technical Designer

Как сделать инфографику и не облажаться


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

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

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

К сожалению, не все понимают, как и когда правильно использовать инфографику, получая в итоге просто красивую картинку (в лучшем случае!) со множеством пиктограмм.

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




1.png

1. Задайте себе вопрос


Перед тем, как начать рисовать, задайте себе вопрос: «Что я хочу показать?». Сравнить числовые показатели, таймлайн какого-либо события, проиллюстрировать статистику, разобраться во взаимосвязях объектов, объяснить принцип работы сложного механизма или наглядно показать состав продукта? От того, что вы хотите получить в итоге, зависит многое, если не всё.




Соберите данные

2. Соберите данные


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




Палочки или кружочки

3. Палочки или кружочки?


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




Выберите инструмент

4. Выберите инструмент


Помимо графических редакторов существует множество онлайн-конструкторов. Некоторые из них я перечислила ниже.




Визуализируйте

5. Визуализируйте


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




Доведите дело до конца

6. Доведите дело до конца


В процессе создания инфографики проверяйте себя по следующим моментам:

  1. Главный элемент

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

  2. Иерархия

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

  3. Целостность

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

  4. Текст должен быть переработан

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

  5. Главное — содержание, а не красота изображения

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

  6. Следите за достоверностью отображаемого

    Все, что нужно количественно сравнивать, изображайте в точных пропорциях.

  7. Метафоры

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

  8. Не усложняйте

    Инфографика — это не чертеж космического корабля на Суахили. Будьте проще.

  9. Подсказки

    Упрощайте, но не скупитесь на подсказки. Конечно, Солнце больше Земли, но разница размеров Земли и Марса визуально не очевидна. И тут на помощь придут числовые подписи. Так информация будет считываться быстрее, не так ли?

  10. А нужно ли?

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





Тестируйте

7. Тестируйте


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




Игра шрифтов

Игра шрифтов


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

  1. Заголовок. Визуально самый главный. Должен быть заметнее среди остального текста.
  2. Подзаголовок. Развернутый смысл заголовка. Подзаголовок не может существовать без заголовка, он связан с ним напрямую. Поэтому и визуально должен быть привязан к заголовку, но не становиться им. Самый простой способ изображения — крупный заголовок с начертанием Bold и меньший по размеру подзаголовок, написанный таким же шрифтом, но с начертанием Regular.
  3. Лид. Вступительная информация, пояснение. Находится только в одном месте инфографики, поэтому его нельзя путать ни с основным текстом, ни с подзаголовком. В журналах, например, любят выделять лид курсивным начертанием. Я не рекомендую использовать этот прием, поскольку совсем немного кириллических шрифтов имеют достойное курсивное начертание (тем более среди бесплатных шрифтов).
  4. Основной текст. Некоторые виды инфографики, таймлайн или инструкция, требуют текстового пояснения. Это текст для чтения, поэтому его должно быть удобно читать. Он не должен быть слишком большим или слишком маленьким, чересчур жирным или чересчур тонким.
  5. Заголовки в основном тексте. Следуя смысловой логике, заголовки должны быть чуть заметнее основного текста.
  6. Подписи. Под фото, иллюстрациями, графиками, значения на линиях координат и прочее. Преобладающая функция подписей — навигационная: подписи нас ориентируют, а значит не могут «перебивать» главные смысловые объекты (графики, диаграммы, текст, фото, иллюстрации и т.д.).
  7. Сноски. Формальная или наименее значимая информация. Для сносок обычно выбирают наименьший, но читабельный кегль. Иногда приглушают яркость. Зачастую убирают в край.
  8. Подпись автора. Логотип компании или имя-фамилия создателя. Можно сделать частью инфографики, а можно сознательно отделить. Это только на ваше усмотрение. Главное, чтобы авторская подпись не мешала восприятию главной информации.
  9. Текст как иллюстрация. Когда слова или цифры выполняют ещё и декоративную функцию.
  10. Легенда. Это «ключ» к пониманию инфографики: здесь собраны все условные обозначения. Тексты в легенде оформляются согласно общей логике вашей работы. Если инфографика содержит мало текста или не имеет его вовсе, для грамотного построения стилей текста в легенде воспользуйтесь предыдущими комментариями.

Как делать текст разным?


  1. Шрифт. Используйте в своей работе не больше двух шрифтов.
  2. Начертание шрифта. Bold, Regular, Light и т.д. Хорошие качественные шрифты, например, Din (которым написан этот текст), имеют большой набор начертаний. Используйте это разнообразие, чтобы выстроить текстовую иерархию.
  3. Размер шрифта. Тут все ясно.
  4. Цвет. Не бойтесь работать с оттенками. Кроме цветов радуги существует множество прекрасных цветов. Я приложила в конце статьи ссылки на сервисы, которые помогут подобрать цветовые сочетания.
  5. Насыщенность. Манипулируйте насыщенностью цвета, чтобы выделить главное.
  6. Декоративные элементы. Это различные нетекстовые выделители: рамки, цветные фигурные плашки, обводки и т.п. Используйте их, когда это уместно. Но не засоряйте лишними деталями вашу информацию.

Полезные ссылки:


Онлайн-конструкторы. Классическая инфографика (графики, диаграммы)


Онлайн-конструкторы. Таймлайны


Онлайн-конструкторы. Облако тэгов


Онлайн-конструкторы. Карты


Подобрать цвет


Подобрать шрифт

  • www.wordmark.it - показывает одно слово, написанное всеми шрифтами, установленными в вашей системе.
  • www.webfont.ru - выбирайте из бесплатных шрифтов и зайдите на вкладку “полингон”

Бесплатные иконки


Хорошие примеры


Забрать себе:


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