Визуальная аналитика современного мира

заметки с тегом

дизайн

Что такое инфографика?

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

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

Что можно считать инфографикой?

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

Отсюда и вывод – если получается взглянуть на изображение и, не вчитываясь в надписи, сразу же разобраться, какую тему поднимают авторы и какие вещи предлагают изучить, значит, инфографика выполнена корректно и в соответствии с установленными правилами и жанровыми условиями.

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

Для чего используется?

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

пример применение инфографики

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

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

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

Принципы и примеры

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

  1. Основная задача – легко и непринужденно рассказать о «сложном, но важном». А потому полезная нагрузка должна приближаться к 100 %.
  2. Визуальное описание последовательно, а каждый факт сопровождается иконками, стрелочками, или отдельными изображениями.
  3. Цветовая гамма – эмоциональная и красочная, то есть сразу же привлекающая внимание. И целевая, и нецелевая аудитория должны, если не разобраться в каждом факте или аспекте, то хотя бы зацепиться взглядом за дизайн.
  4. Графические объекты в инфографике составляют ассоциативный ряд и помогают в уме складывать информационно-визуальный пазл, который надолго осядет в голове.

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

Что такое инфографика?

Пример инфографики с вертикальным повествованием. По клику — оригинальная статья.

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

Что такое инфографика?

Классический пример инфографики от Яндекса о распределении поисковых запросов по времени суток в 2017 году

Виды и типы инфографики

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

По формату

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

Как подсказывают эксперты, статичные данные в инфографике встречаются в 90 % случаев. Причины столь широкого распространения «статики» незамысловаты – так и дизайн легче продумать, и методы распространения не придется выбирать (пример статичной инфографики легко передать по электронной почте, через социальные сети или же напечатать в газетах и журналах), и разбираться в концепциях не придется.

Что такое инфографика?

Пример статичной инфографики с фактами о метро

Что такое инфографика?

Пример инфографики о чтении в России

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

Пример видео-инфографики о средней жизни человека:

 

Пример видео-инфографики о том, как наше тело реагирует на острые ощущения:

 

Интерактивная инфографика. Графическое представление информации, разрешающее пользователям взаимодействовать с данными и наблюдать за ответной реакцией, встречается редко даже в современных реалиях. А ведь за интерактивом будущее – так намного легче следить за тенденциями изменений статистических показателей, проще разыскивать взаимосвязь между отдельными явлениями (как пример – между курсами валют, населением Земли или процентом говорящих на английском языке людей) и легче разбираться в важных нюансах.

Что такое инфографика?

Пример интерактивной инфографики об экспорте оружия

Интерактивная инфографика бывает двух видов: первая помогает пользователю взаимодействовать с заранее подготовленными данными, переключая кнопки и двигая ползунки. А вторая инфографика сосредоточена сначала на добавлении новой информации (цифр, слов или показателей), а после – на пересчете данных в зависимости от добавленных показателей.

Что такое инфографика?

Пример интерактивного калькулятора-инфографики

По подаче данных

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

Что такое инфографика?

Пример сравнительной инфографики

Кстати, сравнивать иллюстраторы давно научились даже крошечные наборы цифр в 3-5 показателей. И ведь на «выходе» не к чему придраться – даже из 3 показателей легко собрать наглядный пример и сразу же уловить суть.

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

Что такое инфографика?

Инструкция о том, как сочетать еду и вино

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

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

Что такое инфографика?

Пример интерактивной инфографики-схемы

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

Карта. Эксклюзивный тип представления информации, который с легкостью можно разделить еще на десяток подразделов, в зависимости от тематики.Главное – помнить: если на экране – схематично оформленная планета Земля с надписями, диаграммами и графиками, значит, дизайнеры уже рассказывают о чем-то важном на наглядном примере.

Что такое инфографика?

Пример интерактивной инфографики-карты о наступлении Наполеона

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

100 лучших инструментов и сервисов для дизайнера

