Blog
Медиа

Искусство создания инфографики в дизайне за 5 минут

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

Что представляет собой инфографика?

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

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

Почему инфографика необходима?

Быстрая и понятная передача информации
Представьте себе инструкцию для конструктора Лего или создания оригами, написанную только текстом:

"Вставьте деталь №5 в отверстие №3"

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

Привлечение внимания к ключевой информации

Внимание к критически важной информации
Большие цифры, иконки и схемы в статьях или на веб-сайтах мгновенно привлекают внимание к самой значимой информации. Это может быть что угодно — от оборотов продаж в ежегодном отчете до уникальных особенностей товара на его карточке.
Увеличение объемов продаж
Веб-сайт с удобной навигацией и наглядными иконками, карточки товаров с понятными описаниями преимуществ, а также понятные инструкции — все эти элементы способствуют быстрому пониманию покупателем товара и его преимуществ, что способствует увеличению объемов продаж.
Основные принципы разработки дизайна для инфографики
Понимание темы и целевой аудитории
Чтобы успешно передать сложные процессы или особенности продукта через инфографику, необходимо глубокое погружение в тему. Это включает в себя не только изучение документации и брифов от клиента, но и активное взаимодействие с экспертами в соответствующей области. Ведь даже самые очевидные детали могут иметь ключевое значение для целевой аудитории.
Простота и ясность в дизайне инфографики
Понятность и ясность инфографики играют ключевую роль в ее эффективности. Если вы сразу улавливаете тему, но испытываете затруднения с конкретной информацией, вероятно, нарушены принципы простоты: четкое разделение элементов, ясная организация информации и единое стилевое решение. Давайте проясним это на примере.
Тут представлена классическая интерактивная таблица Менделеева. При нажатии или наведении на каждый элемент появляется его описание. В этой таблице заметна логичная и понятная структура:

  • Элементы четко разделены на группы: "типы элементов - цветами" и "мини заголовки в описание каждого элемента».
  • Элементы групп оформлены единообразно: названия представлены обычным шрифтом, а описания — с использованием полупрозрачных шрифтов.
Иерархия в дизайне инфографики
Иерархия играет важную роль в организации информации: чем более значим элемент, тем ярче он выделяется среди других. Это можно добиться за счет размера, стиля шрифта (жирный, подчеркнутый и т. д.), цвета или расположения в пространстве. Этот принцип эффективен как для заголовков и фактоидов в статьях, так и в других областях дизайна.
Выбор шрифтов
Выбор шрифтов - ключевой момент в создании инфографики. Они должны обеспечивать хорошую читаемость. Для заголовков подходят рубленые шрифты, в то время как для основного текста лучше использовать шрифты с засечками. Даже мелкий шрифт с засечками обычно легче воспринимается, чем рубленый.
Использование цветов
В "серьезной" инфографике, которая визуализирует научные данные или другую сложную информацию, цвета играют важную роль в разделении объектов и отображении различных слоев информации. Поэтому подход к выбору цветов должен быть утилитарным: каждый цвет должен соответствовать конкретному объекту или категории, а не служить просто декоративным элементом.
Использование цвета в рекламе и продажах
В рекламе и маркетинге ситуация немного иная. Здесь основная задача - привлечь внимание потенциального потребителя, и часто использование ярких цветов, даже если они не прямо связаны с информацией, может помочь в этом.

Например, ниже приведен слайд из презентации компании «Вкусно и точка». Где на кругу сделано цветовое разделение, которое на контрасте делит то, что происходит внутри компании, и что уходит во внешние коммуникации.

Инструменты для создания инфографики

1. Infogram: Этот онлайн-сервис помогает создавать красочные диаграммы, таблицы, таймлайны и многое другое. Даже в бесплатной версии предоставляется доступ к более чем 30 шаблонам, которые можно настраивать по своему вкусу.

2. Easel.ly: Еще один онлайн-сервис с обширной библиотекой бесплатных шаблонов: от меню ресторана до таймлайнов. Хотя в бесплатной версии качество изображений может быть несколько ниже, это вполне приемлемо для большинства задач.

3. Creately: Этот веб-сервис предназначен даже для создания самых сложных схем и диаграмм. Базовая версия доступна бесплатно, но если вам нужен расширенный набор инструментов, можно рассмотреть и платную версию.

4. Нестареющая классика: Кроме онлайн-инструментов, существуют и стандартные программы, такие как Photoshop, Excel, Powerpoint и Google Sheets, которые также могут быть полезны при создании инфографики.
Рекомендуемая литература для более глубокого понимания темы
1. Envisioning Information by Edward Tufte: Эта книга написана Эдвардом Тафти, известным математиком и статистиком, который считается авторитетом в области визуализации данных. В своей книге он раскрывает основы представления информации и приводит убедительные примеры. Эта книга полезна не только для дизайнеров, но и для специалистов, работающих с большими объемами данных, таких как экономисты, статистики, историки и другие. Хотя книга изначально написана на английском языке, в интернете можно найти переводы.

2. «Русская инфографика» by Vladimir Laptev: В этой книге Владимир Лаптев анализирует стилистические особенности и историю развития дореволюционной и советской инфографики. Хотя она в основном будет интересна графическим дизайнерам, она также полезна для тех, кто хочет понять эволюцию стиля в российской инфографике.

3. «Говори на языке диаграмм» by Din Zhelezny: Эта книга предлагает множество практических советов по использованию различных видов диаграмм для представления разной информации, а также способы привлечения внимания аудитории. Она будет полезна не только для дизайнеров, но и для аналитиков и менеджеров, желающих улучшить визуальное представление данных.

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