Все про инфографику: объединяем иллюстрации и текст в убойный инструмент маркетинга
Важность визуального контента для продвижения в сети сложно переоценить. Давно доказано, что люди лучше воспринимают информацию зрительно, чем на слух. Так, велика вероятность, что уже через три дня после прослушивания аудио человек вспомнит всего 10% из того, о чем шла речь. В случае со зрительной информацией все не так печально: здесь этот показатель держится на отметке 65%. Если хотите привлечь внимание к своему контенту, не забывайте о таком формате, как инфографика. Сочетая иллюстрации с текстом, можно достичь впечатляющих результатов!
Ценность визуального контента для продвижения
Наверняка каждый из нас задумывался о том, как видит предметы вокруг себя и как интерпретирует то, что видит. На тему восприятия визуальной информации проведено множество психологических исследований, которые стоит изучить дизайнерам, маркетологам, рекламщикам и другим специалистам, работающим с контентом.
Вот несколько интересных исследований:
Это далеко не все тематические исследования, которые достойны вашего внимания. Однако мало ознакомиться с ними — важно понять, как комбинировать иллюстрации и текст на практике для достижения желаемого эффекта.
Важные нюансы создания инфографики
Инфографика — это способ представления сложной информации в понятном каждому формате. Кроме того, это одна из форм коммуникативного и графического дизайна. Первый выполняет не только эстетическую функцию: он устанавливает контакт с потребителем, влияет на эмоции и участвует в процессе выбора. Следовательно, он выходит за рамки простого оформления. Цель графического дизайна — сугубо эстетическая: делается упор на привлекательные визуальные элементы. Инфографика обладает высоким уровнем как эстетики, так и информативности.
Для преподнесения информации в форме инфографики используются такие средства, как таблицы, списки, графики, схемы, диаграммы — все, что может упростить восприятие больших объемов данных и многочисленных идей. Бытует мнение, что инфографика применяется преимущественно в образовании. Это не так, ее польза огромна для разных сфер деятельности: журналистика, наука, техника, маркетинг и т.д. Она имеет множество видов.
Виды инфографики
«Капсула времени» от Cisca. Источник: Behance
Дизайнер: Lidia-Maria Veles. Источник: Behance
Дизайнер: Антон Пчелкин. Источник: Bird in Flight
Если вы решили самостоятельно разработать инфографику, заранее определитесь с ее видом и используйте соответствующие элементы. Хотите чего-то более современного? Попробуйте свои силы в интерактивной инфографике с применением анимаций, прокрутки, всплывающих списков и других оригинальных элементов.
Также, следите за тенденциями — возможно, что-то уже вышло из моды. О 5 антитрендах в визуале мы писали здесь.
8 шагов к созданию качественной инфографики
Важное условие на пути к успеху — выбрать «правильный» сервис для разработки инфографики. Ловите подборку простых, но эффективных инструментов: Piktochart, Visme, Canva Infographic Tool, Google Charts, Infogram. Используйте инфографику для продвижения — и вы значительно увеличите вовлеченность аудитории в жизнь вашего блога.
Что такое типографика и какие шрифты использовать на сайте
Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Что такое типографика
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Как подбирать шрифты на сайт
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Классификация шрифтов
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Что такое гарнитура
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)
Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)
Выбор размеров шрифта
Размер шрифта подбирают для каждого сайта индивидуально. Главное, чтобы читать текст на странице было комфортно.
Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.
Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.
Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
Нормальный текст: 18px
Заголовок 4: 18х1,6 = 27px.
Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:
Заголовок 3: 27х1,6 = 40px.
Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков.
Сочетание шрифтов
Использование разных шрифтов на сайте помогает создать контраст и задает настроение во время чтения текста. Поэтому дизайнеры тщательно подбирают шрифты для сайта, анализируют разные сочетания.
Для выбора сочетания шрифтов нет каких-то определенных алгоритмов, потому что каждый проект индивидуален.
Обычно сочетают либо разные начертания одного и того же шрифта, либо выбирают два шрифта разной классификации. Комбинирование антиквы и гротеска помогает показать иерархию текста и добиться хорошей читабельности.
Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.
Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
Где брать шрифты
В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.
Бесплатные
Большая библиотека качественных шрифтов называется Google Fonts. Шрифт легко подобрать по нужным параметрам: выбрать только кириллицу, искать антикву или гротеск. С Google Fonts их можно скачать или напрямую подключить к сайту.
Часто дизайнеры рисуют свои шрифты и выкладывают их в общий доступ. Здесь стоит быть аккуратным, потому что не все они — качественные и подойдут для вашего проекта.
Платные
Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.
Больше о типографике и шрифтах
Шрифт проектируются для определенной цели. У каждого — разные характер и настроение. Поэтому к подбору шрифтов и верстке текста на странице важно подходить осознанно.
Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:
Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Смотрите в оба или немного об инфографике
Сегодня, в век информационных технологий и коммуникаций люди перестают читать. Люди перестают читать художественную литературу, газеты, журналы и уж тем более научные публикации. Если вдруг некто захотел узнать что-то новое, он залез в интернет, открыл статью и не стал её читать в полном смысле этого слова. Человек «сканирует» информацию глазами, находит интересные для себя моменты, бегло читает их, бежит дальше и вскоре все забывает. Как помочь человеку узнать что-то новое? Как сделать это интереснее? И как помочь запомнить хоть что-то из увиденного? Об этом дальше, но для начала небольшое видео.
Что мы имеем? Да ничего. В видео нет ни названий, ни имен, ни характеристик, ни чисел, ни стоимости. Но при этом мы понимаем, что это быстро, эффектно, стильно, ярко, круто, громко, дорого.
Почему? Зрение является главным каналом восприятия. То, что воспринимают наши глаза, является только частью общего процесса. Изображения, поступающие в мозг, изменяются и интерпретируются. Можно с полным основанием сказать, что мозг «видит».
Инфографика — это.
Если разделить этот термин на 2 составляющие, то, очевидно, что «инфографика» — это информация и какая-то графика. Это не совсем так.
Инфографика — это информация представленная с помощью графики.
Еще пара определений:
Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию.
Инфографика показывает скрытое, объясняет запутанное и адаптирует непонятное.
Несколько исторических примеров:
Первый пример инфографики в СМИ
USA TODAY, 1982г.
Карта заболевания холерой
Джон Сноу, 1854г.
Коммерческий и политический атлас
Уильям Плейфэр, 1786г.
Зачем пользоваться инфографикой?
На первой картинке изображен объем информации, поступающий через органы чувств. 
На второй — механизм восприятия мозгом изображений и текста. 
Как видно из картинки, количество действий, совершаемых при чтении и просмотре той же самой информации в виде изображения сильно различаются.
Виды инфографики
Кто крайний?
Как сделать?
Ни одна инфографика, даже с самым красивым дизайном и идеально подобранными цветами не сможет заинтересовать без соответствующего текстового наполнения.
Не важно, какой тип инфографики вы собираетесь создать, текстовый контент всегда будет на первом месте.
Советы — рассказ о том, как поступить в том или ином случае. Рассчитаны на определенную категорию читателей, отличаются тем, что со временем не устаревают.
Факты, которые вы не знали — инфографика представляет новые или малоизвестные факты в интересном
свете. Можно также комбинировать известные факты и представить их по-новому.
Сравнение — в основном, используются для выделения преимущества одного продукта над другим.
В сети информацию представляют поэтапно – по частям. Степень детализации в эскизах или раскадровке зависит от глубины проработки темы.
Эскизы используются в печатной инфографике, а раскадровка в интернет-инфографике.
4. Основной и второстепенные объекты
Основной объект в печатных СМИ – это центральное изображение. Оно должно привлекать внимание читателя.
В интернет-проекте позиция того или иного аргумента зависит не от размера элемента, а от его положения в цепи логических представлений, так как порядок представления информации следует по принципам цифровой презентациию.
Для печатных СМИ на данном этапе дизайнер сглаживает все элементы на один «слой» и начинает создавать из них информационную композицию, размещая текст.
Дизайнер веб-инфографики собирает все воедино, анимирует элементы, накладывает текст или звук, при необходимости.
— И все?!
Принципы ясны, инструкции приведены, инструменты перечислены. Казалось бы, делай шедевры. Но это еще не все. Сегодня очень многие люди и компании создают инфографику. Кто-то хорошую, кто-то не очень. Но для того, чтобы не затеряться в этой толпе, свои труды нужно продвигать. Как? Об этом в следующий раз.
И в завершении, та же самая информация в виде презентации с большим количеством картинок.
Что такое инфографика? 5 бесплатных сервисов для её создания
Чем хороша инфографика, какая она бывает и как сделать её самостоятельно. Мини-гайд для новичков в теме.
Слово «инфографика» слышали многие. А кто не слышал — всё равно с ней сталкивались, и не раз. Объясняем, что это такое и для чего нужно.
Что такое инфографика
Инфографика — это графический способ подачи информации. Если ещё проще — это информация, поданная в виде картинок. При этом помимо изображений в инфографику могут входить и другие элементы: текст, а также стрелки, диаграммы, блоки и схемы. Но ключевую роль играют именно изображения.
Созданием инфографики обычно занимаются графические дизайнеры. Иногда для этого они привлекают иллюстраторов.
Чем инфографика отличается от простого изображения или текста с изображением?
Инфографика — это не иллюстрация к тексту и не украшение, она — самодостаточный источник информации. Это значит, что все идеи и факты, которые вы хотели сообщить, есть в самой инфографике. Чтобы их понять, человеку не нужно никаких дополнительных материалов. Инфографика в целом и каждая её часть — самостоятельное средство передачи информации. Этим она отличается от, например, иллюстрации, которая хотя и передаёт информацию, но только дополнительную, и не может существовать без текста. Исключение — комиксы или рисованные истории, но это уже совсем другая тема.
Резюмируем: инфографика предназначена для быстрой, наглядной и яркой подачи материала.
Пишу научпоп, люблю делать сложное понятным. Рисую фантастику. Увлекаюсь спелеологией. Люблю StarCraft, шахматы, «Монополию».
Примеры инфографики
Говорить про картинки и не показывать их — как-то нечестно. Поэтому сейчас мы посмотрим несколько примеров, а потом продолжим разговор:
Теперь вернёмся в наше время. Вот два примера инфографики из сферы бизнеса:
Чем хороша инфографика
Действительно, данные всегда можно подать и просто текстом, таблицами и цифрами. Зачем тогда инфографика? У неё много преимуществ.
Во-первых, инфографика позволяет быстро доносить до аудитории большие объёмы данных. То, что долго пришлось бы читать, можно подать буквально в нескольких изображениях.
Во-вторых, хорошая инфографика делает информацию гораздо нагляднее. Картинки воспринимаются человеческим мозгом лучше текста, ведь на протяжении многих миллионов лет эволюции наши предки имели дело именно со зрительными образами, а никак не с текстовыми данными.
В-третьих, яркая, интересная картинка помогает привлечь внимание аудитории. Поэтому этот формат используют в публичных выступлениях, а также любят в медиа и используют в современных учебниках.
Где применяется инфографика
Инфографика применяется практически везде. Но и тут есть свои первопроходцы: например, в СМИ инфографику впервые начали использовать для подачи статистических данных.
Вот некоторые сферы применения:
Вообще область применения инфографики почти безгранична, всё зависит от вашей фантазии и целей.
Какая бывает инфографика
Существуют пять основных типов:
1. Аналитическая, или цифровая инфографика. С её помощью представляют статистические данные. Отличается обилием цифр, диаграмм, графиков и так далее.
2. Новостная инфографика. Наглядно рассказывает про свежие события, отражает хронологию и важные этапы происходящего.
3. Конструкционная инфографика. Демонстрирует устройство и составные части какого-либо объекта или механизм явления, иногда — хронологию и причины исторического события.
4. Рекламная инфографика. Создаётся компаниями для продвижения своего продукта. Яркая картинка с описанием достоинств товара и выгод от покупки. Может привлечь клиентов, если сделана хорошо — то есть сочетает грамотный маркетинг и удачный дизайн.
5. Сравнительная инфографика. Позволяет сравнить характеристики различных объектов. Если нужно, её можно дополнить более подробным анализом.
А ещё инфографика — это не только способ наглядно подать информацию, но и возможность красочно оформить шутку, сделав её ещё веселее. Вот несколько примеров:
Минусы инфографики
Как и у любого метода, у неё есть свои минусы.
Первый минус инфографики — это не очень дёшево. Написать текст или список обычно гораздо легче, дешевле и быстрее, чем подобрать подходящие изображения и грамотно их комбинировать. Кроме того, чтобы создать хорошую инфографику, нужны творческие способности, развитое дизайнерское мышление. Нужно понимать, как ваша аудитория воспримет эту графическую информацию, а ещё — оценить результат: насколько удачно то, что у вас получилось.
Второй минус в том, что иногда такая красочная форма подачи материала заставляет людей воспринимать эту информацию как не очень серьёзную. Решить эту проблему можно: заострите внимание вашей аудитории на важности того, о чём вы рассказываете.
Третий минус в том, что инфографика — это практически всегда некоторая схематичность, обобщение и упрощение действительности.
Четвёртый минус в большей степени зависит от исполнителей, чем связан с самими способом подачи информации. Дело в том, что если хорошая инфографика помогает усвоению информации, то плохо сделанная, наоборот, мешает её воспринимать, а в худшем случае даже даёт неправильную модель, неверное объяснение.
Как сделать хорошую инфографику
Сделать инфографику несложно. Гораздо сложнее сделать хорошую инфографику.
Вот несколько советов:
Бесплатные сервисы для создания инфографики
Есть много онлайн-сервисов, которые упрощают создание инфографики. Вот некоторые из них:
Очень популярный полностью бесплатный сервис. У него есть большая библиотека шаблонов и изображений. Отдельный и немаловажный плюс — наличие русскоязычного интерфейса. Помимо инфографики помогает создавать презентации, резюме, плакаты и многое другое.
Тоже популярный сервис. Можно очень быстро собрать инфографику, добавив к выбранному шаблону нужные значки, стрелки и подписи. Тоже есть огромная библиотека бесплатных шаблонов, изображений, значков и шрифтов. Несмотря на отсутствие русификации, интерфейс интуитивно понятен и вряд ли вызовет затруднения даже при минимальном знании английского.
Онлайн-сервис, особенно хорошо подходящий для создания аналитической инфографики. Позволяет загружать данные в виде Excel-файла. Базовые функции бесплатны; оформив платную подписку, можно получить дополнительные возможности. Русификация отсутствует.
Очень удобный сервис, позволяющий сделать инфографику в три простых шага. Предлагает пользователю много шаблонов и даже возможность самому их настраивать, изменять цветовую гамму. Это позволяет сделать почти уникальную картинку, несмотря на использование шаблона. Сервис полностью бесплатен и русифицирован.
Очень хорошо подходит для создания диаграмм и различных схем, в том числе очень сложных. Даёт широкий простор для творчества благодаря возможности изменять простые шаблонные фигуры под нужды проекта. Базовая версия бесплатна, русификация, к сожалению, отсутствует, но интерфейс несложен.
Заключение
Если же вы хотите научиться создавать инфографику, не пользуясь чужими шаблонами, и всерьёз интересуетесь дизайном — вам будет интересно на нашем курсе «Графический дизайнер с нуля до PRO». За восемь месяцев вы не только освоите эту профессию, но и создадите портфолио, которое поможет вам найти первых клиентов или устроиться на работу.