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

Буду помогать с внедрением SDUI в систему. Собственно, это и есть та самая Big News. На самом деле, за этим решением стоит целая эпопея — и даже сложно понять, с чего начать рассказ: хочется поделиться многим. Когда я начал искать новую работу в январе, был уверен, что благодаря нетворкингу закрою вопрос за два, ну максимум три-четыре месяца. Думал: потом напишу в канал пост на тему «Каково это — искать работу выше сеньора?», где по шагам распишу весь процесс. А теперь ответ на этот вопрос укладывается в одно слово: ЖОПА. Это слово отлично описывает и ситуацию на рынке, и то, как таяли надежды быстро найти проект. Нет, старт был бодрый: я год активно вкладывался в нетворкинг — выступления, канал, статьи. Прямых контактов в индустрии было много. Первые резюме, отправленные через знакомых, быстро дали собеседования. Но… на этом всё и закончилось. Разве что попал на вечеринку Авито по итогу одного собеса 😬 Дальше начался обычный поиск: LinkedIn, hh.ru и прочее. Казалось, рынок живой: вакансии есть, всё ок. Но постепенно пришло ощущение, что вакансии как бы есть, но их как бы нет. Автоотказы — это нормально, но когда их слишком много — это начинает напрягать. Собеседования либо в никуда, либо «фидбек»: «всё круто, но нет». Пошёл уже пятый месяц. Стало понятно: нужно менять стратегию. Я расширил круг — стал рассматривать не только позиции директоров, экспертов и лидов, но и просто сеньорские, не только продукт, но и студии. Понизил зарплатные ожидания. Это сработало: получил оффер от студии INET — на позицию директора всего дизайн-департамента. Честно — я очень благодарен ребятам. Наверное, они тогда просто спасли меня от карьеры курьера. Было непонятно, сколько ещё бы продлился мой поиск, а деньги начинали заканчиваться. И задачи там были интересные: перестроить департамент, где помимо интерфейсных дизайнеров были графдизайнеры, арт-директора, моушн, брендинг, SMM. Отдельный вызов — погрузиться в студийную специфику, процессы, тендеры. Но потом случились дизайн-выходные — и сообщение от команды Т-Банка. Сначала всё выглядело как нетворкинг: «давай познакомимся». Поговорили про SDUI. А потом… последовало предложение, которое невозможно было игнорировать. Я искренне благодарен студии INET за доверие и возможность. Но снова заняться дизайн-системами, да ещё и фактически продолжить проект внедрения SDUI, — это шанс, от которого сложно отказаться. И вот, сижу жду курьера со служебным макбуком и предвкушаю много нового контента для канала 😁 - - 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

продолжение Бизнес-логику мы уже рассмотрели — теперь хочется перейти к другим двум ключевым аспектам SDUI: вёрстке и автоматизации. 🌟 Верстка Здесь главное различие — гранулярность системы. То есть, насколько «мелко» можно управлять интерфейсом через контракт: какие сущности доступны и на каком уровне атомарности. Возможны разные варианты: — Виджетная архитектура с хранением вёрстки на клиенте — Обращение к элементам дизайн-системы, также хранимым на клиенте — Гибкий отрисовщик, построенный на примитивах, с распределённым хранением вёрстки (часть элементов на клиенте, часть, например компоновка и параметры декоратора, на сервере). В первых двух подходах на клиенте хранится конечный (или условно конечный) набор компонентов. А в случае с гибкой системой — платформа позволяет собирать виджеты и даже атомы (например, кнопку) из базовых примитивов. Это напрямую влияет на архитектуру и конфигурацию дизайн-системы. При виджетном подходе сервер может управлять только выбором виджетов, их параметрами и расположением. И для продуктового дизайнера приоритетом становится поиск безрелизного решения: как «выкрутиться» с текущим набором компонентов. Потому что это быстрее и дешевле. Только если нужного виджета или параметра нет, команда решается на доработку — а это уже означает выпуск новой версии и релиз в стор. В более гранулярных системах возможностей для безрелизных изменений больше, но и здесь есть ограничения: не всё можно сделать без обновления клиента. При этом именно такие фичи — с условием «без повышения версии» — часто оказываются самыми приоритетными. Кроме того, в системах любой гранулярности обычно используется многоуровневая система контейнеров со слотами, что тоже влияет на логику проектирования. А ещё, помимо самой вёрстки, хочется сказать пару слов о верстальщике. Эта роль при переходе на SDUI меняется радикально. Теперь макеты у дизайнера будет принимать бэкендер — потому что бизнес-логика теперь на сервере, да и верстка при некоторых подходах тоже. А может быть и другой сценарий: часть задач верстальщика уходит к дизайнеру, особенно если в системе уже есть автоматизация (о ней — чуть ниже). 🌟 Автоматизация Здесь всё проще. Автоматизация бывает и вне SDUI, но именно переход к этой архитектуре обычно стимулирует её активное развитие. От автоматической сборки виджетов и конвертации макетов в вёрстку — до внутренних инструментов, вроде линтера для дизайнеров, который проверяет макет на соответствие правилам. Работа с автоматикой может поначалу усложнить подготовку макетов — но в итоге снимает рутину, снижает количество ошибок и освобождает время для творческих задач. - - #sdui #bdui #верстка #автоматизация 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

