Как сделать инфографику самостоятельно: Примеры и пошаговая инструкция

Привет, я Настя Никсен, художник-иллюстратор и бренд-дизайнер🔥. Работаю над коммерческими проектами и обучаю сюжетной иллюстрации в Niksen.School. Больше о моих проектах в Таплинке →

Вы читаете перевод статьи «How to make an infographic for business insights» от экспертов Linearity — динамично развивающаяся экосистема инструментов для творческих, где все под рукой: иллюстрации, дизайн и анимации. У платформы 10 000 000 пользователей (статистика на 27 июля 2023). Подписчики соцсетей тоже растут, сейчас суммарно 120 000 пользователей в Insta, YouTube, X.com следят за развитием бренда. Среди известных компаний, где решают задачи с Linearity: Disney, Universal, NASA, Apple и Deutsche Bank.

Переводы — это один из моих способов исследовать возможности в творческом мире. Над переводом работали Настя Никсен и Оля Жолудова.

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

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

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

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

А теперь разложим крутость инфографики по пунктам: 

• Захватывает внимание: Внимание аудитории — на вес золота. За счет прикольного визуала и четкой логики повествования, инфографика выделяется на фоне информационного шума и цепляет внимание зрителя. Это как Нетфликс в мире информации — прикольно и сразу хочется посмотреть еще одну серию 🙂 
• Запоминается: Ничего не нужно зубрить! Благодаря тому, что информация в инфографике подкреплена визуалом, мозгу проще разложить ее по полочкам и запомнить.
• Задействует сторителлинг: Цифры, конечно, цепляют внимание, но истории — завораживают! Инфографика превращает данные в увлекательные повествования и плавно ведет пользователя к пониманию вопроса. Инфографика раскрывает не только «что», но и «почему» — а именно это подогревает нашу вовлеченность. 
• Подбивает поделиться: Хотите, чтобы ваш контент завирусился? Инфографика — это настоящий магнит для соц.сетей. Она прикольно выглядит, притягивает внимание и сразу становится источников обсуждений в цифровом пространстве. 

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

Дизайн инфографики: Как надо и как не надо 

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

«Как надо делать», чтобы создать классную инфографику

• Самое главное — ясность. Избегайте жаргонизмов и сложных конструкций. Говорите на языке вашей целевой аудитории. Пусть ваши тексты будут краткими и в самую точку. В том, что касается слов, часто работает принцип «чем меньше — тем лучше» (less is more). 
• Визуализируйте! Лучше всего работает инфографика, в основе которой лежат визуальные компоненты: графики, диаграммы, иконки. Превращайте данные и сложные концепции в яркие визуальные образы. 
• Используйте цвет стратегически: Цвет — это мощный инструмент. Он может вызывать определенные эмоции и направлять взгляд в нужные места. Подберите для своей инфографики такую цветовую палитру, которая одновременно соответствует вашей тематике и дополняет историю. И, пожалуйста, не устраивайте взрыв радуги — если, конечно, тема вашей инфографики не взрыв радуги. 
• Грамотно используйте негативное пространство: Не перегружайте свой дизайн. Пусть ваши графики и диаграммы свободно «дышат», а общая эстетика инфографики будет чистой и элегантной. Вам нужна атмосфера просторного музея искусств, а не тесного блошиного рынка.  

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

«Как не надо делать»: чего стоит избегать при дизайне инфографики

• Информационный перегруз. Не нужно впихивать в инфографику тонны информации. Сосредоточьтесь на одном ключевом сообщении и задайтесь целью качественно донести его до зрителя. 
• Нагромождение клип-арта. Постарайтесь не использовать в своих инфографиках скучные попсовые клип-арт картинки. По возможности создайте уникальный визуал в стилистике вашего бренда и в духе вашей целевой аудитории. Такой визуал можно создать в программах типа Linearity Curve. 
• Свалка шрифтов. Когда в дизайне слишком много разных шрифтов — ощущение такое, словно кто-то бьет в тарелки в тишине библиотеки. Вам нужно подобрать 2-3 шрифта, которые хорошо сочетаются между собой: это сделает тексты в дизайне более читабельными.
• Забыть о доступности. У всех людей разные возможности зрения. Важно убедиться, что ваша инфографика доступна для всех. Для этого стоит продумать минимальный размер шрифта и прописать для всех визуальных элементов альтернативные текстовые описания. Инклюзивность — это важно.
• Слепая гонка за трендами. Не стоит впихивать в свой дизайн каждый модный тренд. Отдавайте предпочтение тем элементам оформления, которые помогают эффективно донести вашу мысль, а в тренде они или нет — это уже дело второстепенное! 

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

А теперь перейдем непосредственно к пошаговому процессу создания инфографики: 

Как создать инфографику в 7 шагов

Шаг 1: Познакомьтесь с инструментом для создания инфографики — Linearity Curve

Первым делом откройте программу Linearity Curve на компьютере, айфоне или айпэде. В этой статье я буду работать с десктопной версией под Mac.

Далее, выберите один из шаблонов инфографики. К примеру, можно взять этот шаблон инфографики для LinkedIn: он современный и яркий, у него свежий, стильный лейаут и множество форм, которыми можно поиграть. 

Если вы ни разу не работали с шаблонами Linearity Curve, вот простой алгоритм по их загрузке: 

