Запись выступления на Дизайн-выходных в Казани:
«Дизайн-система как инструмент формирования мышления продуктового дизайнера»

Философия и подходы, с помощью которых дизайн-система может формировать определённый майндсет, поощрять и направлять ход мыслей дизайнера в нужную сторону.


📱 Смотреть на YouTube

📱 Смотреть в VK

- -
#дизайнвыходные #казань #выступление

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

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

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Ладно, сдаюсь, выложил ответы зрителей тоже на ютьюб 😁

📱 Смотреть тут

Чем отличается дизайн для SDUI (он же BDUI)?

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

Для начала важно сделать шаг назад и понять: на что именно влияет технология, и какие вообще бывают варианты реализации SDUI.

Ключевые области, которых касается внедрение безрелизности, — это бизнес-логика, вёрстка и автоматизация.

🌟Начнём с бизнес-логики.
Бизнес-логика в данном случае — это то, что управляет реакцией приложения на действия пользователя.
"Если пользователь нажимает на кнопку — показывается окно выбора..." — вот подобные штуки и есть бизнес-логика.

Она может быть реализована по-разному. Чаще всего встречаются три варианта (которые могут комбинироваться):

—Тонкий клиент. Вся бизнес-логика выполняется на сервере, а клиент получает только результат — изменения в контенте и вёрстке.

— Толстый клиент с управлением через actions. Здесь логика описывается в виде процедур или функций, часто — довольно атомарных и гибко настраиваемых. Контракт (обычно это JSON с вёрсткой) уже содержит вызовы этих функций. Например, в случае перехода достаточно указать в контракте саму функцию и её параметры (тип перехода, линк и т. д.).

— Толстый клиент с загружаемыми скриптами. В этом варианте бизнес-логика исполняется на клиенте, но поставляется с сервера в виде загружаемых скриптов — чаще всего на JS.

Как это влияет на работу дизайнера?

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

Такой способ мышления полезен не только в контексте SDUI — он помогает пересматривать сущности, улучшать сценарии и думать о интерфейсе как о системе.

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

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


- -
#sdui #bdui #бизнеслогика

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Чем отличается дизайн для SDUI (он же BDUI)?
продолжение

Бизнес-логику мы уже рассмотрели — теперь хочется перейти к другим двум ключевым аспектам SDUI: вёрстке и автоматизации.


🌟 Верстка

Здесь главное различие — гранулярность системы. То есть, насколько «мелко» можно управлять интерфейсом через контракт: какие сущности доступны и на каком уровне атомарности.

Возможны разные варианты:
— Виджетная архитектура с хранением вёрстки на клиенте
— Обращение к элементам дизайн-системы, также хранимым на клиенте
— Гибкий отрисовщик, построенный на примитивах, с распределённым хранением вёрстки (часть элементов на клиенте, часть, например компоновка и параметры декоратора, на сервере).

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

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

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

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

А ещё, помимо самой вёрстки, хочется сказать пару слов о верстальщике. Эта роль при переходе на SDUI меняется радикально.

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

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


🌟 Автоматизация

Здесь всё проще. Автоматизация бывает и вне SDUI, но именно переход к этой архитектуре обычно стимулирует её активное развитие.

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

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


- -
#sdui #bdui #верстка #автоматизация

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Завтра у меня первый рабочий день в роли «Эксперт-дизайнер команды дизайн-системы и DesignOps» в Т-Банке.

Буду помогать с внедрением SDUI в систему.

Собственно, это и есть та самая Big News. На самом деле, за этим решением стоит целая эпопея — и даже сложно понять, с чего начать рассказ: хочется поделиться многим.

Когда я начал искать новую работу в январе, был уверен, что благодаря нетворкингу закрою вопрос за два, ну максимум три-четыре месяца. Думал: потом напишу в канал пост на тему «Каково это — искать работу выше сеньора?», где по шагам распишу весь процесс.

А теперь ответ на этот вопрос укладывается в одно слово: ЖОПА.

Это слово отлично описывает и ситуацию на рынке, и то, как таяли надежды быстро найти проект.
Нет, старт был бодрый: я год активно вкладывался в нетворкинг — выступления, канал, статьи. Прямых контактов в индустрии было много. Первые резюме, отправленные через знакомых, быстро дали собеседования. Но… на этом всё и закончилось. Разве что попал на вечеринку Авито по итогу одного собеса 😬

Дальше начался обычный поиск: LinkedIn, hh.ru и прочее.
Казалось, рынок живой: вакансии есть, всё ок. Но постепенно пришло ощущение, что вакансии как бы есть, но их как бы нет. Автоотказы — это нормально, но когда их слишком много — это начинает напрягать. Собеседования либо в никуда, либо «фидбек»: «всё круто, но нет». Пошёл уже пятый месяц. Стало понятно: нужно менять стратегию.

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

Это сработало: получил оффер от студии INET — на позицию директора всего дизайн-департамента.

Честно — я очень благодарен ребятам. Наверное, они тогда просто спасли меня от карьеры курьера. Было непонятно, сколько ещё бы продлился мой поиск, а деньги начинали заканчиваться.
И задачи там были интересные: перестроить департамент, где помимо интерфейсных дизайнеров были графдизайнеры, арт-директора, моушн, брендинг, SMM. Отдельный вызов — погрузиться в студийную специфику, процессы, тендеры.

Но потом случились дизайн-выходные — и сообщение от команды Т-Банка.
Сначала всё выглядело как нетворкинг: «давай познакомимся». Поговорили про SDUI. А потом… последовало предложение, которое невозможно было игнорировать.