Прежде чем SDUI снова ворвётся в мою работу и в контент на канале, хочется разобраться — чем вообще отличается процесс и технология дизайна в таком подходе. Для начала важно сделать шаг назад и понять: на что именно влияет технология, и какие вообще бывают варианты реализации SDUI. Ключевые области, которых касается внедрение безрелизности, — это бизнес-логика, вёрстка и автоматизация. 🌟Начнём с бизнес-логики. Бизнес-логика в данном случае — это то, что управляет реакцией приложения на действия пользователя. "Если пользователь нажимает на кнопку — показывается окно выбора..." — вот подобные штуки и есть бизнес-логика. Она может быть реализована по-разному. Чаще всего встречаются три варианта (которые могут комбинироваться): —Тонкий клиент. Вся бизнес-логика выполняется на сервере, а клиент получает только результат — изменения в контенте и вёрстке. — Толстый клиент с управлением через actions. Здесь логика описывается в виде процедур или функций, часто — довольно атомарных и гибко настраиваемых. Контракт (обычно это JSON с вёрсткой) уже содержит вызовы этих функций. Например, в случае перехода достаточно указать в контракте саму функцию и её параметры (тип перехода, линк и т. д.). — Толстый клиент с загружаемыми скриптами. В этом варианте бизнес-логика исполняется на клиенте, но поставляется с сервера в виде загружаемых скриптов — чаще всего на JS. Как это влияет на работу дизайнера? Во-первых — это влияет на мышление. Реализация через actions требует другого подхода к проектированию: всё начинает дробиться на действия, функции, состояния. Анимации переходов становятся частью логики, что подталкивает к систематизации, стандартизации и визуальному единообразию. Такой способ мышления полезен не только в контексте SDUI — он помогает пересматривать сущности, улучшать сценарии и думать о интерфейсе как о системе. Во-вторых — это вопрос планирования. В модели тонкого клиента отрисовка результата бизнес-логики происходит на фронте, на основе правил и механизмов дизайн-системы или дизайн-платформы. Обновление этих правил требует обновления самого клиента — то есть выкладки новой версии в стор. Поэтому так важно сразу продумать архитектуру, заложить гибкость в ключевые решения и сделать инструмент, который покрывает основные сценарии — без постоянного обновления сборки. - - #sdui #bdui #бизнеслогика 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

Случился неожиданный камбэк, а точнее — возвращение темы #SDUI на канал. Сейчас — финальная стадия переходного процесса. Но совсем скоро я сорву завесу недосказанности и расскажу вам эту эпичную историю 😁

В своём канале пишу только то, что сам бы читал с интересом. Без воды — только личный опыт, практика проектирования дизайн-систем, управление командами, найм дизайнеров и всё, с чем сталкиваюсь в профессии. На многие важные вопросы я уже ответил в постах: — CJM — это работа дизайнера? — Каким должно быть портфолио продуктового дизайнера? — Почему тестовые задания не работают? и Пример вайтборда во ВкусВилл — Что важно знать о собеседованиях? — Сколько стоит перекрасить кнопку? — То самое выступление на Д-в, как мы во ВкусВилл строили SDUI платформу 👉 Подписывайтесь 👈

