Мыслью по древу • UXFLOW • Сергей Мухин

Имеет место в дизайн-среде такое мнение, что художественное образование — обязательная база даже для UX/UI и продуктовых дизайнеров. Меня эта «база» обошла стороной: навыки самые примитивные, постановки руки нет, техники тоже. Долгое время из-за этого у меня был своего рода синдром самозванца — мол, какой же я дизайнер, если рисовать не умею? Правлильно, не настоящий! Но со временем я заметил, что мой дизайн работает лучше, чем у коллег с художественным образованием. В интерфейсном дизайне умение рисовать может быть не преимуществом, а даже препятствием. Дизайнер интерфейсов ближе к инженеру, чем к художнику. Важно понимать, как взаимодействуют элементы, как они влияют на пользовательский опыт и как система ощущается после реализации — а не просто рисовать красивые картинки. А вот если ставить художественные навыки во главу угла, легко сместить фокус на визуал и забыть о главном: как это всё будет работать. Да, понимание композиции, цвета, света и тени полезно, но рисовать от руки для этого не обязательно. Так же, как и для эффективного взаимодействия с разработчиками — совсем не нужно уметь писать код самому. Но вот что действительно меня в своё время прокачало — каллиграфия. Осознание того, как рисуется буква, как работает штрих и перо, углубляет понимание типографики. Но тут тоже важно не переборщить. Я сам когда-то увлёкся, извёл пару альбомов… и бросил, решил, что мне достаточно. 😁 Короче, всё это не ключевые хард-скиллы для продуктового или UX-дизайнера. Да, классно, если вы умеете рисовать. Но, на мой взгляд, это всего лишь второстепенный софт-скилл. А вы умеете рисовать? Помогало ли вам это в работе? Или, может наоборот, чувствовали, что вам не хватает этого навыка? - - - - 🛫Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

Ещё таких называют человек-википедия — когда огромное количество важной информации о работе процессов или проекта находится только в голове конкретного специалиста. Это может создавать иллюзию незаменимости: мол, без тебя всё развалится, ведь никто, кроме тебя, не знает, как тут всё устроено. Я такое называю «взять компанию в заложники», и на деле это плохой признак — свидетельство неумения организовать управление знаниями. В какой-то момент я осознанно начал работать над тем, чтобы не быть таким человеком-википедией. Одной из моих метрик успеха стало то, насколько легко я могу передать дела, если потребуется уйти из проекта или команды. Сейчас в моей голове остаётся только опыт и экспертиза — то, что почти невозможно полностью передать. А вся передача дел уместилась в пару страниц в Notion. Управление знаниями стало одним из ключевых процессов в моей работе во «ВкусВилл» с самого начала. Поэтому были написаны бесчисленные гайды, а ключевые операционные функции переданы лидеру продуктовых дизайнеров. Осталось зафиксировать лишь часть активностей, завязанных на мне, и описать стратегию — то, как я видел развитие ключевых направлений, включая ближайшие шаги. Я доволен. Нет стресса, всё прозрачно и понятно, нет страха что-то забыть или оставить команду без критически важной информации. - - - - 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

В последние дни я снова вернулся к работе над Китом в Figma. Ранее я показывал, как можно управлять свойствами через variables, даже после отвязки от библиотеки, и применял это в рецептах компонентов. А сейчас я пошёл дальше — вынес часть параметров из вариантов в modes и variables. Поймал себя на мысли, что теперь хочу Enterprise-тариф с почти бесконечным количеством модов, чтобы вынести в управление через переменные практически всё, что раньше было в вариантах. В теории это должно быть невероятно удобно: все параметры компонента видны в табличке, сразу понятна их связь с токенами. Блин, в такой системе я начинаю понимать, чем полезны токены компонента 😁. Конечно, такой душный подход подходит не всем. Но для меня, с моим складом мышления, табличное отображение параметров гораздо удобнее, чем визуальное управление через варианты частными пересечениями свойств компонента. Главное, чтобы не было ограничений на количество модов, а переменные можно было привязать ко всему. - - - - #дизайн #дизайнсистемы #figma #переменные 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Первый раз захотелось подрезать идею поста (отсюда). Читая оригинал, подумал, что моё бинго выглядело бы совсем иначе. Поэтому представляю вам свою версию бинго душного дизайнера. Делитесь в комментариях, что совпало у вас, и предлагайте, что ещё можно было бы добавить в это бинго! 😉 - - - - #дизайн #бинго #не_своровал_а_интерпритировал 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

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

Что такое абстракции, и зачем ими мыслить? Как это помогает делать масштабируемые дизайн-системы? Что такое модели состояний и рецепты компонентов? Рассказываю на мини вебинаре в сообществе ❤️ pinkman experience 🗓 Дата: 17 декабря 🔜 Время: 16:00 (мск) 🆓 Участие бесплатное 🔗 РЕГИСТРАЦИЯ ТУТ 🔗 - - - - #вебинар #pinkman #дизайнсистемы #анонс 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

И это не как назвать правильно токены, и не сколько нужно видов кнопок в системе, это: Сколько же стоит перекрасить кнопку в крупной компании? И опережая ваши догадки, ответ не 42... Давайте посчитаем на примере нашего процесса. 1. Дизайн Кажется, что час работы дизайнера с запасом покрывает задачу. Но не забываем про прототип: мы же в продуктовой компании! Это исследования, юзертесты... Час уходит на прототипирование, ещё 3–4 часа — на работу исследователя (разработка эксперимента, загрузка в Pathway, сбор данных). После этого дизайнеру нужно подготовить макеты для разработки. Итог: 6 часов работы. Со средней ставкой в 1500 ₽/час это 9000 ₽. 2. Разработка Допустим, цвет кнопки не управляется с бэкенда. Тогда в дело вступают iOS- и Android-разработчики (по часу работы каждого). Затем — тестировщики (по часу на каждую платформу). Если обнаружатся баги, это ещё по часу на исправление и проверку для каждой платформы. Итог: 8 часов работы. Со средней ставкой в 2000 ₽/час это 16 000 ₽. Общая сумма на данном этапе: 9000 + 16 000 = 25 000 ₽. А если кнопка сквозная, например "добавить в корзину"? Ну это совсем другой разговор. Привет, зависимости. 😬 Это из-за того, что кнопка используется в компонентах/экранах других команд. Во-первых, требуется участие архитектора. Это человек, который первым лишится премии или работы, если что-то сломается. Поэтому любое изменение с зависимостями проходит через него. Его ставка минимум 4000 ₽/час: час на включить компьютер, час на подготовку, час на изучение задачи, час на составление заключения. Дальше — сложнее. Кнопка может использоваться в компонентах и экранах пяти команд. Значит, затраты на разработку (16 000 ₽) умножаются на 5. Итого: — Разработка: 80 000 ₽ — Дизайн и исследования: 9000 ₽ — Архитектор: 16 000 ₽ Итоговая сумма: 105 000 ₽. Добавляем 30% на встречи, правки и риски, плюс ещё 10% на A/B тестирование. А чтобы оценить результаты тестирования, нужны данные, т.е. нужны логи... ещё 10%. А ещё забыли совсем про аналитиков😱 Эти ребята сначала должны описать все случаи использования кнопки и все компоненты, в которых она используется. Часов 4-6 со средней ставкой 1500 ₽. Окончательная сумма: около 170 000 ₽, чтобы просто перекрасить кнопку. Понятно, что подсчёты грубые. Но в реальности бывает очень похоже, а то и похлеще. Например, мы уже год пытаемся занести задачу перекрасить ценники в приложении, но постоянно проигрываем гонку приоритетов. Нет ресурсов. 😬 - - - - #деньги #перекраситькнопку #разработка #дизайнсистемы 🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru