Трохи про інфографіку

Київ, 29.01.15

з чим /з ким / як /коли їсти інфографіку

Ажіотаж

#0

source: nutshellcreative.co.nz

Алегорія

sou

rce:

info

grap

her

.ru

sou

rce:

bes

tin

fogr

aph

ics.

co

Чому інфографіка працюєабо цифри

#1

90% інформації про зовнішній світ людина отримує через зір

Успішніше справляються із завданням люди, що

дотримувалися інструкцій з ілюстраціями, ніж з

інструкціями без

В 3 рази

source: ????

для считуваннясимволу

+150 мсдля розуміння

значення

+100 мс

source: katieshelly.com

source: chefdaw.livejournal.com

info info

info

info

info

infoКількість

інформації, яку ми отримуємо, за

останніх 20 років, збільшилася

в 5 разів

1986 2014

аудиторії сприймаєвиключно вербальну

презентацію

50%аудиторії сприймає

вербальну презентацію з візуальними

компонентами

67%

Візуальний супровід тексту збільшує бажання його

прочитати

на 80%

+

Баж

анн

я чи

тати

Люди запам'ятовують:

10% 20% 80%

з того, щоПОЧУЛИ

з того, щоБАЧИЛИ та РОБИЛИ

з того, щоПРОЧИТАЛИ

Історія “в картинках”

#2

source: friendsofthegoletavalleylibrary.com

source: dailymail.co.uk

Картинки первісних людей

source: wikimedia.org / istoryk.in.ua

Єгипет

Кораблі рабів в північній Америці

source: viscomvibz.wordpress.com

source: wikimedia.org

Перші діаграми з книг

Карта Сноу(1854) – розповсюдження холери

source: pubhealth.spb.ru

Карта Сноу(1854) – розповсюдження холери

source: pubhealth.spb.ru

х

х

х х

х

Вікторіанська графіка(1857)

source: wikimedia.org

Похід Наполеона на Москву(1861)

source: wikimedia.org

Періодична система Менделєєва

source: school.xvatit.com

Варіації таблиць Менделєєва

source: 1.bp.blogspot.com

Варіації таблиць Менделеєва

source: geeknaut.com

Інфографіка в Радянському Союзі

source: chevoblin.livejournal.com

Інфографіка в Радянському Союзі

source: politiko.uasource: finance.bigmir.net

Графік розвитку візуалізацій в усіх періодах

source: ????

#3

Чи всі картинки - інфографіка

Ілюстрація vs Інфографіка

Ілюстрація

•Зображення, що супроводжує текст з метою полегшення сприйняття змісту

•Зображення, що відтворює текст

•Не дає додаткових даних для порівняння

source: slovoidilo.ua

Інфографіка

• графічний спосіб для швидкої передачі комплексної, об'ємної інформації/даних

Дозволяє швидко знаходити додаткові залежності та зв'язки

“… Інфографіка подає інформацію за допомогою графіків, діаграм та карт …” ©Альберто Каіро

source: engage.tmgcustommedia.com

Якщо інформація підпорядкована дизайну

– це ІЛЮСТРАЦІЯ

Якщо дизайн підпорядкований інформації

– це ІНФОГРАФІКА

ІнформаціяДизайн

ДизайнІнформація

Протистояння простоти та дизайну

source: Tufty

Протистояння простоти та дизайну

source: Alberto Cairo, Functional Art

source: Alberto Cairo, Functional Art

#4

Трохи файних прикладів

source: Ярина Михайлишин, газета День

source: slovoidilo.ua

source: slovoidilo.ua

#5

Прийоми та підходи “подкатом”

Характеристики інфографіки

1. СТИСЛІСТЬ комплексні дані в спрощеному вигляді

sou

rce:

info

-gra

ph

ic.r

u

2. ВІЗУАЛІЗАЦІЯ алегоричність та іконографіка

source: inspirationfeed.com

source: costofsolar.com

sou

rce

: in

fogr

aph

iclis

t.co

m

source: inspirationfeed.com

source: flickr.com/photos/gianordoli

3. ОРГАНІЗАЦІЯ чітко виділені структури

source: awesome.good.is

source: infographicsinsights.com

4. ТОЧНІСТЬ ні маніпуляціям, слідкуйте за пропорціями

source:

source: Джин Желязні, Говори на языке диаграмм

source: designyourway.net

source: designyourway.net

source: designyourway.net

source: exitcreative.net

5. ПРОСТОТА стоп сміттю

source: perfectfruit.blogspot.com

Hm… what are the roots?

source: tcdailyplanet.net

З чого все починається

Нормалізація

Структурування

Виділення паттернів

Додатковий збір даних

Збір даних

Нормалізація = одноманітний вигляд

Таблиці Mind Maps

source: infiniteminds.info

Структурування = виділити дані, які ми можемо порівнювати

source: thevisualcommunicationguy.com

Виділення паттернів

Групування даних

Інфографіка = гештальт

Інфографіка = паттерн

Порівняння лінійних величин

Порівняння лінійних величин

Rм / Rб = 1 : 2

Sм / Sб = 1 : 4

!

Різні покоління – різне сприйняття

Різні покоління – різне сприйняття

Складність графіків (за Альберто Каіро)

source: Alberto Cairo, Functional Art

Не завжди величини варто об'єднувати в одному об'єкті

source: Alberto Cairo, Functional Art

Читач немає замислюватися і

рахувати –лише охати і ахати

Синтез і порівняння отриманої інформації

відбувається на метальному рівні

#6

Онлайн-інструментарій

visualisingdata.com/index.php/resources/

selection.datavisualization.ch

Easel.ly – сервис по створенню в онлайні

Piktochart – більш прокачаніший сервіс візуалізації

Wordly – фановий, але корисний сервіс

CartoDB – для створення карт

Raw – для вибору діаграм

Огляди, приклади використання інструментів візуалізації

(здебільшого програмування)

Український блогTextura.in.ua

?

Тарас Родиненко

infographica.com.ua

taras.rodynenko

Були використані думки та матеріали:Тараса Волянюка facebook.com/taras.volyanyukАндрія Зінченка facebook.com/zinchenko.andrijАльберто Каіро thefunctionalart.com

#7

Кава-брейк

#8

Практика