Як зробити інфографіку?

Як зробити інфографіку? Інфографіка бере складні дані та інформацію та переводить їх у прості для розуміння візуальні ефекти. У сьогоднішньому швидко мінливому світі графічним дизайнерам необхідно просто та ефективно донести думку.

 

Крауд тестування. Як це зробити?

Текстові дані в графічні дані. Як зробити інфографіку?

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

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

Тут ми можемо швидко оцінити, що Тибор на 100% вільно розмовляє голландською і приблизно на 88% — англійською, завдяки простій круговій діаграмі. Він використовує інші розумні підходи, такі як значки для його хобі та "вимірювачі", щоб швидко відображати свій рівень навичок у різних програмах та концепціях дизайну.

Миттєво ми бачимо, що він має 75%-ний рівень навичок у Photoshop, Illustrator та InDesign. Вся його інформація передана просто та лаконічно (і освіжаюче), що перевершує довгі розтягнуті пропозиції щодо його історії з Adobe Creative Suite. Як зробити інфографіку?

Картинки (і схеми), аніж тисяча слів

Всім відома приказка: «Картинка коштує тисячі слів». Цей вислів переконливо свідчить про силу інфографіки: люди – візуальні істоти. Там, де текст вимагає часу та розумової обробки, зображення часто бувають миттєвими та інтуїтивними.

У прикладі інфографіки використовується серія діаграм для пояснення роботи кубика Рубика. Враховуючи складність кубиків Рубіка, потрібно як мінімум тисяча слів, щоб швидко та наочно пояснити, що ці діаграми показують. Крім того, ця інфографіка барвиста та цікава. Це, без сумніву, краще текстового пояснення кубика Рубіка.

Потік. Як зробити інфографіку?

Інфографіки притаманні візуальні потоки. Це важливо пам'ятати під час розробки інфографіки. Як і у випадку з будь-яким іншим предметом дизайну, дизайнер відповідає за те, щоб привернути увагу глядачів до дизайну.

Інфографіка зліва зображує процес виготовлення взуття у три етапи. Якби ми критикували цю частину, ми могли б сказати, що погляд починається із заголовка вгорі і, природно, тяжіє до великого взуття на даху.

Потім ця велика взуття призводить нас до кроку 3 процесу, який знаходиться в міхурі збільшення. Ой! Ми сподівалися почати з кроку 1 ...

Хоча ця інфографіка барвиста та красива, у ній явно є проблеми із потоком. Одним із способів вирішення цієї проблеми може бути розміщення третього ступеня на першому поверсі цієї будівлі та першого ступеня нагорі поряд з великим черевиком.

У подальшій критиці ми можемо сказати, що графіка не обов'язково передає багато текстових даних або іншим чином. Наприклад, на етапі «Виробництво» ми бачимо дві фігури, що сидять на стільцях в черевиках, але це не обов'язково дає нам додаткову інформацію або відчуття про цей етап, крім слова «Виробництво». Те ж саме можна сказати про «Проектуванні» і «Ескізах». Як зробити інфографіку?

Давати відчуття даних

Хороша інфографіка відображає емоцію, а також набір даних. Іншими словами, вони викликають у глядача інстинктивну реакцію внаслідок миттєвого та/або швидкого розуміння, яке дає інфографіка.

Приклад вище відображає простий відсоток володіння землею, але надає цим даним складне відчуття, пропонуючи складну та реалістичну графіку. Більшість людей можуть не знати, що землеволодіння у Сполучених Штатах поділено таким чином, і вигляд цього зображення землі, розрізаної та відгородженої, може природно викликати почуття занепокоєння чи спонукання дізнатися більше про цей предмет.

Навігація з іконками. Як зробити інфографіку?

В іншому стилі інфографіки значки використовуються разом із текстом, щоб допомогти глядачеві орієнтуватися в даних. Приклад праворуч виконує саме це, пояснюючи, як розпізнати брехню.

На кроці 1 замість пояснення того, як ці жести рук можуть виглядати письмово, використовуються три ефективні зображення. Зрештою ці жести легше показати в ілюстраціях, ніж у письмовій формі.

В іншому методі крок 2 безпосередньо з'єднує графіку з текстовими поясненнями, використовуючи текст як «підписи» для напрямків, в які можуть дивитися чиїсь очі, якщо вони брешуть. Цей підхід також ефективний і має гарний круговий малюнок ока.

Крок 4 використовує графік по-іншому. Щоб візуально сформулювати "Слухайте голосові індикатори", використовується зображення звукової хвилі. Це менш ефективно, ніж графіка на кроці 1, оскільки насправді не відображає жодних даних чи інформації. З урахуванням сказаного, він забезпечує візуальну інтригу та узгодженість з рештою дизайну, що може чогось коштувати і зрештою виправдати графіку.

Робимо дані привабливими. Як зробити інфографіку?

Крім функціональних та практичних якостей інфографіки, є ще одне її застосування – зробити дані привабливими та красивими. У наведеному прикладі вплив зміни клімату на тимчасову шкалу весни візуально представлений на «сонячному циферблаті» з використанням наборів даних про птахів, дерев і температуру.

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

Як зробити свою інфографіку?

У цьому уроці ми будемо використовувати Photoshop для створення інфографіки, яка є порівняння даних між поїздкою на велосипеді і поїздом з парку Вашингтон-сквер на Манхеттені в центр міста Вільямсбург в Брукліні. Згідно Google Maps, поїздка на велосипеді між цими двома точками займає 18 хвилин, а поїздка – 30 хвилин.

 

Для початку знімок екрана з Google Maps можна вставити у наш файл Photoshop і знебарвити. Вивчаючи початковий приклад Тібора ван ден Брінка, який стосується кольору та естетичної привабливості, порівнюваний маршрут можна виділити жовтим кольором.

Рамка карти також пофарбована в жовтий колір і призначена для того, щоб залишити місце для тексту вгорі. Це вміст розташовується поверх темно-сірого фону для контрасту і накладається на тонку текстуру паперу, щоб надати йому відчуття «карти». Як зробити інфографіку?

Потім, маючи на увазі приклад "Як виявити брехню", ми можемо додати кілька значків, які допоможуть сформулювати дані. Тут ми будемо використовувати мінімальний значок велосипеда та мінімальний значок поїзда. Наслідуючи цей творчий потік, ми можемо додавати до значків «сліди» різної довжини, які приблизно відповідають відносної тривалості кожної поїздки.

Ретельно підбирається додатковий синьо-зелений колір. Майте на увазі, ми хочемо зробити ці дані максимально привабливими!

Нарешті ми можемо додати наш текст. Вибраний простий і лаконічний заголовок, а хвилини встановлені великим і легко читається шрифтом. Ця інфографіка успішна тим, що графічно перекладає безліч текстових даних, включаючи карту маршруту, методи транспортування і час, що порівнюються. Як зробити інфографіку?

Він також успішний у тому, що робить ці дані привабливими. Дизайн барвистий, професійний, чистий та простий.

Висновок

Інфографіка буває різних форм. Вони можуть містити ілюстрації, діаграми, кольори, поєднувати текст із іконками або навіть бути фотографічними. Дизайнерам корисно розуміти різні типи інфографіки та вміти розрізняти, коли вони працюють, а коли ні.

Використовуйте цю статтю як введення і подивіться, чи зможете ви розбити таку інфографіку, з якої зіткнетеся, як спосіб зміцнити свої власні навички дизайну інфографіки!