Информационный дизайн

Финский инженер Оона Райсанен составил чёткую блок-схему с описанием всех звуков, которые издаёт диалап-модем при установке соединения: http://windytan.blogspot.fi/…-sound-of-dialup-pictured.html

Cтатья на Хабрахабре с картинками и подробностями: http://habrahabr.ru/post/167927/

Сайт из интерактивных стопочек и интересные прогрессивные работы в графдизайне и визуализации:
http://lust.nl

http://seismograph.co/…-bicycle-map-sf.html

Точки были получены на городском сайте https://data.sfgov.org, где в открытом доступе лежит ещё куча данных о Сан-Франциско. В случае велосипедов это заявления владельцев в полицию. Часть точек, кстати, была удалена с карты, так как они ссылались на адрес центрального отделения полиции, который, видимо, ставят в рапорте по умолчанию.

Какие государства, где и с какой частотой взрывали ядерные бомбы с 45 по 98-й год. Драматический нарратив простыми методами представления информации. 2003 г., Исао Хасимото.

Разработчик фитнес-приложения «Страва» визуализировал данные о велосипедных поездках и пробежках на карте мира:

What's this: This dataset includes 77,688,848 rides and 19,660,163 runs representing about 220 billion total data points.

Как бегает Европа: http://labs.strava.com/…/#4/9.42390/48.42072/gray/run

На велосипеде больше всего ездят в Британии и Голландии: http://labs.strava.com/…/#4/9.42390/48.42072/gray/bike

В Екатеринбурге бегают вокруг воды (озеро Шарташ, на карте справа, вдоль пруда — в центре, и в парке Маяковского): http://labs.strava.com/…/60.62088/56.82198/gray/run

В Москве бегают по набережным и в любом, даже самом маленьком парке: http://labs.strava.com/…/37.55173/55.75210/gray/run (видны Парк Горького + Воробьевы, Сокольники, Серебряный Бор, Измайлово и Кузьминки)

На видео — пример качественного комбинирования устной речи и анимированной инфографики с целью раскрытия важной и сложной темы.

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

Интересно, как бы похожий график распределения доходов выглядел для России?

В фильме использовано довольно небольшое количество CG-сцен — авторы старались снимать больше натуры. Большое внимание было уделено и интерфейсам из будущего. Они мелькают в фильме чуть ли не каждую минуту.

«Автодеск ресёрч» визуализировали изменения в структуре компании с мая 2007-го по июнь 2011-го года.

О проекте: http://popchartlab.com/…-of-pasta-permutations

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

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

Красивый пример того, что можно сделать из открытых данных и картографического движка: дата постройки всех зданий в Нидерландах закодирована цветом. Можно увидеть исторический центр и новые районы.

http://citysdk.waag.org/buildings/

http://msk.mercator.ru/

Удачное решение — разделить эпохи «по смыслу», а не просто по столетиям, как в аналогах.

Виктор Пауэлл визуализировал понятие условной вероятности: http://setosa.io/conditional/

Два события представлены двумя полосками: одна красная, другая синяя. На них падают мячики. Длину полосок можно изменять слайдером, тем самым изменяя и вероятность попадания мячиков на них. Этим изменяется и вероятность попадания мячиков на обе полоски.

К визуализации прилагается текст с грамотным использованием цветового кодирования.

В 2009 году ребята из Лайв Лабс (канувшего в лету отделения Микрософта) разработали Пивот — экспериментальный инструмент для просмотра больших массивов данных.

В Пивоте принцип навигации основан на идее о масштабируемом интерфейсе Джефа Раскина.

В 2010 году Гари Флейк показал Пивот на ТЕДе:

Пивот был разработан на Сильверлайте + ИЕ. Его до сих пор можно скачать http://research.microsoft.com/…-92d6-496f-867d-666c87fbaada на сайте Микрософта и даже сохранилась какая-то документация http://www.microsoft.com/…/pivotviewer Но примеры, показанные в презентации, уже недоступны, так как исчезли вместе с закрытием Лайв Лабс в 2010.

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

Было:

Стало:

Вдумчивый рассказ о редизайне: https://medium.com/…-could-be-better/271977289b41

См. также о редизайне посадочного талона: https://medium.com/…-ux/c72084d7793e

Камерон Беккарио (@cambecc) визуализировал ветры планеты: http://earth.nullschool.net/

Вдохновлением послужила «Визуализация ветров» Северной Америки: http://design.artgorbunov.ru/…-vetrov

Визуализация ветров на планете: теплые, холодные. Смотреть можно в разных проекциях, на разных высотах, работает зум.

О проекте: http://earth.nullschool.net/about.html
Исходники на гитхабе: https://github.com/cambecc/earth. Работает на node.js, D3, backbone и when.js

Занимательная инфографика об устройстве храма.
http://infographicsmag.ru/…-about-church.html

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

Брошюра целиком: http://vk.com/album-35683765_180833489

Макс Робертс предложил аккуратную и чистую схему с радиусами и окружностями. Это его девятый подход к снаряду, выглядит приятно:

Крупная версия:

Интервью с автором (по-английски) и другие картинки:
http://www.creativereview.co.uk/…/nyc-subway-map-max-roberts

Недавно была анонсирована онлайн-РПГ следующего поколения. Игра полна клёвой и модной инфографики и занятных девайсов. Ниже трейлер и геймплейный ролик с Е3 (партийный съезд разработчиков игр в Лос-Анджелесе).

Сайт игры: http://tomclancy-thedivision.ubi.com