Я искренне благодарен студии INET за доверие и возможность. Но снова заняться дизайн-системами, да ещё и фактически продолжить проект внедрения SDUI, — это шанс, от которого сложно отказаться.

И вот, сижу жду курьера со служебным макбуком и предвкушаю много нового контента для канала 😁

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Пост‑наблюдение

Раньше было сложно найти сильного продуктового дизайнера: в портфолио — «сайтики» или графдизайн, а нужно было — метрики, UX, гипотезы и вот это всё.

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

И вот обратная проблема: сейчас почти у всех в кейсах акцент на проектировании, метриках, аналитике и исследованиях. А сам интерфейс (UI) зачастую базовый — хотя на самом деле запрос в первую очередь на сильный визуал.

Даже работа с дизайн-системами и UI Kit’ами встречается чаще, чем по-настоящему интересный с визуальной точки зрения сайт!

Кстати, студия всё ещё в поиске мастера креативного веб-дизайна.
Если это про вас — 🔎 откликайтесь
Или пишите сразу Максу — @shvahin

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Стал доступен для предзаказа перевод книги Дэна Молла «Дизайн в масштабе» — и я рассказываю о ней не просто так.
Я участвовал в переводе и редактуре текста, поэтому за качество формулировок и точность перевода могу поручиться лично.

Это книга для тех, кто берётся за непростую задачу — внедрение дизайн-системы в компании.
В центре внимания — не пиксели и UI, а люди, процессы, роли и ценности.
Как донести важность ДС до бизнеса, как найти союзников, как сделать систему по-настоящему полезной для продуктовых команд — на эти вопросы отвечает автор.

Книга уже доступна для предзаказа 🛒

А здесь, в статье, можно найти промокод на скидку в 30%. 🛍

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Почему я всё ещё работаю «на дядю»
(нерегулярная рубрика "Дед забыл выпить таблетки")

Сейчас модно говорить: «Делай своё, стань фаундером, уволься и забудь про найм», а работа в компании подаётся как временный этап.

Да и меня многие знакомые часто спрашивают: «А почему ты не откроешь свою студию, курсы или продукт (нужное подчеркнуть)?»

А я скажу наоборот: иногда оставаться в найме — это лучший выбор.

И тут я тоже, своего рода, учёный из афоризма:

«Учёный — это человек, который удовлетворяет собственное любопытство за счёт государства».

Только вместо государства — крупная компания, а вместо лаборатории — продукт с десятками команд.

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

Делать это в одиночку или своим маленьким стартапом — почти нереально. Придётся не только тащить реализацию, но и решать всё остальное: продажи, найм, юрвопросы, бесконечные риски. И сгореть быстрее, чем появится первый результат. А ещё нужно где-то взять на это всё капитал или привлечь инвестиции.

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

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

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Не люблю я молекулы

В своих дизайн-системах я стараюсь обходить каноничный нейминг по Фросту с «атомами», «молекулами», «организмами»…
Идея вложенности и иерархии мне нравится, но вот эти названия... 🤦‍♂️

Поэтому у меня чаще встречаются слова вроде: basics, simple items, complex items, widgets.
А слова «организм» и особенно «молекула» я не использую. Более того, когда их произносят другие — у меня слегка дёргается глаз.

Почему? Одно видео, лет 20 назад, навсегда сломало для меня слово «молекула».
Пришлось изрядно покопаться, чтобы найти именно с той самой озвучкой 🤌

Но я его нашёл 😁

⚠️ Осторожно: после просмотра слово «молекула» уже никогда не будет прежним.

- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru

Дайджест январь-август 2025

Давненько я не делал подборку.
Вот что было интересного за эти пол года.


ПОСТЫ:

🔺Материалы для самопроврки к «Испытанию купоном»

🔺Должен ли уметь рисовать дизайнер интерфейсов?

🔺Про портфолио продуктового дизайнера

🔺Как не надо делать библиоткеку иконок в фигме

🔺Про тестовые задания

🔺«А вы часто думаете о Римской Империи?» - утерянная технология Flash и её до сих пор не превзойденные уникальные возможности

🔺Редизайн своего же дизайна для сервиса загородного отдыха.

🔺Про обновления дизайна IOS 26 и Material Expressive

🔺Чем отличается дизайн для SDUI
[часть 1 | часть 2]

🔺Почему я работаю в компании а не открываю своё

🔺Концепт: Модификаторы токенов цвета


СТАТЬИ И ВИДЕО:

🔺Большая статья про SDUI платформу, которую я строил во ВкусВилл.

🔺 Пилотный выпуск «Привет, Сергей» - рассмотрели проблему нового компонента с точки зрения дизайна и кода, в конце получили работающее решение.

🔺Выступление на Дизайн-Выходных в Казани - «Дизайн-система как инструмент формирования мышления продуктового дизайнера» и ответы на вопросы из зала

🔺Большая статья «Я не дизайнер!» про моё принятие своего пути, вышла на проекте errarium


Что ещё я сделал за пол года:
🔺Ушёл из ВкусВилл
🔺Открыл консультации
🔺Бухал на вечеринке Авито
🔺Попал в Дайджест продуктового дизайна
🔺Поработал пару месяцев в студии и ушёл в Т-Банк (пост о том как я искал работу)
🔺Редачил книгу про дизайн-системы


- -

🛫 Канал: UXFLOW • Сергей Мухин
Сайт: uxflow.ru