Блоги: заметки с тегом информационный дизайн

На интерфейсном курсе: толщина — носитель цвета

Илья Бирман — Fri, 30 May 2025 13:22:25 +0500

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

ЧатГПТ от моего лица: «В этом фрагменте я объясняю, что цвет в интерфейсе должен передаваться через достаточно заметный носитель. Если делать очень тонкие линии, как в легендах или диаграммах, цвет в них сложно воспринимается — он теряется. Можно попробовать утолщать линии, но тогда они начинают мешать и выглядеть громоздко. Поэтому, если уже нужна цветовая маркировка, лучше использовать её там, где она имеет дополнительную функцию — например, покрасить сам текст, иконку или фон. Так цвет работает не сам по себе, а усиливает другой элемент.»

Это фрагмент № 172 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 19 февраля 2024 года.

Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: нужны не круговые диаграммы, а таблица

Илья Бирман — Sat, 12 Aug 2023 11:35:57 +0500

Илья Бирман:

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

Это фрагмент № 111 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.

До 25 августа идёт запись на курс, который пройдёт с 26 августа по 24 сентября. Сейчас действует скидка 10% из-за ранней записи.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: в чём проблема интерактивных графиков

Илья Бирман — Tue, 08 Aug 2023 11:27:55 +0500

Илья Бирман:

Участник курса нарисовал график, но он оказался интерактивным — разные данные на нём появляются в зависимости от того, куда кликнул пользователь. Рассказываю, почему это проблема даже на уровне подхода, но ещё разбираем и конкретные проблемы в самом интерфейсе. 6 минут:

Это фрагмент № 110 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.

Почитать о курсе

Программа, отзывы, запись

Обращение в Минздрав России по поводу знака о запрете курения

Илья Бирман — Thu, 15 Jun 2023 09:39:38 +0500

Илья Бирман:

Это обращение касается приказа Министерства здравоохранения Российской Федерации от 20.02.2021 № 129н «Об утверждении требований к знаку о запрете курения табака, потребления никотинсодержащей продукции или использования кальянов и к порядку его размещения» и связанной с ним практикой оформления пассажирского транспорта.

Приказ строго регламентирует положение, размер и даже графический дизайн знака о запрете курения — детально описано, как именно должна выглядеть сигарета, элементы дыма:

Приложен образец:

Написано «рекомендуемый образец», но с учётом текста выше это выглядит как единственный возможный вариант. Как правило знак размещают ровно таким:

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

В результате таких жёстких правил страдает оформление транспортных средств: знак о запрете курения оказывается самым крупным и заметным элементом оформления, уступая другим обозначениям. Кроме того, его приходится размещать на каждой двери транспортного средства:

Фото: Полит74.ру

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

Фото: Новый день

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

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

Пример того, что хотелось бы считать разрешённым вариантом:

На интерфейсном курсе: когда визуализация потрачена впустую

Илья Бирман — Fri, 28 Apr 2023 20:06:48 +0500

Илья Бирман:

Ещё один спич про то, когда нужна, а когда не нужна визуализация. Например, визуализация иногда помогает выявить манипуляции с данными. 4 минуты:

Это фрагмент № 98 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.

До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: рассуждения про инфографику и её задачи

Илья Бирман — Fri, 10 Mar 2023 22:56:17 +0500

Илья Бирман:

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

Это фрагмент № 95 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.

До 10 марта идёт запись на курс, который пройдёт с 11 марта по 10 апреля.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: если данных мало, то и график не нужен

Илья Бирман — Sat, 04 Mar 2023 23:03:15 +0500

Илья Бирман:

Рассуждаю о том, когда нужна визуализация, а когда достаточно просто таблички. Вообще об этом на курсе есть лекция «Выбор формата», но тут к слову пришлось заранее. 5 минут:

Это фрагмент № 94 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 7 октября 2022 года.

До 10 марта идёт запись на курс, который пройдёт с 11 марта по 10 апреля.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: вспомогательные линии — тоньше и скромнее

Илья Бирман — Wed, 18 Jan 2023 00:51:58 +0500

Илья Бирман:

Вспоминаем черчение и экономим чернила на каждом пикселе. 3 минутки:

Это фрагмент № 87 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 10 июня 2022 года.

До 27 января идёт запись на курс, который пройдёт с 28 января по 26 февраля.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: редизайним форму настройки сложной логики

Илья Бирман — Fri, 12 Nov 2021 10:48:26 +0500

Илья Бирман:

У нас сложная форма настройки логических условий фильтра со вложенностями и прочими делами. Приводим её в чувство путём чистки от всего графического мусора. Обсуждаем, где будут ошибки и как показать возможность добавления этажей. 9 минут:

