Инфографика в дизайне: самое важное за 5 минут
Что это, зачем она нужна и как ее делать — рассказываем и показываем за 5 минут. В конце статьи бонус: полезные материалы для глубокого изучения темы.
Что это такое?
В широком смысле это визуальное отображение данных:
-
таблицы и схемы
-
иконки и подписи на карточках товаров и на сайтах
-
карты (майндмэпы, географические и т.д.)
-
указатели и дорожные знаки
-
врезы (они же фактоиды)
-
визуальные инструкции
-
таймлайны
Многие дизайнеры считают дурным тоном называть «инфографикой» те же карточки товаров на маркетплейсах или иконки на сайтах. В каком-то смысле они правы: изначально под этим термином имели в виду визуализацию сложных данных. Но время и интернет внесли свои коррективы и термин расширил границы — инструкция по сборке, указатель движения или поданная крупно цифра в журнальной статье тоже стали называться инфографикой.
Зачем она нужна?
Помогает быстро и понятно объяснить что-либо
Представьте инструкцию по сборке любой мебели, написанную только текстом:
-
«Вкрутите евровинт в отверстие номер пять»
-
«Закрепите столешницу при помощи чопиков»
-
И еще много слов, которые поймут только профессионалы или те, кто уже имел дело со сборкой)
Теперь посмотрите на инструкцию, сделанную в виде инфографики. Здесь все можно понять без слов и намного быстрее. Даже человек, который никогда не собирал мебель, с такой инструкцией получит шанс почувствовать себя обладателем прямых рук.
Представьте информацию на картинке, написанную только текстом — понять ее будет намного сложнее.
Привлекает внимание к наиболее важной информации
Крупная цифра, иконка, схема в статье или на сайте привлекает внимание к информации, которую вы хотите рассказать прежде всего. Это может быть что угодно — уровень продаж в годовом отчете или уникальное свойство товара на карточке.
Разворот годового отчета оператора железнодорожных перевозок. Крупная цифра, напоминающая колеса вагонов, привлекает внимание к годовому грузообороту компании — это важная информация для инвесторов и акционеров. Пример из портфолио mad!
Повышает продажи
Сайт с хорошей навигацией и понятными иконками, карточки товаров с наглядным описанием преимуществ, удобные инструкции — всё это помогает покупателю быстрее сориентироваться при покупке и использовании товара.
Страница из каталога защитных перчаток «СВС». Иконки помогают выделить основные преимущества товара. Без иконок преимущества бы «тонули» в массиве текста, а с ними — сразу обращают на себя внимание. Пример из портфолио mad!
Основные принципы дизайна инфографики
Погружение в тему и изучение аудитории
Если дизайнеру нужно показать сложный процесс или работу продукта, без глубокого погружения в тему не обойтись. Помимо чтения документации и брифа клиента, нужно общение со специалистами, иначе работу придется не раз переделывать. Как-то наши дизайнеры делали огромную схему для золотодобывающей компании. Задача стояла простая — показать основные этапы добычи и изготовления золота. Был бриф, в котором клиент описал процесс. Всё понятно. Но при детальном обсуждении оказалось, что инфографика будет в издании для специалистов и для них важно буквально всё: от того, в какую сторону повернут ковш экскаватора до формы трубы на нарисованном заводе.
Фрагмент схемы добычи золота. Пример из работ mad!
Простота и ясность
Если глядя на инфографику, вы понимаете ее тему, а конкретное содержание не улавливаете, значит нарушены принципы простоты: четкое деление элементов на группы, понятная сортировка информации, визуальное и содержательное единство элементов. Поясним на примере.
Ниже вы видите часть интерактивной таблицы, которая описывает главные стили живописи в XX веке (описание появляется, когда нажимаете на кружок). В ней логичная и понятная структура:
-
Все элементы можно четко разделить на группы: «название стиля» и «описание» (названия столбцов).
-
У группы «описания» есть уточняющие вопросы: «что это», «как распознать» и так далее. Все они одинаковы для каждого стиля. Кроме того, элементы групп оформлены однотипно: название стилей — это обычный шрифт + яркая картинка в кружочке; описания — полупрозрачные иконки и шрифты.
-
Названия стилей расположены в хронологическом порядке: от самого раннего (фовизма) к самому позднему. Это понятный и привычный принцип сортировки, такой же как, по размерам, весу, алфавиту и так далее.
Если перемешать названия стилей и сделать одинаковое оформление для всех групп — получится каша.
Эти правила касаются не только сложных данных. Например, если дизайнер оформляет карточки товаров для магазина, то принципы единства и понятной сортировки тоже лишними не будут.
Источник: arzamas
Иерархия
Чем важнее элемент, тем больше он должен выделяться на фоне других. Выделить его можно с помощью размера, шрифтов (жирного, подчеркнутого и так далее), цвета или расположения в пространстве. Это работает с заголовками и фактоидами в статьях, сработает и в других сферах.
Шрифты
Супербанальное правило — они должны нормально читаться. Для заголовков подойдет рубленый шрифт, а вот для основного текста лучше использовать шрифты с засечками. Даже мелкий шрифт с засечками легче прочитать, чем рубленый.
Цвета
В «серьезной» инфографике (отображающей, например, научные данные) цвет помогает разделить разные объекты, показать разные слои информации. Поэтому подходить к его выбору лучше сугубо утилитарно: каждый цвет должен соответствовать определенному объекту, а не быть декоративным элементом. Пример — ниже. Посмотрите, как рисунок превращается в кашу, если из него убрать красный цвет.
Поль Клее, «Симптоматика». Рисунок тушью и пером, 1927. Источник: издательство Graphics Press.
В рекламе и продажах всё немного иначе. Необходимо привлечь внимание человека, а яркий цвет, даже не относящийся к определенной информации напрямую, может помочь в этом. Пример — ниже. На нем изображен график падения цен на бриллианты. Обычно это изображение приводят как плохой пример: из-за яркости и «вульгарной метафоры» смысл отходит на второй план. Однако если увидеть такую картинку, допустим, в статье выполненной в черно-белых тонах, она однозначно привлечет внимание.
Источник: издательство Graphics Press.
Инструменты для создания инфографики
Infogram. Онлайн-сервис, который помогает создавать красивые диаграммы, таблицы, таймлайны и тому подобное. Даже в бесплатной версии доступно более 30 шаблонов, которые можно редактировать.
Easel.ly. Онлайн-сервис с большой библиотекой бесплатных шаблонов: от меню ресторана до таймлайнов. Правда фри-версия позволяет выгружать изображения в невысоком качестве, но вполне примемлемом.
Creately. Еще один веб-сервис. В отличие от предыдущих он заточен даже под создание очень сложных схем и диаграмм. За базовую версию платить не нужно, но если необходим максимально широкий набор инструментов, стоит присмотреться к платной.
Нестареющая классика:
-
Photoshop
-
Excel
-
Powerpoint
-
Google Sheets
Что почитать, чтобы лучше разбираться в теме?
Envisioning Information. «Предоставление информации» — Книга Эдварда Тафти, математика и статистика, которого считают гуру в современной визуализации данных. Автор рассказывает об основах подачи информации и аргументированно иллюстрирует все тезисы. Книга пригодится не только специалистам в области дизайна, но и тем, кто плотно работает с большими объемами данных: экономистам, статистикам, историкам и т.д. Книга на английском, но в сети можно найти перевод.
«Русская инфографика». Книга Владимира Лаптева. Автор рассматривает стилистические особенности и историю становления дореволюционной и советской инфографики. По большей части книга будет полезна тем, кто занимается графическим дизайном — она поможет «впитать» советский и дореволюционный стиль.
«Говори на языке диаграмм». Книга Дина Желязны дает много практических рекомендаций: какие диаграммы использовать для разных типов информации, как с помощью диаграмм удерживать внимание читателей и многое другое. Издание подойдет не только для специалистов по дизайну, но и для аналитиков и руководителей.
«Настенька и графики». Телеграм-канал, который ведет специалист по визуализации данных. Здесь можно найти много примеров для вдохновения, которые помогут сделать веб-, мобильный и графический дизайн более эффективными, а также ссылки на классные учебные материалы.