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

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

РСС

Делаем таблицы читабельными

Рассказ о дизайне таблиц данных https://medium.com/…-data-tables-430a30a00d8c

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

Коллекция фотографий панелей управления

Коллективный альбом на «Фликре», где собирают фотографии приборных панелей самых разных систем. Сейчас в коллекции более 2300 фотографий. Электрощиты, музыкальные микшеры, кабины самолётов и вертолётов, поездов, мотоциклов, автомобилей, осциллографов, музыкальных аппаратов. Есть даже советский луноход.

https://www.flickr.com/…/controlpanel

нет комментариев твитнуть  интерфейс, панель управления

Игра «КамераСим» — симулятор съёмки на зеркальный фотоаппарат

Прикольная игра для тренировки съёмки в ручном и полуавтоматических режимах:
http://camerasim.com/…/original-camerasim/web

Отлично подходит для изучения базовых принципов:
как взаимосвязаны выдержка, диафрагма и ИСО;

как работает приоритет выдержки и диафрагмы;

что будет, если увеличить ИСО;

что получится, если фотать со штатива;

что будет с фоном при открытой и закрытой диафрагме и так далее.

нет комментариев твитнуть  игра, интерфейс, настройки, симулятор, съёмка, фото, фотоаппарат, фотография

Атомик — прототипирование в браузере

Atomic.io — сайт для прототипирования в браузере с возможность быстро посмотреть все изменения. И удобнее акшура.

Видеопрезентация:

https://atomic.io

1 комментарий твитнуть  интерфейс, приложение, прототипирование, сайт

Визуализация общественного транспорта в реальном времени

http://tracker.geops.ch
Сайт в реальном времени отображает передвижение общественного транспорта в большинстве городов Европы и Америки.

Отображается почти любой общественный транспорт: метро, трамваи, автобусы, пригородные поезда и даже междугородние экспрессы.

Возможности масштабировать +/− любой участок карты, переключать информационные слои карты, выбирать точку, чтобы посмотреть схему и расписание маршрута (при выборе станции на схеме карта к ней автоматически прокручивается). Можно даже ускорить время и заглянуть в будущее :-)

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

Наслаждайтесь, медитируйте, мечтайте!

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

Упрощение восприятия рельефа местности на географических картах

Исследователи из Университета штата Орегон и французского института ИНРИА предлагают интересный способ помочь мозгу воспринимать рельеф на интерактивной карте. Суть метода заключается во временном превращении двухмерной плоскости в трёхмерную модель при изменении области просмотра.

С одной стороны, отображение рельефа при помощи теней или изолиний не полностью интуитивно, а также затратно (цвет и форма как визуальные переменные могут потребоваться под другие задачи). C другой стороны, трёхмерность и полная свобода выбора угла обзора подразумевает дополнительные способы взаимодействия и искажает пространство, поэтому подходит далеко не всегда. Предложенный метод дёшево и эффективно улучшает восприятие глубины, при этом не усложняет интерфейс и не требует смены привычек у пользователя.

Детали описаны в одиннадцатистраничной публикации, бесплатно доступной для всех интересующихся:
https://hal.archives-ouvertes.fr/…-SACLAY/hal-01105179v1

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

Физический интерфейс диджейского пульта на Айпаде

Немецкий дизайнер Флориан Борн (Florian Born) прикрутил физические ручки к виртуальному контроллеру в Айпаде:

1 комментарий твитнуть  айпад, диджей, интерфейс, промдизайн

Гугль показал ранние прототипы часов на Андроиде

Гугль поделился с изданием «Зе Вёрдж» ранними прототипами часов на Андроиде. Можно отследить ход их мыслей и увидеть отброшенные варианты.

Ещё несколько картинок по ссылке: http://www.theverge.com/…-the-evolution-of-android-wear

нет комментариев твитнуть  android wear, google, Гугль, интерфейс, концепт, прототип, умные часы

Историческое видео об интерфейсных элементах

В этом видео 1990 года собраны интерфейсные элементы и способы управления, использовавшиеся в различных графических средах того времени. Некоторые из них сохранились до наших дней в неизменном виде. Другие не прошли проверку временем.

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

0:02:30 — Полосы прокрутки
0:12:59 — Клёвая фишка, когда скролбар толкает курсор
0:13:55 — Таскание лифта скроллбара с нажатым Альтом, оказывается, работает на Маке до сих пор
0:17:00 — Целая специальная рамочка возникает, которая показывает, куда тебя переместит скроллинг! Видимо, попытка обратной связи в ситуации, когда всё окно перерисовать не получается

0:17:16 — Меню
0:19:00 — Экран похож на осциллограф :-) А уже попап-меню показывает
0:20:20 — Курсор прыгает по меню сам, чтобы не надо было двигать. Интересно, почему все интерфейсы, двигающие курсор мыши за человека, не выжили
0:21:07 — Hamburger menu!
0:26:00 — Круглые меню
0:28:50 — Отрывные меню, превращающиеся в палитры
0:33:20 — Пункты меню по умолчанию и их предпросмотр
0:35:10 — Превращение меню в окно
0:39:35 — Клик в список опций с контролем и шифтом до сих работает именно так (на Маке вместо контроля комманд)