Это фрагмент № 53 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2021 года.

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

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: про сложное цветовое кодирование и триаду Мейксенара

Илья Бирман — Thu, 07 Oct 2021 19:20:57 +0500

Илья Бирман:

Начинающие дизайнеры любят использовать много цветов, как бы закрепляя за каждым из них какой-то смысл. Но люди не видят в этом системы и воспринимают это как просто бессмысленную пестроту. Лучше уложиться в два-три цвета. 5 минут:

00:00 Что не так с кучей цветов
01:30 Как делает навигацию Мейксенар

Это фрагмент № 46 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 13 февраля 2021 года.

До 24 октября идёт запись на курс, который пройдёт с 30 октября по 28 ноября.

Почитать о курсе

Программа, отзывы, запись

Внесение асимметрии

Илья Бирман — Fri, 30 Apr 2021 18:48:58 +0500

Илья Бирман:

Если какие-то вещи симметричны, логично и обозначать их симметрично.

А вот несколько примеров того, что иногда полезно внести асимметрию.

На знаках вылета и прилёта самолёт взлетает и приземляется:

Аэропорт Гамбурга

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

Твой ряд и встречные ряды:

Из поездки Артемия Лебедева

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

Промежуточный сигнал светофора при переключении на зелёный и на красный:

Картинка Пиксабай

Между красным и зелёным огнями находится жёлтый, но при переключении с красного на зелёный загораются красный и жёлтый вместе. Благодаря асимметричному дизайну мы даже в промежуточном состоянии понимаем направление переключения. Кроме того, промежуточное состояние ещё и немного разный смысл имеет: просто жёлтый разрешает проехать, если это необходимо для избежания слишком резкого торможения, а жёлтый с красным только сообщает, что вот-вот загорится зелёный, но ехать не разрешает ни при каких обстоятельствах.

Математические знаки «плюс» и «минус», кстати, тоже несимметричны.

А у вас какие примеры есть?

Разметка аэродромов

Илья Бирман — Wed, 22 Jul 2020 11:55:38 +0500

Илья Бирман:

Изначально заметка была опубликована 10 декабря 2018 года в моём телеграм-канале @ilyabirman_channel

Хотел вам про разметку аэродромов рассказать. Вообще у меня на рабочем столе лежит папочка Airfield markings, я давно хотел написать (она создана в ноябре 2009 года; короче, время пришло).

Есть взлётно-посадочные полосы (по-английски короче: runways) и рулёжки (taxiways). У них очень разная разметка, и когда одно переходит в другое, кажется, будто они вообще ничего друг о друге не знают.

У ВПП всё белое: белые рамки, белый осевой пунктир и белые «пешеходные переходы» по краям. ВПП размечена как футбольное поле, в смысле, что это один объект, раскрашенный целиком по определённым правилам. Аэропорт Кеннеди в Нью-Йорке:

(Зацените клёвый жёлтый самолётик справа сверху.)

13L — это значит, что полоса проходит под углом 130° к чему-то там и она левая (где-то есть параллельная ей 13R).

Рулёжки — жёлтые. У них обязательно есть осевая, по которой надо передними колёсами ехать, и границы, которые в некоторых аэропортах размечают назойливым «забором» (немцы и англичане в такой фигне не замечены — у них-то мы и будем учиться информационному дизайну).

Там, где рулёжка подходит к ВПП, есть всякие линии со сложными узорами (они означают что-то про то, на каком расстоянии от ВПП нужно ждать в зависимости от погоды) и слова типа «Runway ahead» и «No entry». Вот узоры; возможно, это Франкфурт-на-Майне:

Когда рулёжка переходит в ВПП, от неё сначала остаётся только осевая, а потом она просто кончается. Типа, дальше уже надо разбегаться и взлетать. Или, если ты сел, то она вдруг начинается. Типа, давай сруливай с ВПП. Хитроу, Лондон:

Но самое красивое, что есть на аэродромах — это разметка автодорог, пересекающих самолётные места.

Есть дорожки, по которым ездят автобусы с пассажирами, заправщики, трапы, возилки чемоданов. Некоторые из них проходят в таких местах, где самолёты не ездят — там они размечены как обычные автодороги. А вот когда самолёты ездят, дороги обозначены красивейшими границами в виде полос в шахматном порядке. Причём смотрите, как шахматный порядок превращается в обычную линию там, где самолётов быть не может. Это Франкфурт-на-Майне:

Ну и на десерт ещё немного красоты: