В ЧТ 29 октября в 19:00 мск — мастер‑класс Ильи Бирмана «Анимация в интерфейсе»

В четверг 29 октября в 19:00 мск Илья Бирман в прямом эфире покажет, как делать приятные и опрятные анимации в интерфейсе. Илья — арт‑директор бюро, автор книг и преподаватель дисциплины «Интерфейс и информация».

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

как анимация может делать продукты приятнее, а может — бесячее;

какие мелочи отличают аккуратную анимацию от неряшливой.

Мастер‑класс будет интересен всем, кто проектирует, учится или подумывает научиться проектировать интерфейсы.

● В конце подарки записавшимся
Промокод на курс «Пользовательский интерфейс» и куча бонусов к участию.

​
Запись на мастер‑класс

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

Вступить в чат трансляции

Обновление справочника за 20 октября 2026

Справочник обновился.

Во-первых, добавились подробные статьи «Выключатель» и «Слайдер» в виде большого совета на сайте бюро:
https://bureau.ru/soviet/20261020/

Во-вторых, появились ещё несколько терминов. В частности, разблокирована буква Э! Для тех, кому не нравились «Заусенцы» и «Пипка», теперь есть «Упячка». В паре мест добавились иллюстрации. Всё новое и дополненное разом показывает, если вписать в поиск заклинание «r02».

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

А ещё у справочника появился логотип:
https://ilyabirman.ru/reference/

Я ещё не вникал, что там за сокрушительная уязвимость нашлась в ПХП, но если у вас Эгея, помните, что последний бекап базы блога можно скачать вот так. Ну и папку всяких картинок с сервера можно забрать, если они у вас больше нигде не живут. Тогда если враг придёт портить вам сайт, у вас будет копия.

Недавно приложение ЧатаГПТ обновилось и утратило возможность перетаскивать чаты в удобном тебе порядке.

Открыть второе окно оно иногда даёт, а иногда не даёт — тупо пункта меню File → New Window иногда нет просто так.

Щас вот обновилось — у диктовки пропала горячая клавиша, только мышкой жми.

Разложить прототип на макеты

Когда-то рисовать макеты было легко, а делать прототипы — сложно, но постепенно все научились делать и прототипы.

Недавно я писал, что не люблю прототипы и хочу видеть макеты: прототипы скрывают внутреннюю логику, а при проектировании меня интересует именно она. Даже то, как разложены макеты по холсту, уже многое говорит о том, чем думал дизайнер:
https://ilyabirman.ru/meanwhile/all/designing-and-creating-explanations/

Сейчас благодаря нейросетям делать прототипы даже проще, чем рисовать макеты. Нейросеть просто выдаёт готовый кликабельный прототип; макетов в этом процессе в принципе не было и нет. Но что толку, что она его выдаёт? Как ты поймёшь, что там всё действительно по уму сделано?

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

С диктовкой всё смешнее и смешнее.

Вчера когда отвалилась горячая клавиша, я первым делом пошёл проверять в настройке горячих клавиш (такая есть в ЧатаГПТ), но там в списке просто нет такой команды как диктовка.

Сегодня читатель подсказывает, что это настраивается не в настройке горячих клавиш, а в настройке диктовки (логика). Я радостно иду туда, нахожу там Dictation shortcut, ставлю туда нужый мне шорткат, после чего появляется подпись Not supported.

У участника курса аккуратно нарисована форма, но всё-таки что-то мешает восприятию её структуры. Разбираемся, что это, и как можно исправить. 8 минут:
https://www.youtube.com/watch?v=T7HH1AB7eI4

Идёт запись на ноябрьский курс, сейчас −10%. В рассрочку это 7110 ₽ / мес.:
https://bureau.ru/courses/ui-online/

Это лучший курс об интерфейсе.

Временные режимы

Как вы, возможно, знаете, режимы в интерфейсе — это плохо. Но ещё хуже временные режимы. Такое часто встречается в бытовой технике и разных приборах.

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

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

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

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

Если избежать режимов в интерфейсе невозможно, хотя бы не используйте временные режимы. Если уж пользователь передумал настраивать телевизор или эквалайзер, пусть сам нажмёт «Закрыть».

Изначально опубликовано на английском языке в 2013 году:
https://ilyabirman.net/meanwhile/all/timed-modes/

Скинул студентам и сам с большой радостью перечитал старый замечательный совет Артёма о согласовании в дизайне:
https://bureau.ru/soviet/20170724/

Бирман не советует устраивать сюрпризы серьёзным лысым дядькам:
https://bureau.ru/soviet/20261027/?utm_source=tg-s-s-s261027-271026

Нумерной ад во «Вкусно и точке»

Оказалось, что если зайти во «Вкусно и точку», то тебе надо будет взять «локатор» — хрень с номером 83, чек с номером 74 и сесть за стол с номером 225.

Число номеров представляется мне избыточным.

Думаем дальше № 69 — «Мне уже надо на спичечный завод» с Викой Лисицыной

С Викой Лисицыной обсуждаем новые айфоны, дизайн с нейросетями и дизайн для инопланетян.

0:00 — Айфон 18 Про
5:53 — Айфон Дуо
15:58 — Беспомощность нейросетей в дизайне
26:19 — Важность дизайн-системы для нейродизайна и роль Фигмы как источника правды
30:20 — Пиксель-пёрфект не нужен. Заменяемая дизайн-система как заменяемый шрифт
37:46 — Верстать сложно
40:29 — Автоматизация дизайн-ревю и подсчёта знаков на плане
49:51 — Порядок в коде при вайбкодинге
55:07 — Дизайн для неграмотных пользователей в Пакистане
1:06:24 — «Рисёч» и исследования
1:09:46 — Как применить исследование, что картинки воспринимаются лучше фотографий
1:13:51 — Как Илья далёк от широких народных масс
1:20:01 — Про принцип «Без обучения»

Эпл · Ютюб · Я.Музыка · Спотифай · Мейв

Но лучше подписаться по РСС в подкастном приложении:
https://cloud.mave.digital/51724

Уже скоро: в 19:00 мск начнётся мастер‑класс Ильи Бирмана «Анимация в интерфейсе».

Вступить в чат трансляции

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

Коллеги по-быстрому вырезали кусочек из вчерашнего мастер-класса об анимациях. Перед тем, как я сел делать анимацию, я там решил прокомментировать текущие события, а именно как Сяоми пытался подделать Айфон Дуо, но не смог. Если вы не понимаете, в чём разница, посмотрите.

А также идёт запись на мой интерфейсный курс, который пройдёт с 7 ноября по 6 декабря. В рассрочку стоит 7900 ₽ / мес.:
https://bureau.ru/courses/ui-online/

Лучший курс. Лекция об анимациях там тоже есть.

Кассы должны пикать разными голосами

Все супермаркеты понаобзавелись автоматическими кассами. При сканировании товара, кассы пикают, давая полезную обратную связь.

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

Думаю, решить проблему можно было бы, настроив разные касса на разную высоту тона пикания. С первого товара ты услышишь, как пикает твоя касса, и соседские пики не будешь воспринимать как относящиеся к тебе.

Зову на курс недизайнеров

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

Ребята, которые говорили «только я не дизайнер», рисовали некрасиво, но по смыслу оно вполне могло было бы неплохо. И тогда я советовал освоить готовые компоненты и научиться основам вёрстки, чтобы собирать хорошие на вид интерфейсы.

На курсе, который на днях закончился, я заметил что с тотальным использованием нейросетей стало невозможно сказать, кто «дизайнер», а кто «нет». Один из самых продуманных и одновременно лучших на вид интерфейсов сделал участник, который никаким дизайном до этого вообще не занимался. Все люди — дизайнеры!

Вдохновившись этим примером, приглашаю на курс всех, кому интересно проектировать продукты с хорошими интерфейсами. Всё, мы дожили до момента, когда не важно, умеешь ли ты рисовать, знаешь ли Фотошоп или Фигму, умеешь ли компоненты настраивать. Главное — уметь думать.

И мой курс идеально подходит для этого времени, потому что я никогда и не учил рисованию, Фотошопу и Фигме. Но я как-то всегда чувствовал, что инструменты — это не главное, они всё время меняются. Нужно их знать, но с ними люди и без меня разберутся.

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

В общем, обязательно приходите все. Открыта запись на курс, который начнётся через неделю:
https://bureau.ru/courses/ui-online/

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