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

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

РСС

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

Прикольная игра для тренировки съёмки в ручном и полуавтоматических режимах:
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

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

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

В этом видео 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: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/

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

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

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

Берг показали прототип «облачной» стиральной машины

Берг — люди, которые придумали и сделали «Литл принтер», показали прототип «облачной» стиральной машины.

Вкратце:
Взяли обыкновенную стиральную машину Занусси, воткнули в неё берговский блок управления через облако, такой же, что и в «Литл принтере».

Придумали машине новый интерфейс и собрали его на платформе «Ардуино Мега»: http://arduino.cc/…/arduinoBoardMega#.UxNgi5GuFdY

Написали приложения для смартфона, которое управляет стиралкой через сеть.
Получилось очень свежо.

Подробности: http://bergcloud.com/…-studies/cloudwash

1 комментарий твитнуть  интерфейс, промдизайн, дизайн продуктов и услуг, Zanussi, Arduino Mega, стиральная машина, стиралка, Berg

Концепт телефона «Фонблокс»

Phonebloks — это концепт голландского дизайнера Дэйва Хаккенса.
Телефон состоит из съёмных блоков, которые подключаются к главной плате. Если один из блоков выходит из строя, он легко меняется на новый. Владелец такого телефона сам выбирает и ставит нужные ему блоки (дополнительную батарею, более мощную камеру), а не нужные — снимает.


Следующий шаг:

Сайт проекта: https://phonebloks.com/en

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



© 2017

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

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