0:45:02 — Палитры

0:46:48 — Кнопки

0:54:22 — Радиокнопки
0:55:47 — Привычный вид
0:56:33 — Лаконичный способ отличить радиокнопки от чекбоксов через касание. Может быть актуально в эпоху флэт-дизайна

0:59:16 — Чекбоксы

1:01:14 — Выделение текста
1:05:47 — Оказывается, раньше выделенный текст не стирался, когда печатаешь

1:13:26 — Ввод
1:21:31 — Формы и диалоговые окна
1:30:05 — Выделение графических объектов
1:34:27 — Редактирование графических объектов
1:39:15 — Иконки и окна
1:47:24 — Управление окнами

1 комментарий твитнуть  видео, интерфейс, история, меню, прокрутка, радиокнопка, чекбокс

Интерфейс «Формулы-1»

Автомобильный сайт «Мотор» рассказал об устройстве руля современного болида «Формулы-1». К сожалению, написано недостаточно популярно, но разглядывать интересно:

Мерседес:

Феррари:

Маруся:

А так выглядел руль Айртона Сенны в 1984 году:

http://motor.ru/…/2012/08/28/f1steeringwheels

1 комментарий твитнуть  автомобиль, болид, гонки, интерфейс, руль, спорт, форула-1, эргономика

Блок-схема звуков модема

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

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

1 комментарий твитнуть  Oona Räisänen, звук, интерфейс, информационный дизайн, модем, приём

Новый сайт «Вёрджин Америки»

Авиакомпания «Вёрджин Америка» показала новый сайт: http://beta.virginamerica.com/

Презентация: http://static.virginamerica.com/…/newlookvx/vx-redesign-9/7

Тезисы:
полноэкранный интерфейс бронирования;
один выбор на одном экране;
очередной редизайн посадочного талона.

нет комментариев твитнуть  Virgin America, веб-дизайн, интерфейс, посадочный талон, сайт

Документальный фильм о создании игры The Last of Us

Сумасшедше интересный документальный фильм о создании игры для Плейстейшена. Главная тема — привязка к реальности: насколько ребята заморочились по детализации и нюансам.

Связь драматического сюжета и игровой механики. Персонажи, характеры, актеры, пробы, озвучка, захват движений. Как актеры мучаются и плачут между дублями.
Зараженные и выжившие. Как придумывали и рисовали зомбаков, придумывали для них биологические циклы.
Концепт-арт. На что смотрят, как добиваются разных настроений.
Игровая анимация. Как через неё передают характер персонажей.
Оказывается, сначала снимают движения актеров, а потом снимают движения камеры, на которой работает оператор.
Звук и музыка. Откуда берется звук ветра и сирен.
Освещение. Художник по свету просыпается в пять утра, чтобы собрать нужные цвета теней на рассвете.
Текстуры. «Цвет крови нормальный, но на этой траве не в тему».
Организация уровней. Как по ним расставлены предметы и лестницы, почему тайники именно там, а не где-то еще.
Программирование персонажей и противников.
Внутриигровой интерфейс.

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

Сериал Black Mirror

Истории о том, как нас губят технологии.

«У нас есть доступ ко всей информации в мире, но в голове хватает места лишь для того, чтобы воспринять 140 символов из сообщения в твитере»

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

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

Геймификация интерфейса Андроида

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

Сейчас беда в том, что ачивки спрятаны в антресоли, которую тоже нужно уметь открыть.

нет комментариев твитнуть  Андроид, геймификация, интерфейс, обучающий мастер, обучение

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


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

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

Прозрачные панели инструментов поверх фотографии

Адоби-таки выпустили Лайтрум для Айпада. С прозрачными органами управления прямо поверх фотографии.

https://itunes.apple.com/…-lightroom/id804177739?mt=8

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

Скролл-путешествие из Петербурга в Москву

Эллен Бэрри отправилась из Петербурга в Москву и записала впечатления.

В «Нью-Йорк Таймсе» её рассказ, фотографии и видео оформили на длинной странице с инфоскроллером (маршрут слева).

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

Как у Ерофеева.

http://www.nytimes.com/…/2013/10/13/russia

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

Интерфейс заказа пиццы

Мировая сеть пиццерий «Пицца Хат» запустила в тестовом режиме в Нью-Йорке сенсорные столы, с помощью которых можно выбирать ингредиенты начинки для собственной пиццы и производить заказ.

Интерфейс сенсорного стола позволяет самостоятельно выбирать не только набор продуктов для желаемой пиццы, но и её размер, степень прожарки. После выбора пиццы можно мгновенно оформить свой заказ. Вся необходимая информация оперативно поступает на кухню.

2 комментария твитнуть  pizza hut, интерфейс, исследования, сенсорный экран

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

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

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

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

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



© 2017

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

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