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

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

РСС

Страва Лэбс визуализировали данные со своих спортивных трекеров

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

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 (видны Парк Горького + Воробьевы, Сокольники, Серебряный Бор, Измайлово и Кузьминки)

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

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

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

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

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

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/

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

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

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

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

В 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

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

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

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

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

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

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

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

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

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

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

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

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

http://bolid.es

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

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

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

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



© 2017

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

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