Інфографіка: види, приклади робіт, майбутнє. Інфографіка: види, приклади робіт, майбутнє Вбудоване відео і GIF
Фішка віртуальної реальності в тому, що для оточуючих ви будете виглядати ідіотом
Google's Cardboard Design Lab - хороший "підручник" для початківців дизайнерів віртуальної реальності
Інфографіка - як гра-бродилка
Проблема з Unity в тому, що не так то просто зробити хорошу річ під web
Віртуальна реальність - це як навушники для ваших очей
Віртуальна реальність вимагає безпечного оточення, ви не можете піти в неї "на ходу". Це обмежує можливості VR
Закривав сесію першої половини дня Archie Tse з The New York Times з провокаційною темою "Чому NYT робить менше інтерактивних робіт».
Робота NYT базується на трьох правилах візуального сторітеллінга:
- Якщо читачеві потрібно клікнути, а не скролить, потім має відбутися щось надзвичайне.
- Виходите з того, що спливаючі підказки і будь-які інші ефекти при наведенні, ніхто ніколи не побачить. Якщо контент важливий - зробіть так, щоб читач відразу його побачив.
- Якщо ви хочете зробити щось інтерактивне, пам'ятайте - буде дорого зробити так, щоб це працювало на всіх платформах.
Вам доведеться перемальовувати вашу графіку 2 або 3 рази, щоб все працювало і на робочому столі, і на мобільних
Як ці правила змінили підхід NYT:
- Більшість візуалізацій тепер статичні
- Текстів стало більше
- Якщо рух в зображенні потрібно - воно з'являється під час скрол
(Четвертий пункт свідчить, що вони як і раніше роблять інтерактивні роботи. Але тепер привід повинен бути ДУЖЕ значущим).
Ми робили "многошаговкі". Користувачі зупинялися на кроці 3. Читачі хочуть просто скролить, а не клікати
Archie Tse: Scrolling Vs. clicking
Вже 18 тижнів кожен вечір неділі Енді Крібел публікує інфографіку і дані, на основі яких вона зроблена, на сайті VizWiz. Завдання - протягом понеділка виділити приблизно годину часу, швидко проаналізувати візуалізацію і зробити свою версію.
Нижче публікуємо результати минулого тижня - Рабство в XXI столітті.
#MakeoverMonday від Andy Kriebel. Детальний опис і інтерактив - в блозі Енді:
#MakeoverMonday від Andy Cotgreave. Детальний опис і інтерактив - в блозі Енді:
Я також дізналася, що 51% людей в світі молодший за мене, а 63% в Росії старше, і що мої шанси померти прямо зараз не так вже й великі. Цифри раптом перестали бути «статистикою» і зачепили мене за живе.
візуалізація даних - використовує великі набори даних з меншою кількістю ручної роботи над дизайном; базується на алгоритмах. Наприклад, інтерактивна робота New York Times.
візуальне мистецтво - односпрямоване кодування. Красиві, але важко піддається розшифровці візуалізації, наприклад, обчислювальний мистецтво Куна Ананда.
В чому проблема?
У підсумку багато роботи залучають тільки витончених користувачів, але не дозволяють вникнути в суть питання непосвяченим читачам, тим самим завдаючи шкоду мети візуалізації - інформувати громадськість. Саме тому настільки важливо усвідомити і зрозуміти проблему візуальної грамотності в контексті візуалізації.
Нова «візуальна граматика» журналістики
Наведу як приклад три роботи, які експериментують зі способами подання інтерактивної журналістики. Вони виглядають переконливо, але і їх інтерпретація може стати для багатьох непростим завданням.
Права гомосексуалістів в США, штат за штатом
Кількість доступних на сьогодні джерел даних і інструментів для їх обробки само по собі вже наочно показує, що ще ніколи стільки людей не намагалося освоїтися в світі візуалізації даних. А коли є таке число матеріалів, доступних до вивчення, один тільки питання "З чого почати?" може налякати кожного новачка. Отже, які ж бібліотеки є кращими і що радять професіонали? Про це і піде мова в даній статті.
Говорити про візуалізації даних і не згадати - це все одно, що розповідати про історію створення персональних комп'ютерів і ні словом не обмовитися про Стіва Джобса. D3 (від англ. Data Driven Documents) - це без перебільшення найважливіша і домінуюча на ринку JavaScript бібліотека з відкритим вихідним кодом, яка зазвичай використовується для створення SVG-графіків. SVG (від англ. Scalable Vector Graphics) - це в свою чергу формат векторного зображення, підтримуваний веб-браузерами, але раніше мало використовувався.
Бібліотека D3 багато в чому зобов'язана своєю популярністю раптового інтересу до SVG з боку веб-дизайнерів, що в значній мірі пояснюється тим, як виграшно векторні графіки виглядають на екранах з великою роздільною здатністю (зокрема, на Retina-дисплеях, використовуваних в пристроях Apple), які стають все більш поширеними.
«Будемо чесними, якщо завдання полягає в візуалізації даних на основі SVG, то для її вирішення все решта бібліотеки навіть поруч не стояли», - каже Moritz Stefaner, незалежний експерт в області візуалізації даних і власник компанії Truth & Beauty. «Є також чимало цікавих проектів, створених на базі D3, як, наприклад, NVD3, який надає стандартні графічні компоненти - готові до використання, але кастомізіруемие; або, скажімо, Crossfilter - просто видатний інструмент для фільтрації даних ».
Scott Murray, програміст-дизайнер і автор книги Interactive Data Visualization for the Web, Згоден з попереднім думкою: «D3 володіє надзвичайною силою, яка полягає в тому, що в ньому використовується все, що тільки можуть запропонувати браузери. Хоча у цього є і зворотна сторона: якщо браузер не підтримує щось, наприклад, 3D-зображення на основі WebGL (від англ. Web Graphics Library), то і D3 це підтримувати не буде ».
І хоча ця бібліотека по-справжньому універсальна, вона все ж не є ідеальним рішенням для будь-якого завдання. «Основний недолік бібліотеки D3, якщо можна так висловитися, полягає в тому, що вона не наказує і навіть не пропонує якогось певного підходу до візуалізації», - додає Scott Murray. «Тобто це дійсно інструмент для завантаження даних в браузер з подальшою генерацією DOM-компонентів на основі цих даних».
У той час як D3 являє собою відмінний інструментарій для кастомних зображень, якщо ви хочете створити стандартний графік без особливої \u200b\u200bопрацювання візуального аспекту, то вам може бути корисний такий інструмент як Vega. Будучи фреймворком, розробленим на базі D3, Vega надає альтернативу для відображення графічних компонентів. Використовуючи Vega, можна візуалізувати дані в форматі JSON Європейський центр журналістики і проект Data Driven Journalism. Точні дати проведення курсу поки не відомі, але зареєструватися можна вже зараз.
За п'ять днів учасники курсу зможуть дізнатися що таке журналістика даних, як вона влаштована і які ключові навички варто освоїти, щоб стати фахівцем в цій галузі. З'ясувати де шукати дані в підтримку своїх сюжетів і як знаходити нові ідеї в наявних даних. Вивчити майстерність перетворення нудних даних в захоплюючу історію, інфографіку або навіть в інтерактивну візуалізацію. Познайомиться з основними принципами графічного дизайну, які необхідно знати журналісту.
Інструктори курсу - п'ять провідних світових експертів з журналістики даних і візуалізації.
Ви, напевно, помітили масовий перехід в онлайн світі від заснованого на тексті змісту до візуального контенту.
Не можна заперечувати силу визуалов на просторах інтернету і в нашому повсякденному житті. В YouTube і Instagram домінує візуальне зміст; YouTube - 3 по відвідуваності сайт в мережі, і в Instagram понад 80 мільйонів фотографій викладаються кожен день.
Пости в блогах і статті на 80% більше «споживчість», якщо в них є кольорові зображення, заголовки або ескізи, і люди витратять не більше 15-ти секунд на сайт, якщо він не залучить їх увагу з перших секунд.
Інфографіка - фаворит серед аудиторії і продавців, і вона на 800% сильніше цікавить людей сьогодні, ніж в 2012.
Додатково до всього, контент створюється із загрозливою швидкістю - 60% маркетологів створюють принаймні невелику частину нового контенту кожен день! Детальніше ви можете дізнатися з оглядової статті.
Оскільки все більше і більше людей стали створювати контент, дещо стає ясно: для того, щоб вас побачили, вам потрібно виділятися.
Природно, маркетологи змісту вже замислюються про майбутнє візуального контенту, розраховуючи, що вони можуть робити зараз, що вони зможуть реалізувати і які нові технології вже з'являються на горизонті. Таке передове мислення - це те, що може створити всі або зруйнувати всі ваші зусилля в контент-маркетингу; ви повинні адаптуватися, або потонете.
З таким візуальним контентом, як інфографіка, маркетологи мають унікальну можливість бачити майбутнє в міру його наближення. Компанії, графічні дизайнери, і маркетологи - все починають використовувати інфографіку - оновлювати її, щоб зробити її ще більш привабливою для аудиторії. Навіть якщо ви вже "просто вивішуєте" інфографіку регулярно, ніколи не рано дізнаватися про тенденції, які тільки починають розвиватися, так само як не рано дізнаватися, як реалізовувати їх в ваших стратегіях контент-маркетингу.
Якщо ви хочете зазирнути в майбутнє, і, можливо, навіть дізнатися кілька трюків раніше, ніж всі інші, зараз саме час!
Ось три типи інфографіки, які будуть найбільш поширеними в (найближчому) майбутньому.
Якщо ви шукаєте крутий інструмент для створення інфографіки, я рекомендую звернути увагу на Visme. Для початку вони пропонують безкоштовний аккаунт і відмінні зручні функції для тих, хто не займається дизайном. Можете отримати безкоштовний акаунт зараз.
1. Інтерактивна інфографіка
Хоча ми і бачимо всю красу інтерактивних сайтів і простих у використанні ігор, інтерактивна інфографіка все ще досить нова в своїй області. Як і інфографіка, вона очевидно містить якусь інформацію, і вона зазвичай динамічна. Але використання інтерактивних елементів дає користувачам можливість мати зв'язок з інформацією та створювати свою власну.
Незалежно від вашого бізнесу, продукту, послуги або повідомлення, ви можете створити інтерактивну інфографіку, яка дозволить людям оцінювати себе (наприклад, «розрахуйте свій BMI тут»). Користувачі можуть також клікнути на відповідну інформацію, яка відправить їх до більш глибоко орієнтованого ресурсу, або назад до цільової сторінці, створюючи тим самим трафік. Це дуже адаптується і веселий спосіб залучити аудиторію.
Багато маркетологи вже пристосувалися до цього виду інфографіки, і це передається швидко. Але в цей же час багато, все-таки, беруть за основу прості інфографіки:
... .тільки уявіть, що ще можна робити з інтерактивними інфографіка.
Ви можете спробувати:
- Використання технік прокрутки, що змушує зображення або фігури виділятися в порівнянні з фоном
- Побудова "спливаючих вікон" які розширюють області тексту
- Випливання зображень або статистики, при кліці на них
- Перетворення своїх інфографіка в кілька сторінок, які користувачі можуть переглянути
Для більш детального прикладу інтерактивної інфографіки, подивіться на цю:
Щоб зробити інфографіку високо інтерактивної (з прокруткою, спливаючими вікнами і т.д.) вам знадобитися дізнатися трохи про HTML5 або CSS, або найняти когось ще, хто розбереться з цим питанням для вас.
Незважаючи на додаткові зусилля, винагородою для вас буде унікальна, приваблива і ефективна частина контенту.
Чому потрібно намагатися впроваджувати інфографіку в найближчому майбутньому?
- Це надихає вашу аудиторію взаємодіяти з вашим контентом і ділитися ним
- Це генерує трафік (через посилання)
- Це доводить вашої аудиторії, що ви інноваційні, винахідливі і маєте намір надавати своєчасний і цікавий контент.
- Існують рівні інтерактивної інфографіки, які роблять керованим її розвиток
2. Вбудоване відео і GIF
Це інший тип інфографіки, який ми спостерігаємо все частіше і частіше сьогодні. Інфографіки, що пропонують короткі відео або навіть GIF (Формат обміну графічними даними) - відмінний спосіб привернути увагу і виділити вашу інфографіку з натовпу. Тоді як це обмежує платформи, ви можете ділитися своєю інфографікою в теперішньому часі.
Безліч простих інструментів для створення інфографіки, таких як Easel.ly, пропонують опцію "Вбудоване відео з YouTube", або ж ви можете додати відео в інфографіку, яку ви створюєте в Photoshop за допомогою відео шару. Ви можете навіть додати відео в слайд Powerpoint, який ви також можете перетворити в інфографіку.
Більш того, ви можете знайти мільйони гифок в мережі і вставити їх аналогічним чином. Заковика тут в тому, що вам доведеться поширювати свою інфографіку як URL, щоб бути впевненим, що вона правильно вбудована в ваш сайт. Ви не можете поширювати або зберігати такі інфографіки в формате.jpeg або PDF. Безсумнівно, так як це стає все більш популярним, з'являться і інші інструменти вставки відео і гіф, щоб зробити процес ще більш простим.
Але якщо вам захочеться використовувати цей тип інфографіки до того, як все навколо, і навіть їх собаки, навчаться робити це, починайте зараз з тими інструментами, які знайдете в мережі.
Якщо ви хочете перейти на наступний рівень, ви можете зробити відео з інфографіки, яку ви вже маєте. Це відмінна можливість бути побаченим на YouTube, в Instagram, і навіть на таких відео платформах, як Vimeo, Snapchat, і інших. Відео внизу - відмінний приклад того, як перетворити інфографіку в відео.
Навіщо вставляти відео або гіф в інфографіку?
- Це дає вам елемент несподіванки - люди не чекають, що картинка почне рухатися!
- Це дуже весело і оригінально, що збільшує шанс того, що люди будуть взаємодіяти і ділитися вашої інфографікою
- Це хороший спосіб показати всім унікальність свого бренду
3. Анимированная інфографіка
Анімована інфографіка має величезну кількість візуальних моделей і вимагає великої уваги. Коли користувач переглядає сторінку, він зазвичай не очікує, що що-небудь буде рухатися, тому дуже непогано, якщо ви вивчите всі ці техніки ще до того, всі інші зроблять це.
Через те, що багато анімовані інфографіки досить складні, і можуть вимагати якогось графічного дизайну, кодування, і / або знань в галузі програмного забезпечення, вони дуже високо цінуються.
Ось приклад того, про що я говорю:
Якщо ви хочете отримати додаткову інформацію, як створювати анімовану інфографіку, зверніть увагу на цю інфографіку від Tabletop Whale. Ви так само можете знайти різні сервіси, які допомагають у створенні інфографіки такого плану. У будь-якому випадку, це один з найскладніших процесів в еволюції інфографіки.
Чому вам варто витратити свій час, енергію і / або гроші на створення анімованої інфографіки?
- Це насправді виділить вас з натовпу, бо не кожен має доступ до такого роду програмного забезпечення або контенту
- Вже через пару років це буде звичайним явищем - ви будете одним з перших, хто зробить це!
- Анімація зробить інформацію всередині інфографіки більш запам'ятовується
- Це надихне ваших користувачів на роботу з вами
Все це не наукова фнтастіка
Це може звучати занадто технічно і здаватися чимось, за межею ваших можливостей зараз, але цілком імовірно, що ці види інфографіки стануть дуже навіть звичайним явищем через 2-3 роки. Ми вже зараз можемо спостерігати сильний прорив в анімованих інфографіка та гіф-інфографіки, особливо завдяки тому, що популярність гифок продовжує зростати. Інфографіки стають одним з найбільш споживаних і найбільш часто створюються типів контенту на просторах інтернету. Чому? Та тому що мозку потрібно всього 250 мілісекунд щоб прийняти і обробити значення символу.
Якщо середньостатистична людина проводить близько 15-ти секунд на сайті і потім починає нудьгувати, то ви, само собою, захочете витягнути на екран все, що може затримати його - або принаймні отримати повідомлення через 15 секунд або менше. Деякі дослідження навіть довели, що люди можуть концентрувати увагу на чому-небудь не більше 8-ми секунд, і цей показник зменшується з кожним роком.
Це і є причиною і, можливо, побічним продуктом нашої постійної потреби отримувати інформацію. Ми живемо в епоху інформації та вся інформація доступна для нас. Але це також означає, що чим більше люди намагаються ділитися повідомленнями і відповідати на всі можливі питання, тим більше виробленого контенту стає фоновим шумом.
Якщо наявність інфографіки сьогодні є показником, то скоро вона буде скрізь. Це означає нові зміни у вашій роботі. Жодна рекламна кампанія в історії не домоглася успіху, роблячи одне і те ж весь час.
Ідея тут полягає в тому, щоб побачити в інфографіці щось більше, ніж ізображеніе.jpeg. Інфографіки можуть бути адаптовані до різних середовищ і використовуватися на величезній різноманітності платформ. Підприємці та маркетологи вже побачили потенціал в цьому. А ви?
Майбутнє візуалізації даних в інтерактивності.
Але як створити по-справжньому приголомшливу інтерактивну інфографіку?
Інфографіка всюди, і останнім часом вона все частіше стає інтерактивною.
У сьогоднішній статті ми поділимося з вами секретами створення інтерактивної інфографіки, а також посиланнями на корисні ресурси.
1. Розумійте психологію
Перед тим, як робити інфографіку інтерактивної, важливо зрозуміти, чому ви хочете її зробити саме такий.
Як докладно розказано в цій інфографіці, люди краще сприймають візуальну інформацію. Ми з набагато більшою ймовірністю прочитаємо, зрозуміємо і запам'ятаємо презентацію, якщо в ній будуть захоплюючі візуальні засоби. є ефективним інструментом навчання, але і він може стати ще краще.
Кінетичне навчання - відмінна альтернатива, так як люди краще засвоюють інформацію через фізичні дії.
Ось чому додавання інтерактивності в перспективну сферу візуалізації допоможе вам створити ще більш запам'ятовується і ефективну інфографіку.
Ця комбінація візуального і кінетичного підходу робить анімовану інфографіку контентом майбутнього. Звичайно, для деяких тим краще не використовувати інтерактивні елементи, але в більшості випадків вони тільки поліпшать контент.
Рух надає додатковий сенс інформації, дозволяє користувачеві управляти досвідом і задіє уяву так, як цього не зможе зробити статична інфографіка.
2. Додайте ефекти при прокручуванні
В останні кілька років інфографіка еволюціонувала від статичних картинок до насиченого інтерактивного досвіду з елементами анімації і відео, адаптованими під унікальний контент. Вона більше не обмежується заздалегідь підготовленими, універсальними шаблонами. І сьогоднішня добірка містить кращі зразки інфографіки, що демонструють, як виглядає цікавий і інформативний досвід.
Велика частина інфографіки в цьому списку була обрана, щоб показати різні способи, за допомогою яких дизайнери підходять до візуалізації даних. Однак тут є також кілька «гібридів», що ілюструють стирання кордонів між інфографікою і насиченим мультимедійним досвідом при створенні захоплюючого контенту і переконливих історій на Лендінзі. Відхилення від традиційних форм означає, що ми заходимо на більш складну медіатерріторію, і саме такі експерименти з технологіями і розповіддю матимуть вирішальне значення для формування майбутнього графічного дизайну.
1. Карта вітрів
«Карта Вітрів» (Wind Map) - це захоплюючий зразок дизайну, в якому показані напрямок і швидкість вітру над Сполученими Штатами. Даний дизайн несе швидше художню, ніж утилітарну мету, і це прекрасно: дуже приємно просто сидіти і дивитися, як тонкі-тонкі ниточки в'ються по карті. Простий, але добре продуманий приклад того, як інфографіка, що показує траєкторії руху фігур, виграє від анімації і рухомих зображень.
2. У польоті
У 2014 році The Guardian запустив інфографіку «У польоті» (In Flight), що демонструє дані про відбуваються в реальному часі комерційних перельотах (здається, зараз відомості не оновлюються, а шкода), а також містить урок з історії авіації. Приглушені розмови між авіаційними екіпажами на початку інтерактивного шоу створюють особливу атмосферу. Схоже, що інфографіка в наші дні поступово перетворюється в кінематографічний досвід. По крайней мере, «В польоті» вказує на цей напрям ...
3. Наберіть Місяць
В інфографіку «Наберіть Місяць» (Dial A Moon) відбувається щось, але вона служить своєї мети досить добре. У 2015 році, завдяки NASA, інфографіка місячних фаз оновлювалася кожну годину, і можна було не лізти в Google в пошуках цієї таємничої інформації. Тепер ви можете подивитися картинки, вручну ввівши місяць, день і час.
4. Доба з Плутоном
Журнал Nature публікує багато цікавої інфографіки для своєї цікавиться наукою аудиторії. Була в їх числі і одна про знаменитого прольоті космічного корабля біля Плутона (24 Hours Of Pluto). Інфографіка включала багато текстової інформації, але візуальні ефекти забезпечували легке розуміння самого цікавого, від будови карликової планети до процесу формування її лун. Зараз в Інтернеті доступна текстова частина, а також два анімаційних відео з інфографіки.
5. Як змінювалися американські будинки
Здійсніть подорож по великій американській мрії, відбите через еволюцію в стилях будинків. Ця добре ілюстрована інфографіка дозволяє вам сісти за кермо автомобіля (також змінює свій вигляд у міру прокручування, щоб не відставати від епохи) і прокласти шлях від 1900-х до 2000-х років, проїжджаючи повз будівель, популярних протягом окремих десятиліть. На цьому шляху вам зустрінеться безліч корисних матеріалів (включаючи соціально-політичні умови того часу, а також напрямки в моді), і все це закінчується питанням, що спонукає вас уявити майбутнє американського будинку. Інфографіка Decades Of American Homes - відмінний приклад горизонтального скролінгу, тут він до місця.
6. Еволюція маркетингової аналітики
У своїй інфографіку Evolution of Insight компанія Vision Critical, що займається «інтелектуальними» для користувача дослідженнями, відстежує розвиток ринку маркетингових технологій у всьому світі з 1890-х до наших днів. Вона функціонує аналогічно інфографіку «Як змінювалися американські будинки», і, таким чином, дозволяє порівняти ефективність застосування інтерактивної тимчасової шкали для двох дуже різних історій. Інфографіка Decades Of American Homes має перевагу, оскільки перегляд будинків у міру руху на автомобілі набагато більш інтуїтивний, ніж подорож по великій американській аналітиці. Хороша інфографіка створюється з урахуванням особливостей контенту, а не навколо нього.
7. Права ЛГБТ-спільноти в усьому світі
The Guardian захоплює ще одну позицію в нашому списку з цієї елегантної інфографікою, що пояснює юридичну ситуацію з прав ЛГБТ з цілої низки питань (шлюб, дискримінація на робочому місці, злочини на грунті ненависті і т.д.) в кожній державі світу. Переміщення по півколу забезпечує швидкий і простий спосіб порівняння статистики між різними країнами, а композиція інфографіки зберігає глобальний статус на передньому плані в центрі. Тут також є потужний заклик до дії, який має на меті подолання розриву між простим усвідомленням проблеми і активізмом.
8. Нерівність можна виправити
Ще один чудовий приклад інтерактивної інфографіки «Нерівність можна виправити» (Inequality Is Fixable) запрошує аудиторію зануритися в проблему, роблячи її глибоко особистою. Глядач гарантовано не втратить інтерес до матеріалу, що повідомляє йому або їй, скільки недоплачує його / її бос і чому. Роблячи користувача частиною історії, розробники підігрівають цікавість і проводять користувача за всіма необхідними етапами прямо до заклику до дії (Call-To-Action) в кінці.
«Ми дали цьому здійснитися - як же тепер все виправити?»
9. Намалюйте самі: як сімейний дохід пророкує шанси вступу дитини до коледжу
Багато з інфографіки в цьому списку використовують анімацію і інтерактивність для забезпечення багатого досвіду. Візуально дана інфографіка від New York Times (You Draw It: How Family Income Predicts Children's College Chances) дотримується класичного формату діаграми, але вона також використовує розуміння користувача поведінки для розширення області інфографіческого дизайну, а саме такий метод як випереджальну і інтерактивну візуалізацію. Просячи читачів намалювати власну криву, вони впроваджують елемент особистої зацікавленості і таким чином дають людям дійсно цінну інформацію.
Чи не найгірший результат! Вертикальна вісь - відсоток дітей, які поступили в коледж. Горизонтальна вісь - перцентиль батьківського доходу
10. Як помирають американці
За винятком титульного зображення цей приклад використовує в основному тільки старі-добрі діаграми для візуалізації контенту. Але це зовсім не нудно, оскільки користувачам доступно самостійне переміщення за даними за допомогою руху курсора вздовж графіків. Це значно сприятиме кращому розумінню, наприклад, кількості смертей, пов'язаних з самогубством, в 70-і роки в порівнянні з нинішнім (натяк: зараз воно знаходиться на підйомі), статична діаграма не впоралася б з цим так спритно.
11.
З тих пір, як дебютував проект «Снігопад» (Snowfall), що заслужив загальну увагу і похвалу, New York Times підтримує свою репутацію представника передової мультимедійної журналістики. Команда видання використовує поєднання інфографіческого дизайну і поглибленого оповідання для створення вражаюче цікавого досвіду. У них є і більш яскраві приклади, але The Russia Left Behind є роботою, викликала певний резонанс. Інфографіка функціонує як інтерактивна поїздка по Росії (ви прокладаєте собі шлях на карті).
12. Машини Бонда
Якщо ви коли-небудь захочете познайомитися з історією Джеймса Бонда, подивившись на його машини, то подякуйте британського автодилера Evans Halshaw - він надав вам такий шанс. Його інтерактивна інфографіка Bond Cars дозволяє вам вивчити модель і дизайн кожного з автомобілів Бонда, а також дає кілька додаткових цікавих фактів. Використовуючи всюдисущу тактику слайдера, ви також можете «розкрити» автомобіль у всій його металевою красі (за замовчуванням дається лише одноколірний малюнок). Так автори творчо вирішили проблему необхідності включити фотографії, не зовсім підходять під естетику інфографіки.
13. Кольори руху
«Кольори руху» (The Colors Of Motion) - це інфографіческая серія, що аналізує фільми тільки по їх кольоровій палітрі, отриманої із з'єднання всіх кадрів. Якщо ви коли-небудь задавалися питанням, то тепер у вас є відповідь. Чи не можете знайти заголовок в базі даних? Просто надішліть розробникам повідомлення - вони приймають запити.
14. Царська гробниця в Перу
National Geographic має досить вражаючу колекцію, як вони самі її називають, «інтерактивної графіки» (більшість з якої супроводжується детальними текстовими описами, як у випадку, наприклад, з Колонній Траяна), але ми вибрали цей відносно простий приклад, щоб підкреслити, застосування яких методів дійсно ефективно в інтерактивній інфографіці. «Царська гробниця в Перу» (Peru's Royal Wari Tomb) розкриває особливості поховання дворянки тих часів. Фокус переходить від обмотки мумії до її прикрас і положенню. Поділяючи інформацію на невеликі частини і дозволяючи користувачеві переміщатися між ними, інтерактивна графіка уникає самих підступних пасток: надлишку даних і візуальних ефектів. Більш того, кожна подальша взаємодія розширює досвід, роблячи його набагато корисніше, ніж в разі, якби все було представлено відразу. Наш мозок володіє механізмом, що відкидає пригнічують стимули, а даний тип взаємодії стає відмінним рішенням для користувача, дозволяючи легко поглинати інформацію.
15. Що таке «Шотландський референдум»? Пояснення для не-британців
The Guardian, як і New York Times, робить ставку на мультимедійну журналістику, і їх відеоролик на ура справляється з однією з головних функцій інфографіки: надавати громіздкою інформації прийнятну форму. Для багатьох з нас, що живуть за межами Великобританії, референдум є дуже заплутану тему. На щастя, це відео (Scottish Referendum Explained For Non-Brits) допоможе вам швидко дізнатися про її важливих аспектах, не вимагаючи глибокого занурення в історію.
16. Здоров'я населення
Перед виданням The Atlantic стояло завдання - розвинути концепцію поліпшення здоров'я суспільства. Воно доручило компанії Truth Labs оформити серію статей з 3-х частин про «Здоров'я населення» (Population Health) в вигляді цифрового оповідання. Основна мета виконавця полягала в збереженні природної прокрутки документа і звичайних для користувача умов читання і створення при цьому досвіду, що відрізняється від візуальної перспективи. Щоб втілити задумане в життя, вони запозичили інструменти і стратегії у кінематографа, але також орієнтувалися на набір дизайнерських принципів для підтримки принципу зручності читання в якості ключового правила.
17. Зерна Joho's
Австрійський виробник кави Joho "s створив вражаючий мультимедійний досвід Joho's Bean, щоб розповісти історію походження кавових зерен. Оповідання гармонійно поєднує в собі аудіо-, відео- і фотоматеріали, що задіють майже всі почуття користувача. Слідуючи за фермером, який проходить по кавовій плантації, ви чуєте , як щебечуть птахи, як звучать обсмажені кавові зерна, впаковують в мішки, а також як шумлять жваві вулиці і транспорт в місті. Повне занурення!
Joho "s відправляє вас у подорож, що пояснює походження їх кавових зерен
18. Первинна дорога
«Первинна дорога» (The Wild Path) - це інтерактивний експеримент, розповідь про подорож, створений за допомогою Canvas. Основним елементом є карта, анімуйте шлях на карті при прокручуванні сторінки. Проект може працювати не у всіх браузерах. Зате йому супроводжує супровідна стаття, яка пояснює все, що залишилися за лаштунками технології створення інфографіки.
19.
Освітлення президентських виборів в США в 2016 році виданням The Guardian (Live Election Results) привнесло цікавий елемент в серйозна справа, яка стосувалася набраних відсотків і виборчих дільниць. Інтерактивна інфографіка відстежувала голосу в чотирьох штатах. За замовчуванням на графіку були показані результати по всій країні, а якщо користувач наводив курсор на яку-небудь ділянку на карті, то демонструвалося, які цифри кандидати набрали саме там. Кандидати в президенти були представлені у вигляді смішних піксельних аватарів. У міру відновлення інфографіки в живому часі, чоловічки підфарбовували кольором штати, в яких вони виграли. Час від часу поряд з кандидатом з'являлася його цитата в міхурі.
Відображення результатів виборів в реальному часі