• Нажмите на кнопку Open Template (Открыть шаблон) и выбранный вами дизайн начнет скачиваться. 
• Найдите файл шаблона в папке Downloads (Загрузки) на вашем Mac (или iPad) — и откройте его. 
• Если программа Linearity Curve уже установлена на вашем девайсе, то шаблон сразу появится в облачной галерее Linearity. 

Вот еще пара классных шаблонов для инфографики:

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

Шаг 2: Представьте ваши данные в визуальном формате

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

Вот как можно преобразовать данные в визуал в три простых шага:

1. Выбрать единицу данных:

Для начала вам нужно выбрать конкретную единицу данных (data point), которую вы хотите визуализировать. В рамках этой статьи мы будем иллюстрировать следующую маркетинговую информацию: «65% клиентов охотнее идут на контакт с брендами, которые подходят к прямым рассылкам более экологично и осознанно». 

Так что наша единица данных — это 65%.

2. Выбрать правильный визуальный элемент:

Далее вам нужно определиться, какой тип инфографики лучше всего подходит вашим данным. Например, для визуализации процентов лучше всего подходят круговые (pie chart) или кольцевые (ring chart) диаграммы. Для нашего примера с маркетинговой статистикой отлично подойдет круговая диаграмма. 

Среди других интересных типов инфографики — гистограммы (bar graphs), блок-схемы (flowchart), пузырьковые карты (bubble maps), конусные диаграммы (cone charts) и многие другие.

3. Рассчитать угол или размер

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

К примеру, если в нашем примере речь идет про 65%, нам нужно сначала рассчитать, какой угол составляет 65% от целого круга. 

Сделать это просто: если целый круг — это 360 градусов, то каждый градус — это 3,6% круга. 

💡Математика инфографики: базовый курс

Рассчитать угол сегмента, который представляет собой 65% круговой диаграммы, можно по следующей формуле: 

Угол (в градусах) = (Процент / 100) x 360 градусов

В нашем случае мы подставляем в формулу 65%: 

Угол = (65 / 100) x 360 градусов

Угол = (0,65) x 360 градусов

Угол = 234 градуса

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

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

Шаг 3: Создайте графику

Нарисовать круг или кольцо в Linearity очень просто: нужно кликнуть по инструменту Shape (Форма) и выбрать нужную форму — в нашем случае круг. 

Итак, первым делом откройте новый документ в Linearity Curve: для этого вам нужно просто нажать на плюсик (+). В интерфейсе вы найдете этот плюсик в двух местах: в правом верхнем углу или непосредственно в галерее.

Далее, вам нужно создать собственный артборд (рабочую область): 

1. Как только вы создадите новый документ, откроется окно, в котором вы сможете выбрать подходящий размер холста. 
2. Можно выбрать один из шаблонов с фиксированными размерами или нажать на Custom Size (свой размер) и установить размеры холста самостоятельно. 
3. Если будете создавать холст своего размера, дайте ему какое-нибудь понятное название: например «Яркий баннер» или «Космическая иллюстрация». В будущем это упростит вам работу. 
4. Укажите высоту и ширину холста. Их можно прописать в пикселях, дюймах или миллиметрах. 
5. Нажмите Create (Создать).

Теперь давайте создадим пару форм. Выберите на панели инструментов слева инструмент Shape (Форма) и выберите форму «овал» (или нажмите клавишу O на клавиатуре). 

Чтобы нарисовать ровный круг (а не овал), рисуйте форму с зажатым Shift.

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

На шаге 2 мы выяснили, что 65% равняется 234 градусам. Чтобы изобразить это на круге, мы нарисуем линию из центра круга (линию вы найдете в меню инструмента Shape). Далее мы поменяем цвет линии на белый, чтобы она была видна на фоне черного круга.

Затем нужно дублировать линию и повернуть вторую линию относительно первой под углом 234 градуса с помощью функции Rotate.

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

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

Шаг 4: Добавьте подписи и контекст

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

В нашем случае мы добавим подпись «65%»: мы разместим ее внутри звезды, которая изначально была в шаблоне, и которую мы скрыли на панели слоев, пока работали над нашей диаграммой.

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

💡Ссылайтесь на источник, где это уместно

Тщательно фиксируйте источники, из которых вы берете данные, и правильно ссылайтесь на них в своих текстах. Это повысит доверие зрителей к вашей инфографике.

Шаг 5: Грамотно используйте цвет

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

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

Используйте цвет грамотно: за счет контраста цвета можно подчеркнуть разницу между элементами инфографики. Это способствует пониманию информации.

Шаг 6: Сбалансируйте визуальные элементы 

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

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

Можно добавить на фон инфографики интересные элементы, которые не отвлекают внимание от основного контента. А самые важные факты и цифры можно выделить жирным — или ярким цветом. Кроме того, в инфографику можно добавить элементы брендинга.

Шаг 7: Опубликуйте инфографику и соберите обратную связь

Когда закончите оформлять инфографику, опубликуйте ее в формате для веб (например .png или .jpeg). Для этого нажмите Export (Экспортировать) в верхнем правом углу экрана, выберите нужный формат и отредактируйте другие настройки. 

Готово! Теперь можете поделиться инфографикой в соц.сетях или добавить ее в статью для блога.