Инфографика для сайта
Роль инфографики в статье
Инфографика – это новый и современный вид подачи информации на сайтах. Если вы занимаетесь веб-аналитикой, то наверняка не могли не заметить, что нынешние пользователи интернета ленивы, и им неинтересно читать длинный текст, как он красиво и структурировано не был бы оформлен. Графический способ подачи информации для пользователя является более предпочтительным и дружелюбным
Важно понимать, в каких статьях инфографика нужна, а в каких – нет
Преимущества инфографики для сайта
- В первую очередь главное преимущество инфографики – это удобство для пользователя. Если ему будет удобно воспринимать информацию на вашем сайте, он обязательно вернётся, причём может поделиться ссылочкой на сайт в социальной сети.
- Инфографика помогает получать дополнительный трафик на сайт непосредственно с сервисов «Яндекс.Картинки» и «Картинки Google».
- Инфографика часто расходится по сети: форумам, блогам, социальным сетям. Таким образом, если вы оставите свой водяной знак или адрес сайта на картинке, то возможно, что кто-то наберёт его в строке своего браузера и придёт к вам.
- Инфографика – это отличный способ разрекламировать свой бренд или компанию. Создайте качественную и полезную инфографику, разместив на ней свой бренд и адрес сайта, и пассивная реклама вам обеспечена.
- В нише инфографики мало конкурентов, поэтому тут можно неплохо преуспеть.
Что можно считать инфографикой?
С научной точки зрения, инфографика – нестандартная форма графического и коммуникационного дизайна, способная представить объемный пласт информации в наглядном виде, а заодно – отобразить тенденцию изменения статистических показателей или фактов во времени и пространстве. Если же отойти от классических терминов, то воспринимать инфографику стоит, как изображение, передающее важный смысл исключительно с помощью графики и визуальных приемов, без использования сухих текстовых фактов, которые сложно представить в голове, сразу же запомнить или оценить.
Если же ситуация ровно противоположная, и без подводящего описания и сопроводительных текстовых подсказок ничего не разобрать, то вывод один – инфографика не справляется с возложенной задачей, и выбранные дизайнерами приемы не продуманы и не доведены до совершенства, а потому и не приносят той пользы, которую могли бы.
Что делает инфографику эффективной?
Если хотите создать эффективную инфографику, помните, что наш мозг всегда ищет визуальные паттерны, которые помогают интерпретировать окружающий мир.
Используйте этот факт: визуально структурируйте информацию и создавайте паттерны, усиливающие сообщение, которое вы хотите донести.
Давайте ознакомимся с рекомендациями в отношении дизайна инфографики, которые помогут вам создавать одновременно красивую и эффективную инфографику.
Предлагаем также прочесть статью о 7 способах персонализации шаблона инфографики, в которую мы включили еще несколько советов по созданию эффективного дизайна.
Используйте линии, границы и фигуры для выделения взаимосвязей
Даже такая простая вещь, как расположение и группировка элементов на странице влияет на то, как читатели воспримут инфографику.
Выделение взаимосвязей с помощью базовых элементов дизайна — границ, линий и фигур — помогает понять содержание инфографики.
Например, можно заключить взаимосвязанные элементы в рамку или фигуру. В большинстве инфографик, как и в представленной ниже, такой прием используется для разбивки дизайна на разделы, что облегчает восприятие материала.
В других инфографиках, когда наиважнейшая роль отводится структуре представляемой информации (в случае органиграммы или блок-схемы, например), полезно соединять взаимосвязанные элементы линиями. Посмотрите, как это сделано в инфографике маркетинговой компании ниже:
Хотите узнать больше о том, как структурировать данные в инфографике? Предлагаем прочесть наш пошаговый разбор в статье о резюмировании и визуальном представлении данных.
Используйте один контрастный цвет для управления вниманием читателей
Еще один ключевой элемент дизайна, который нужно учитывать, — это цвет. Мы используем различные цвета, чтобы сделать инфографику красивой, но цвет также является мощным инструментом коммуникации.
Подобно линиям и границам, цвет можно использовать для группировки данных. Посмотрите, как это сделано в инфографике бизнес-процесса ниже:
Более того, с помощью цвета мы можем привлекать внимание к самым важным частям информации, а вспомогательную информацию отодвигать на задний план
Выберите цвет, контрастирующий со всеми другими цветами инфографики, и используйте его для выделения самой важной информации
Выберите цвет, контрастирующий со всеми другими цветами инфографики, и используйте его для выделения самой важной информации. Возьмем, к примеру, инфографику ниже
Ярко-желтые круги контрастируют с голубым фоном, благодаря чему значки (наиболее важный визуальный элемент данной инфографики) оказываются в центре внимания. Этот прием пользуется невероятной популярностью: яркие цветовые пятна — это один из самых мощных трендов в графическом дизайне в 2019 году
Возьмем, к примеру, инфографику ниже. Ярко-желтые круги контрастируют с голубым фоном, благодаря чему значки (наиболее важный визуальный элемент данной инфографики) оказываются в центре внимания. Этот прием пользуется невероятной популярностью: яркие цветовые пятна — это один из самых мощных трендов в графическом дизайне в 2019 году.
Нужно вдохновение, чтобы подобрать цветовую палитру для инфографики? Читайте наше руководство по выбору цвета для инфографики.
Создайте иерархию текста с помощью трех различных шрифтов
Шрифты — это тот элемент, который сразу обращает на себя внимание в инфографике. Неудачно выбранные шрифты могут обречь на провал прекрасную в остальных отношениях инфографику
Наш обзор популярных шрифтов поможет вам сделать правильный выбор.
Секрет использования шрифтов в инфографике заключается в создании четкой иерархии текста с помощью трех разных шрифтов — одного для главного заголовка, одного для заголовков разделов и одного для основного текста.
Шрифт главного заголовка должен быть самым крупным и может быть самым стилизованным. С его помощью вы задаете инфографике определенное настроение.
Шрифт заголовков разделов должен быть немного меньше. Для заголовков разделов стоит выбирать менее выдающийся, но все же хорошо заметный на странице шрифт.
И, наконец, шрифт основного текста должен быть наименьшим из трех и самым простым. Самым удобочитаемым.
Не уверены, какие шрифты удобочитаемые, а какие нет? Вот памятка по шрифтам, отлично подходящим для основного текста:
Подробнее о типах шрифтов и рекомендациях по их использованию читайте в нашем руководстве по выбору шрифтов для инфографики.
Виды инфографики
Название |
Описание |
Пример |
Числа |
Часто так оформляют статистические данные. |
Цветная диаграмма с результатами опроса: 35% любят яблочный сок, 15% апельсиновый, 10% томатный и т.д. |
Схема |
Показывает устройство какого-либо предмета или природу явления. |
Схема вулкана из школьного учебника географии. |
Иерархия |
Отражает соотношение и взаимосвязь объектов. |
Изображение структуры персонала компании в виде дерева. |
Карта |
Позволяет в удобном виде представить информацию по разным регионам, странам. |
Карта, где разные страны окрашены разным цветом: зеленый – жители уделяют спорту минимум 180 минут в день, желтый – минимум 90 минут, красный – 30 минут и менее. |
Алгоритм |
Описывает какое-либо действие пошагово. Используется в рекламе, информационных материалах. |
Визуализация услуги по изготовлению пластиковых окон: вы звоните менеджеру (изображение клиента с телефоном), мы изготавливаем окно за 2 дня (изображение производства), привозим и устанавливаем (изображение установки), даем гарантию (изображение передачи документов и довольного клиента). |
Хронология |
Показывает последовательность событий. Используется в материалах по истории, в статьях, на сайтах компаний в разделе «о компании». |
«Лента» с указанием основных вех: 1891 – Фридрих Эпштейн основал компанию, 1902 – продукция получила призы Всемирной выставки, и т.д. |
Сравнение |
Наглядно демонстрирует разницу между объектами сравнения. |
Сравнение жизни в 1900 и 2000 годах по разным параметрам: продолжительность жизни, количество детей и др. На изображении 2 человека, представляющих каждую из эпох. Рядом с ними – пункты сравнения. |
Также она может быть статичной или анимированной (например, в виде gif-файлов). Отдельно выделяют видеоинфографику.
Посмотрите ролик об инфографике, в котором простыми словами объясняется, что это такое и для чего нужно:
Для чего используется?
Сфера применения обширна: статистика, образовательная среда (за примерами не нужно далеко ходить – инфографика частенько применяется для подготовки или создания презентаций, или же в тех случаях, когда студенты обязаны разобрать крупный набор учебных материалов и не потеряться среди получаемых знаний), политика, география и метеорология.
Пример использования инфографики для иллюстрации работы реактивного двигателя
Применяется техника работы с информацией и за пределами «серьезных дисциплин»: в журналистике и готовке, когда компании применяют инфографику для сайтов, где подробно отображаются используемые при приготовлении пиццы ингредиенты и специи. Отдельный пример применения инфографики – спорт. Так, с помощью графиков и диаграмм легко продемонстрировать тенденции заработка золотых медалей на Олимпийских играх.
Используется инфографика и при составлении резюме, способного в два счета донести до потенциального работодателя важную и наглядно оформленную информацию – успешно завершенные образовательные учреждения, рабочий стаж, накопленные знания, список законченных курсов. Всего три-четыре картинки и несколько визуальных примеров и кадровый агент сражен наповал, и главное – никаких скучных текстов с сухо представленной информацией, не несущей в действительности никакой пользы и лишь усложняющей собеседование.
С чего стоит начать работу над инфографикой
Если рассчитываете на виральный охват, выбирайте максимально широкую тему, но избегайте клише. Простое «погуглить» спасает, чтобы не повторяться и не тратить ресурсы на то, что уже сделано.
При формировании брифа на создание инфографики готовьте текстовый прототип: размечайте графические элементы — иконки, блок-схемы, диаграммы. Не перегружайте элементами и смыслами. Если хотите, чтобы изучали каждую деталь, сделайте 3-5 слайдов. Проверяйте на каждом этапе, можно ли еще что-то сократить или убрать.
При выборе идеи, над которой планируете работать, можно ориентироваться на один из типов инфографики. Это сильно поможет на этапе сбора информации и фактчекинга: понятно, что потребуется, а какие данные не требуются.
Onlypult публикует в Facebook, Instagram, TikTok, ВКонтакте и другие социальные медиа. Удобный редактор постов и совместная работа.
Зарегистрироваться
Метафоры, срезы
Конечно инфографика нужна не просто для оживления занудных нечитабельных данных, а для отображения реальной ситуации. Популярной стратегией, в таком случае, будет представление данных в виде трехмерной графики, которая выглядит почти как лабораторный образец, к примеру – образец дерева.
Чудесная возможность инфографики – из скучной комплексной информации создать графическую метафору, такую простую, но не банальную, что один раз взглянув можно понять суть посыла. В пример приведена инфографика ниже.
Целью этой инфографики было связать пятьдесят позиций сравнительного позитивного экономического роста четырнадцати стран. Если бы мы поместили такую информацию в таблицы, вы бы наверняка уснули. Метафора соревнований делает своё дело.
Как создать инфографику?
Прежде чем начать, убедитесь, что вы четко понимаете, чего хотите достичь, создавая инфографику.
Следующий шаг — определение того, что должна понимать ваша целевая группа. Если вы не можете выразить цель в одном-двух предложениях, инфографика просто не сложится.
Вот еще несколько советов при разработке инфографики:
Найдите идею
После того как вы определили тему и цель своей инфографики, теперь вы можете определить вопросы, на которые должна отвечать инфографика.
Первичный вопрос (также известный как «животрепещущая проблема») важен, поэтому не бойтесь тратить время на его правильное решение. Ваша инфографика должна отвечать или представлять ответы на вопросы вашего читателя с фактами и визуализацией.
Выберите правильный дизайн
После того как вы остановились на типе инфографики из нашего списка выше, выбор подходящего формата дизайна напрямую зависит от характера задаваемых вопросов и предлагаемых ответов.
Направлена ли ваша предполагаемая инфографика на данные или она концептуальна? Вы делаете объявление или изучаете возможности?
Диаграммы во всех их формах, карты, временные шкалы, списки… имеет значение только то, что ваш макет соответствует тому, чего вы пытаетесь достичь.
Вы можете выбрать шаблон или основать свой дизайн на тысячах примеров, доступных в Интернете. Есть также множество учебных пособий, которые помогут вам начать работу.
Как найти заказчиков на инфографику
Инфографика – визуальное представление данных, статистики и другой информации по определенной теме. На ней сочетается текст, графики, изображение и с помощью таких приемов информация излагается красочно и понятно. Пример инфографики об инфографике ниже:
На биржах иногда встречаются объявления о поиске исполнителей, но не так много, как хотелось бы. Найти подобные задания можно с помощью поиска, а на Fl.ru даже есть специальный раздел Инфографика в рубрике Дизайн и Арт.
Хотя намного продуктивней искать клиентов напрямую – писать им с предложением о сотрудничестве и показывать примеры работ. Составьте заманчивое письмо с предложением о сотрудничестве и рассылайте его по почтовым ящикам владельцев:
- Сайтов;
- Блогов;
- Социальных сетей;
- Инфобизнеса;
- Журналов;
- Рекламных агентств.
Это не полный список, вы можете придумать и другие варианты для сотрудничества. Ведь инфографика – развивающееся направление, которое очень актуально в графическом дизайне.
Перед поиском клиентов потренируйтесь в создании эффектной инфографики. Создайте резюме в таком стиле – вы отлично знаете «тему» и сможете показать свои навыки в деле. Это намного интересней, чем рассылать текстовое описание своих заслуг.
Сейчас визуальная информация пользуется бешенным спросом. Ведь неспроста так быстро развивается Instagram – людям нравится получать информацию быстро и наглядно. А вот профессионалов в этом деле еще не так много.
Если вы умеете рисовать и креативить, не упустите свой шанс вырваться вперед! Осталось только разобраться в нюансах и понять, как делать инфографику.
Включите графические формы для сбора информации
Около 80% В2В маркетологов в 2017 году определили главной целью создания контента лидогенерацию — привлечение потенциальных клиентов.
Благодаря инфографике, которая предлагает персонализированные результаты или любые данные, адаптированные к вводимой пользователем информации, у вас есть возможность завладеть вниманием и создать еще более невероятный пользовательский опыт. Вы можете не только фиксировать релевантную информацию о вашей аудитории, но и собирать контактную информацию, предлагая персонализированную версию инфографики на основе их введенной информации
Вы можете не только фиксировать релевантную информацию о вашей аудитории, но и собирать контактную информацию, предлагая персонализированную версию инфографики на основе их введенной информации.
Интерактивный контент был создан, чтобы генерировать в 2 раза больше конверсий, чем пассивный контент.
У BBC это получилось благодаря инфографике Your Life on Earth.
Оригинал
Другой пример лидогенерации — инфографика Content Land, получившая награду за лучшее использование интерактивной инфографики на Content Marketing World 2017.
Оригинал
По мере того, как пользователи продвигаются через игровое поле, им попадаются фрагменты исследования, нарезанного на удобные кусочки. Кроме того им нужно отвечать на квалификационные вопросы о выбранной стратегии контент-маркетинга:
В конце инфографики пользователю предлагается ввести свою контактную информацию, чтобы получить доступ к пункту назначения — персонализированной странице, которая основана на ответах пользователя, и которая рекомендует дополнительный контент или демо-версию регистрации:
В этом случае потребители получают гораздо больше информации, но они сами также становятся источниками информации, и таким образом маркетинговые команды могут узнать больше о том, кто на самом деле взаимодействует с ними.
Немного истории
Один из первых известных случаев использования инфографики
приходится на середину 19-го века. В районе Лондона – Сохо – свирепствовала
эпидемия холеры, однако установить источник заражения не удавалось.
Доктор Джон Сноу предположил, что причина кроется в
загрязненной питьевой воде. Он взял карту города и отметил все зафиксированные
случаи заболевания. Выяснилось, что большинство из них находятся в
непосредственной близости от одной из водозаборных колонок, что подтвердило его
гипотезу и в дальнейшем дало ощутимый толчок развитию эпидемиологии, а также
продемонстрировало, что польза инфографики может быть очень даже существенной. Так
как ее грамотно составить и применить?
Сайты для создания инфографики
Canva
Canva остается одним из самых популярных инструментов онлайн-дизайна для создания маркетингового контента — от брошюр до рекламы, презентаций и т. Д. Его конструктор инфографики особенно пригодится, когда пришло время создать свою инфографику.
Воспользуйтесь преимуществами его бесплатных и платных элементов дизайна, таких как шрифты, изображения и дизайнерские палитры.
Пример инфографики из Canva:
Google Charts
Как и Canva, Google Charts — еще один отличный инструмент для разработки и распространения инфографики. В отличие от Canva, вы можете создавать и публиковать интерактивный инфографический контент на своем веб-сайте с помощью Google Charts. Это средство создания инфографики совершенно бесплатно и приятно настраивается.
Примеры инфографик из Google Charts:
Картограф
Этот бесплатный инструмент для создания инфографики на основе карт позволяет создавать интерактивные и визуальные карты без подключения к сторонним картографическим службам.
Благодаря большому количеству типов карт, доступных для использования, легко представить и поделиться представлением географических данных, особенно с помощью библиотеки Python и инструментов JavaScript от Kartograph.
Примеры:
Примеры
В интернете можно найти сотни примеров такой подачи материала, достаточно лишь забить это слово в поисковую строку и нажать на картинки. Однако не все картинки можно считать примером удачных работ. Чтобы вам было легче ориентироваться среди всего этого множества, предлагаем взглянуть на эту картинку:
Это пример качественной работы, с крупным изображением, хорошо подобранной палитрой цветов, продуманной структурой и полным раскрытием темы статьи. Благодаря чему информацию, расположенную на инфографики, легко воспринимать и усваивать
Стоит обратить внимание на то, что материал разделен на три блока, которые сообщают читателю о десятке ведущих международных нефтедобывающих компаний
Тему можно выбрать любую. Это подтверждает следующая достаточно шуточная картинка.
Если тема позволяет, то не стоит упускать возможность использовать что-то смешное и веселое. Как правило, картинки с забавными изображениями и шуточным текстом пользуются большой популярностью.
1850 годы — появление современной инфографики
Активное применение графиков и диаграмм создало почву для полноценного развития техники дизайна. В эти годы Министерство Юстиции Франции провело масштабную работу по сбору статистических данных, структурировав информацию о всех судебных делах. Можно сказать, эта сенсационная работа стала началом для прочих социальных дисциплин. Позднее ученые визуализировали статистику распространения холеры в Лондоне, соотнеся благополучность районов с процентом заболевших. Все эти измерения позволили инфографике сделать существенный рывок вперед. Кстати, столбиковые диаграммы, хотя и не в совсем привычном виде, появились уже в 1844 году.
С чего начать?
Первым делом необходимо определиться, какую цель преследует
инфографика и на какую аудиторию она рассчитана
Далее дело за работой с данными
– из всего массива резонно выделить самое важное, отсеяв второстепенную
информацию
Инфографика – это, как уже говорилось выше, визуализация,
следовательно, продумываем дизайн, чтобы акцентировать внимание пользователя на
ключевых фактах в сочетании с простым и понятным их представлением. Текст –
важная часть, он должен быть четким, лаконичным и информативным
Последний этап
– донесение. Он подразумевает, что информация должна вызывать какой-то отклик у
пользователя.
Бесплатные сервисы для создания инфографики
Во всех сервисах из таблицы бесплатны основные функции, но для бесплатного доступа есть ограничения.
Название сервиса и его особенности |
Что можно получить бесплатно |
Русифицирован или нет |
Canva. Огромная библиотека бесплатных шаблонов, у которых можно настраивать размер. Один из самых популярных сервисов. |
|
Русифицирован. |
Venngage. Большая коллекция шаблонов. Простой интерфейс. |
|
Русифицирован. |
Piktochart. Библиотека сервиса содержит более 4000 бесплатных иконок и изображений. Интуитивно понятный редактор изображений. |
|
Не русифицирован, интерфейс на английском языке. |
Easel.ly. Большая коллекция шаблонов, которые можно дорабатывать: менять цвета, шрифты, загружать свои изображения и т.д. |
Водяного знака сервиса на изображениях не будет. В бесплатном аккаунте есть ограничения: нельзя загружать свои шрифты, ваши работы будут видны всем пользователям и др. |
Не русифицирован, интерфейс на английском языке. |
Creately. Позволяет создавать сложную аналитическую инфографику – схемы, диаграммы и др. Есть возможность совместной работы. |
Бесплатно можно создавать до 5 документов. Число сотрудников при совместной работе ограничено тремя. |
Не русифицирован, интерфейс на английском языке. |
Посмотрите обзор 3 сервисов для создания инфографики (Piktochart, Easelly, Canva)
Создание инфографики. Как сделать хорошую инфографику
Сделать инфографику несложно. Гораздо сложнее сделать хорошую инфографику.
Вот несколько советов:
Не перегружайте инфографику текстом. Помните, что основную информацию несёт изображение. Лайфхак: чтобы проверить, выполняет ли инфографика свою роль, можно убрать из неё весь текст. Даже без текста должно быть примерно понятно, о чём речь. Не давайте много текста сплошной «простынёй» — это сильно затрудняет восприятие материала.
На этой инфографике изображение не несёт смысловой нагрузки. С тем же успехом можно было сделать простой списокИнфографика: «Банк развития Казахстана»
- При этом не стесняйтесь добавлять фразы, чтобы объяснить детали.
- Уберите элементы, не несущие смысловой нагрузки, — они затрудняют восприятие. Инфографика сильна именно концентрированностью подаваемой информации. Каждая линия, стрелка или значок должны нести смысл.
Из-за большого количества элементов, не несущих смысловой нагрузки, эту инфографику сложно восприниматьИнфографика: Tinder Foundation
Не перегружайте
Важно, чтобы человек легко воспринимал приведённую информацию и не запутался в чрезмерном количестве блоков, картинок и стрелочек
- Выстраивайте чёткую и логичную структуру там, где это возможно. Наиболее важные компоненты или крупные группы поместите по центру.
- Используйте яркие, выделяющиеся цвета. Следите, чтобы текст не терялся на фоне картинок. Если вы делаете корпоративный проект — используйте цвета компании.
В этом примере текст явно теряется на общем фоне. Вероятно, стоит сделать его темнееИнфографика: BrainInfo / Диана Хисматуллина / Оля Стожарова
Инфографика посложнее
Когда освоите таблицы и диаграммы, переходите к более сложным вещам.
Техническая сторона: я буду делать примеры в Adobe Illustrator и LibreOffice Calc просто потому, что они у меня есть. Способов нарисовать инфографику множество. Важен не инструмент, а результат. При желании инфографику можно рисовать в Microsoft Word.
Признак хорошей инфографики — наглядность. Если убрать все цифры и даже текст, все должно оставаться понятным. Возможно, исчезнет точность, но соотношение величин все еще будет ощущаться.
Взяв пример Незнайки, захотевшим стать предпринимателем, составим таблицу и диаграмму по ней:
Данные есть, осталось их показать наглядно. Самое простое, что можно сделать:
Простая инфографика
Контрольная проверка — убираем цифры и пытаемся понять, что изображено:
Инфографика без цифр
Без цифр всё по-прежнему понятно. Значит, это настоящая инфографика. Но есть возможность сделать ещё лучше:
- Блокноты и тетради имеют похожие значки, их можно спутать.
- Один значок равняется пяти проданным товарам. В идеале значки должны быть кратны цифрам, чтобы не обрезались. В данном случае один значок должен равняться одной продаже. Если нужно сделать отчет о сотнях проданных товаров, можно брать десятки или сотни. Главное — избегать обрезки.
- Должна быть группировка по дням. Сейчас текст и значки идут сплошным потоком, это не лучший вариант.
- Изображение Незнайки сейчас бесполезно. Его можно задействовать, поместив карандаш ему в руку, тетрадь — в другую, блокнот высунуть из кармана. Все зависит от вашей фантазии: дать персонажу цель — быть описанием (легендой) значков, сгруппировать продажи не по дням, но по предметам.
Когда у вас много времени, делайте несколько вариантов, выбирайте лучший, дорабатывайте дальше. Инфографика для примера заняла полчаса моего времени, это сказывается на результате.
Вывод
Инфографика все еще жива! Если кто-то заявляет что инфографика сейчас уже не работает, он либо введен в заблуждение, либо не видел действительно настоящую инфографику.
Проверяйте свою инфографику перед публикацией. Убедитесь что источник фактов является достоверным. Не говорите, а покажите свою информацию — не заставляйте своих читателей прилагать усилия для изучения информации.
Не забудьте определить свою целевую аудиторию. Многие совершают ошибку, создавая инфографику под всех людей, но не для релевантной аудитории.
По сути, инфографика это некий сценарий, или история. Поэтому, прежде чем приступить к созданию очередной инфографики, вам не помешает изучить то, что делает истории вирусными — это сторителлинг.