Инфографика, где на одной картинке собраны 100 самых лучших инструментов и ресурсов для дизайнера. Все инструменты разделены по категориям:

— Типографика
— Стоковые фото
— Стоковая графика
— Инструменты для совместной работы
— Цвета
— Вдохновение
— Редакторы графики
— Дизайн логотипов
— Прототипирование

100 лучших инструментов и сервисов для дизайнера

Использование кавычек в Европе

В разных странах — разные правила типографики. Например, в России, Франции и Испании принято использовать «кавычки-ёлочки». В Германии используют „кавычки-лапки“, в Польше и Нидерландах „польские кавычки” (обратите внимание как повернуты хвостики), в США и Англии “английские кавычки”

Karol Machi сделал карту и показал на ней как использую кавычки в странах Европы. Полезно, если вы пишете что-то на другом языке или локализуете сайт.

Использование кавычек в Европе

Как сделать юзабилити-аудит

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

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

Юзабилити-аудит включает 7 позиций. Все вместе они делают сайт удобным в использовании и полезным для аудитории.

Как сделать юзабилити-аудит

 

Зарплаты дизайнеров

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

Больше всего ценится дизайнер интерфейсов, ему достаточно проработать 3 года, как зарплатная ставка повышается до 110 000 рублей. Немного отстаёт 3D-дизайнер. Ему предлагают в среднем 102 500 рублей. В этой специализации преобладают мужчины. Дизайнеры интерьеров, мебели и ландшафтов — в основном женщины. Их труд ценится значительно ниже, поскольку рынок переполнен специалистами. Средняя позиция у веб-дизайнера, но повысить свой заработок вдвое он может, проработав некоторое время в крупной компании.

Зарплаты дизайнеров Зарплаты дизайнеров Зарплаты дизайнеров

 

Зарплаты дизайнеров Зарплаты дизайнеров

 

Макеты городов в 3D

Топография, архитектура и маршруты движения дают каждому городу неповторимую структуру.
Эти условия формируют похожую, но индивидуальную внутреннюю структуру города.

Luis Dilger решил показать эти структуры не только обычным способом сверху, но и в точной трехмерной визуализации.

Данные OpenStreetMap позволили ему визуализировать информация со спутников используя DEM Earth в Cinema 4D. В результате получились изумительные виды столиц и небольших городов.

Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D Макеты городов в 3D

 

UX-дизайнер vs UI-дизайнер

Подборка инфографики о разнице между UX (опыт использования) и UI (графический интерфейс). В США и Европе эти понятия уже устоялись и надеюсь у нас это тоже произойдет. Не путаем понятия и чувствуем разницу.

UX-дизайнер vs UI-дизайнер UX-дизайнер vs UI-дизайнер UX-дизайнер vs UI-дизайнер

 

Он же дизайнер

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

Довольно забавно подаются многие проблемы

Он же дизайнер Он же дизайнер Он же дизайнер Он же дизайнер Он же дизайнер

 

Как выбрать монитор

Выбрать монитор дело не простое. Так как очень часто плохие мониторы означают плохую картинку и проблемы в работе. Что бы выбрать правильный монитор нужно обратить внимание на несколько факторов.

1. Диагональ. По сути, это размер монитора.
2. Разрешение. Чем больше, тем лучше, качество картинки.
3. Угол обзора. Под каким углом монитор будет плохо видно, и экран будет темнеть.

Все остальное можно посмотреть на картинке ниже

Как выбрать монитор

Оптимизация лендинга в 3 шага

Конверсия одна из важнейших вещей для предпринимателя. По сути, конверсия это соотношение пользователей, которые посетили страницу и которые приняли предложения. Как известно от посадочных страниц зависит количество продаж.

Что нужно для того что бы ваш дизайн просто просился, что бы ваш товар купили:

1. Используйте не менее 9 высококонверсионных элемента.
2. Тексты, которые находятся на страницах, должны быть понятны как людям, так и поисковикам.
3. Протестируйте сайт и закройте все дыры.

Оптимизация лендинга в 3 шага