Я уже писал о своём отношении к менторству и курсам, и оно не изменилось. Но в последнее время ко мне начали поступать настойчивые запросы на консультации — в том числе корпоративные. Судя по отзывам, удалось причинить ощутимую пользу. Поэтому теперь я официально консультирую. 😅 ЧЕМ МОГУ ПОМОЧЬ? ✅ Аудит процессов дизайна в отделе/компании: поиск узких мест, варианты решения. ✅ Аудит проекта: качество реализации, стандарты, технологические процессы. ✅ Разбор проблемы, брейншторм по вариантам решения (дизайн-менеджмент, продуктовый и UI-дизайн, проектирование дизайн-систем и т. д.). ✅ Формат «вопрос-ответ»: обсуждение накопившихся вопросов, в том числе с вашей командой. ✅ Дизайн-системы: можно обсудить процессы, конкретные решения или уже сформировавшуюся боль, поискать оптимальный вариант. Также можно обсудить и другие форматы, например сопровождение проекта, помощь при запуске или другой формат. ПОЧЕМУ Я? На моём сайте есть подробное описание опыта (а также кейсы и публикации): руководство командами разного масштаба, налаживание процессов, проектирование интерфейсов, дизайн-систем (включая кроссплатформенные, мультибрендовые и даже под SDUI-принцип). По всем вопросам пишите мне в личные сообщения. - - - - 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

ДАЙДЖЕСТ 2024 ГОДА Пытался выдавить из себя пост с итогами года, но получается натянуто и вымученно. Но закруглить как-то уходящий год хочется, и со спокойной душой уйти нарезать салатики. По этому давайте вместе вспомним, чего интересного и полезного было на канале в этом году в формате дайджеста. ▶️У МЕНЯ ПОЯВИЛСЯ САЙТ Пока там не так много эксклюзивного контента. Но, как минимум, там можно найти все статьи и выступления в одном месте, а также почитать про мой опыт в формате CV и полистать кейсы. ▶️ ВЫСТУПЛЕНИЯ Хотелось бы, чтобы было их больше. Зато, будет хорошая цель на следующий год 😉 Онлайн мини-вебинар на тему мышления абстракциями при проектирвоание дизайн-систем. Попытался рассказать, как мыслю я, почему важно выходить за рамки ограничений реального мира через абстракции и как это помогает масштабировать дизайн-системы, а ещё показал несколько примеров. То самое выступление на Дизайн-выходных про SDUI платформу, MVP которой мы построили во ВкусВилл. Очень нетривиальное решение сразу и многих проблем интеграции дизайна в разработку, и безрелизных изменений, и даже "собственная Фигма". А ещё было много крутых вопросов от зрителей. ▶️ СТАТЬИ Лонгрид в двух частях о том, что такое наследуемые свойства, зачем я их придумал, и как это помогает в SDUI подходе. Часть 1 и Часть 2 Типографика во ВкусВилл — как я организовал работу с текстом в нашей дизайн-платформе. ▶️ ИНТЕРЕСНЫЕ ПОСТЫ Ответ на важнейший вопрос всего ИТ — сколько стоит перекрасить кнопку Весь мой карьерный путь в дизайне. Кто такой дизайнер дизайн-систем Должен ли дизайнер делать CJM и портреты пользователей? Испытание купоном. Наше задание, которым мы тестировали соискателей в формате witeboard. Серия постов про работу с состояниями компонентов: — Состояние фокус, подходы и варианты реализации — Нужно ли отображать все состояния в вариантах? — Модели состояний. Как можно упростить работу с состояниями сделать их более консистентными. Пост о тенденции к унификации UI в крупных сервисах, а ещё ВИКТОРИНА: Угадай маркетплейс Почему не нужно продумывать всё детально "на берегу", а просто нужно начать делать. Как выбор имени токена может задержать вас на месяцы. Мои мысли про грейды, и как я выстраиваю грейды и роли в своей команде. Система слоёв при проектировании системы всплывающих окон. Много полезного по дизайн-системам: — Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков. — Инструменты генерации палитры — небольшой обзор средств по построению растяжек цветов и мой личный опыт. — Семантическая палитра — слой токенов цвета с семантической привязкой. — Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ. — Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead" — Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС. — Что такое SDUI — Краткое описание понятия. — Дизайн-токены — что это, и зачем. — Рецепты компонентов — техника описания основных характеристик групп компонентов. Так всего было много, что всё, кажется не поместится. В прошлом дайджесте за первые пол года можно найти ещё много интересного. 🎄🎄🎄 А я всех поздравляю с наступающим новым годом! 🥳 Всем в новом году взрывного роста, красивого UI, логичного и удобного UX, ну и не забывайте мыслить абстракциями! Ну а я обещаю в новом году попробовать писать посты чаще, чем это получается у меня в этом году... но это не точно😁 - - - - #дизайн #дайджест #итоги2024 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru