Alt+N
Новость...

Просветите нас
Правила хорошей заметки для Дизайн-собаки

РСС

Инфографика в помощь рассказчику: распределение доходов в США

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

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

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

1 комментарий твитнуть  инфографика, информационный дизайн, видео, анимация, видеоинфографика, повествование, управление вниманием

Графика и интерфейсы в Обливионе


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

нет комментариев твитнуть  интерфейс, информационный дизайн, кино, анимация

Визуализация изменений в оргструктуре «Автодеска»

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


нет комментариев твитнуть  визуализация, информационный дизайн, организационная структура, autodesk

Инфографика «Виды пасты»

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

нет комментариев твитнуть  инфографика, информационный дизайн

Обложка книги 19-го века о псковских монетах

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

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

1 комментарий твитнуть  графдизайн, информационный дизайн, типографика, дизайн, гравюра, нумизматика

Визуализация даты постройки всех зданий Нидерландов

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

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

нет комментариев твитнуть  информационный дизайн, карта

Карта возраста домов Москвы

http://msk.mercator.ru/

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

2 комментария твитнуть  инфографика, информационный дизайн, карты

Наглядное объяснение условной вероятности

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

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

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

нет комментариев твитнуть  инфографика, интерфейс, информационный дизайн, Виктор Пауэлл, Victor Powell, Setosa, математика, теория вероятностей

«Пивот» — визуализация данных по принципам масштабируемого интерфейса Джефа Раскина

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

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

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

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

3 комментария твитнуть  инфографика, интерфейс, визуализация, масштабируемый мир, информационный дизайн, Микрософт, ТЕД, видео, Раскин, pivot

Дизайн концертных билетов

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

Было:

Стало:

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

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

нет комментариев твитнуть  графдизайн, информационный дизайн, Matthew Lew

Визуализация ветров — 2

Камерон Беккарио (@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

нет комментариев твитнуть  визуализация, информационный дизайн, карта ветров, Cameron Beccario

Храм

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

2 комментария твитнуть  инфографика, информационный дизайн, храм, церковь

Брошюра «Гражданская оборона», Киев, 1986 г.

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

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

нет комментариев твитнуть  графдизайн, информационный дизайн

Круговая схема метро Нью-Йорка

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

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

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

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

Инфографика в игре The Division Тома Кленси

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

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

нет комментариев твитнуть  инфографика, информационный дизайн, видео, игра, видеоинфографика, Tom Clancy, The Division

Интерактивный городской указатель

Указатель, который вертится и меняет надписи в зависимости от того, что именно вы ищете.

Подробности проекта:
http://breakfastny.com/points-sign/

13 комментариев твитнуть  навигация, городская среда, информационный дизайн, интерактив

Одна фотография, которая выглядит как четыре

Это одна фотография:

Доказательство:

Источник:
http://kottke.org/…-like-4-individual-photographs

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

2 комментария твитнуть  информационный дизайн, фотография

Визуализация падений болидов от Ногатского (861 год) до Челябинского

http://bolid.es

нет комментариев твитнуть  инфографика, информационный дизайн, метеорит

Все музыкальные стили разом

По клику можно послушать, а кавычка справа от стиля ведёт к исполнителям — http://www.furia.com/…/genremaps/engenremap.html

1 комментарий твитнуть  интерфейс, информационный дизайн, музыка, облако тегов

Вот сегодня

Интерактивный сайт показывает, где сегодняшний день расположен на шкале времени:

http://hereistoday.com/

1 комментарий твитнуть  информационный дизайн



© 2017

Дизайн-бюро
Артёма Горбунова

Пишите: mail@artgorbunov.ru