UX FLOW • Сергей Мухин
1.23K subscribers
162 photos
24 videos
2 files
157 links
Канал о UX/UI дизайне, проектировании дизайн систем, управлении дизайнерами и карьере дизайнера.

Автор канала: @Lacrua
Эксперт-дизайнер в Т-Банк, ex Арт-директор ВкусВилл

Ссылка для друзей: https://t.me/+od55shib9oQzNTNi

Доп. инфа на сайте
uxflow.ru
Download Telegram
Важнейший софт скил дизайнера

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

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

Например, в сообществе дизайнеров дизайн-систем часто звучит вопрос "Как убедить начальство в необходимости ДС?" Представьте, что ДС — это ваш продукт, а начальство (бизнес) — клиент. Сначала нужно найти его боли, а затем показать, как ваша система их решит. А также понимать, как она принесет ценность, сколько потребует ресурсов и какие специалисты нужны.

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

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

Эти мысли не покидают меня, пока я работаю над проектом SDUI. Моя работа — это не столько дизайн, сколько общение с людьми, подготовка документов, метрик и экономики проекта — основа любого успешного продукта.

- - - -
#дизайн #карьера #софтскилы

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥255
⛔️ ВАКАНСИЯ В АРХИВЕ

Ищем дизайнера продукта на сайт в команду Обед.ру (проект ВкусВилл) 🥑.

Что важно:
— От 3-х лет релевантного опыта (в FoodTech, RetailTech или EdTech)
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели😉)
— Классное портфолио


- - - -
#дизайн #вакансия #вкусвилл #обедру

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥64
Сегодня наткнулся на интересное исследование о продуктовых дизайнерах. Само исследование можно найти по ссылке — там много любопытных данных.

Меня зацепил один из тезисов:

На позицию Middle в продуктовом дизайне можно выйти в среднем через 1‑2 года работы, на позицию Senior или Teamlead – через 3 года работы в профессии.


Посчитаем... Через год-два — мидл. Это звучит реалистично. Но сеньор ещё через год? 😳

И это действительно встречается. Многие верят, что станут сеньорами за три года, и некоторые действительно занимают такую позицию за это время. Но, по моему опыту, дизайнер, который получил должность сеньора, далеко не всегда соответствует всем требованиям к этой роли.

Расстояние между джуном и сеньором это огромная пропасть. Потому разрабатывая грейды в ВкусВилл, я разделил мидлов на три уровня:
🔘М1 — только что вышел из джуна;
🔘М2 — полноценный мидл;
🔘М3 — почти сеньор.

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

Но почему М3 — это только почти сеньор? В моей концепции, сеньор — это лидер. Не с таким фокусом в административку, как у лида, но он должен обладать рядом важных качеств:

– разбирается не только в знакомых, но и в незнакомых задачах;

– несет ответственность не только за свою задачу, но и за все зависимости, в т.ч. влияние на архитектуру продукта;

– может превращать свой опыт в стандарты для других;

– не полагается только на референсы, а создает новые решения на основе накопленного опыта;

– не зависит от инструмента: будь то Figma, Sketch, Paint или даже лист миллиметровой бумаги и карандаш, он способен адаптироваться и выдавать качественное решение.

Есть еще масса качеств, но эти, пожалуй, основные, которые часто становятся точкой роста чтобы по-настоящему стать сеньором. Ну или у меня слишком драконовские стандарты😁

- - - -
#дизайн #карьера #сеньор #брюзжание

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28🥱1
***

Просто начните


Я не люблю коучинговые советы, но иначе не скажешь.

Часто вижу, как на начальном этапе создания дизайн-системы начинающие дизайнеры зацикливаются на мелочах. Как назвать цвета? Текстовые стили? Кнопки? Кажется, что малейшая ошибка приведет к тому, что потом все придется переделывать.

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

Назовите переменные логично, опираясь на здравый смысл. Если не уверены или не хватает опыта — берите готовое решение. Например, в ВкусВилл я использовал палитру, где все токены цветов в растяжках начинались с ref..., а в темах — с sys.... Я просто взял это из Material Design, не углублялся в вопросы "а почему они так сделали", оставил как есть. Позже, работая над SDUI, разобрался и понял, что префиксы мне не нужны, и в новой палитре сделал уже без них. Но в первую версию не возвращался — она и так прекрасно работает и по сей день.

Вывод: не тратьте время на незначительные детали. Если сомневаетесь или не хватает опыта — просто копируйте. Со временем разберетесь, что и зачем. Не стремитесь сделать идеально все мелочи с самого начала.

- - - -
#дизайн #дизайнсистемы #токены #UXUI

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
💯23🔥103
ВАКАНСИЯ

Ищем дизайнера продукта в платёжный путь 🥑.

Для чего нужно будет проектировать интерфейс:
🔘 Кассы самообслуживания
🔘 Кассы с кассиром
🔘 Киоски в кафе и весы

Что важно:
— От 2-х лет релевантного опыта (если был опыт в оффлайн-продуктах, будет плюсом);
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели😉)
— Классное портфолио

Откликаться и присылать ваше CV и портфолио можно напрямую Саше


🔎 Смотреть вакансию

- - - -
#дизайн #вакансия #вкусвилл #офлайнпродукт

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
Как чуть не получилось три дизайн-системы вместо одной

Чуть больше месяца назад я писал пост про то, что мы решили внедрять ДС в рамках работы над большой мега фичей, в рамках которой будет переписана существенная часть приложения. Но реальность оказалась чуть сложнее и комичнее. На самом деле это даже попахивает факапом, но что, рассказывать только об успехах что-ли?😁

Так вот, хоть я здесь рассказываю о передовых решениях SDUI и работе с токенами, в текущем мобильном приложении ВкусВилл до сих пор нет ни дизайн-системы, ни даже токенизации.😭

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

Сейчас для макетов текущего МП дизайнеры использовали UI Kit, который мы сделали "по-быстрому", чтобы чисто прожить с ним полгода-год. Мы не планировали его масштабировать, думая, что скоро перейдём на SDUI (как мы были наивны). Однако разработчики решили использовать этот "временный" Kit для создания компонентов. Когда об этом узнали дизайнеры, было уже поздно что-то менять — сделано уже существенное количество компонентов, необходимых для новой фичи, переделывать времени нет, пришлось доработать Kit до приемлемого уровня, добавив спецификации.


И вот у нас три параллельных истории:

— С одной стороны компоненты на основе "временного" UI Kit.

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

— А где-то в параллельной вселенной шёл своим чередом проект SDUI платформы.


У проекта SDUI сейчас не лучшие времена, стадия оценки эффективности и соответствия бизнес-требованиям по итогам MVP, и нет сейчас точных прогнозов, когда же уже наступит светлое будущее. И тут пришло элегантное решение: у нас уже есть реализованная дизайн-система в этом проекте, да ещё и с возможностью экспорта из Figma в код. Основные споры касаются технологий (например, необходимость учить фронтам Go и использование веб-сокетов вместо Rest API), но не самой дизайн-системы.

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

- - - -
#дизайнсистемы #вкусвилл #дизайн #uxui #sdui

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10😁7🤔3
Channel name was changed to «Мыслью по древу • UXFLOW • Сергей Мухин»
Зачем меняю аватарку канала (а ещё и название).

Вы, наверное, замечали, что адрес канала @uxflow (типа UX поток). Тут выяснилось, что и домен этот свободен. Ну а я и купил 😁

Из этого сформировалась своеобразная стратегия. В планах есть туда забабахать что-то, предположительно на тильде с дайджестом по самым интересным материалам, больше информации обо мне и через него приводить SEO и рекламный трафик. А канал развивать с точки зрения позиционирования чтобы он больше был связан с доменом и моим именем, личным брендом.

Вот... захотелось с вами поделиться планами.
Как вам, кстати, новая аватарка?😁
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26
Для тех, кто не помниn, какой была старая аватарка 😉
🔥13😁65
Модели состояний. Часть1: Hover & Press.

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

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

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

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

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

А я в следующей части расскажу о том, как работаю со свойством disabled.

- - - -
#дизайн #uxui #дизайнсистемы #длиннопост #состояния #figma

🛫Канал: UXFLOW • Сергей Мухин
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥137
Про идеальные формулы

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

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

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

Чтобы развлечься, предлагаю сыграть в игру: попробуйте угадать, какой это маркетплейс, если я уберу узнаваемые элементы.😁
Нет, я уверен, что опытные пользователи всё равно разберутся. Но так или иначе, видно, что дизайн становится всё более единообразным.


- - - -
#дизайн #uxui #маркетплейс #интерфейс #викторина

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
💯7😁3🔥2
UX FLOW • Сергей Мухин
Про идеальные формулы Когда-то я читал, что в последние годы шахматы перестали быть игрой стратегов. Мастерство шахматистов достигло уровня, где они просто запоминают все возможные комбинации и ходы. Так появились шахматы Фишера, где начальная расстановка…
* Пока пишется вторая часть (осталось совсем немного), небольшое дополнение.

Нужно ли отображать все состояния в вариантах компонента в Figma?


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

Часто вижу, как для каждой кнопки в Figma прорисовывают disabled, focus и другие состояния...

А вы часто используете все эти свойства в макетах? Если какого-то состояния нет в варианте, но есть в документации для разработчика и для дизайнера инструкция, как его получить, это, на мой взгляд, гораздо эффективнее. Посмотрите на обложке поста, как это выглядело у компонента в одной из моих дизайн-систем: в вариантах нет состояний, а способ получения disabled описан только в документации, с примером на инстансе компонента. За два года работы с этой системой ни разу не пожалели о таком подходе. Пару раз, когда мне или дизайнеру таки понадобился disabled в макете, мы добавляли его за 30 секунд, а поддерживать компоненты в библиотеке стало значительно проще.

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

- - - -
#дизайн #uxui #дизайнсистемы #состояния #figma

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
12
Короче, я сделал сайт (на самом деле ещё нет 😬)

Я уже делился планами сделать себе сайт. И вот, дело, наконец, сдвинулось! Выбрал для этого Тильду по нескольким причинам: её удобно оплатить из РФ, есть прямые интеграции с нужными сервисами, например, с Telegram-ботом для парсинга контента с канала.

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

Первый — оказывается, делать сайт для себя невероятно лень, и, садясь за работу, вдруг не знаешь, чего хочешь, какая будет структура, что главное (становишься типичным «заказчиком»).

Второй — если верстка не выходит в точности по макету, просто делаешь «как смотрится норм», а потом просто правишь в макете 👀

Короче, упражнение «Сверстай свой дизайн» до сих пор работает. Только теперь не на понимание, как лучше сделать макет, а чтобы лучше понять лень боль верстальщиков и заказчиков 😂

- - - -
#дизайн #сайт #боль

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
😁17🔥1👀1
UX FLOW • Сергей Мухин
Короче, я сделал сайт (на самом деле ещё нет 😬) Я уже делился планами сделать себе сайт. И вот, дело, наконец, сдвинулось! Выбрал для этого Тильду по нескольким причинам: её удобно оплатить из РФ, есть прямые интеграции с нужными сервисами, например, с Telegram…
Media is too big
VIEW IN TELEGRAM
В продолжение, вот пример неведомой фигни, особенно дизайнерам полезно.

Когда вроде бы всё понятно, что надо сделать, но у кода своё мнение. Хотел скруглить в шаблоне новостного блока все фоточки. Всё просто — скругляешь родительский контейнер и чтобы переполнение было content clip (overflow: hidden).

Но почему-то это каким-то образом влияет на размер элемента... Просидел, наверное, час, пытаясь понять, что не так, в итоге углы остались прямые🐱

Вот если за одно, тут есть знатоки тильды, подскажут, как это, блин, побороть😬

- - - -

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
🙈6
Про состояние фокус (focus)

Подходов к реализации focus существует множество: от полного следования нативному поведению до довольно экзотических методов. И вот недавно в одном комьюнити наткнулся на мнение: "А зачем рисовать отдельно состояние focus? Сделаем его таким же, как hover."

Не делайте так.😱

Расскажу, как я привык работать с фокусом и почему. Главное его назначение — удобство навигации с клавишей Tab, что особенно важно для слабовидящих пользователей. Конечно, Tab используют и вполне хорошо видящие, но они точно не будут против, если вы сделаете фокус чуть более заметным.

Вот и причина номер uno не оформлять его как hover 🤨.

Если перенести эту тему в дизайнерские абстракции, то бывают ситуации, где фокус пересекается с другими состояниями. Например, в нативе для поля ввода фокус — это момент, когда активен курсор. В моих дизайн-системах я разделяю фокус, полученный кликом мыши, и фокус, активируемый клавишей Tab.

Кроме того фокус может комбинироваться с другими свойствами, например, кнопка в фокусе может принять в это время и состояние hover или быть нажата.

Вот и причина номер duos не оформлять фокус как hover 🤨.

Как я это реализую? Ну конечно отдельным компонентом, как же ещё. Я называю его focus frame. Он активируется только через клавишу Tab, в него оборачиваются все элементы, которые могут быть в фокусе, и им передается состояние фокуса. Чаще всего визуально это оформлено как контур, достаточно контрастный и чуть толще обычных бордеров (2 - 3 px). Такой подход позволяет управлять оформлением из одного места, сохраняет консистентность и легко сочетается с другими состояниями компонентов.

Вот такой вот вышел фокус...

- - - -
#дизайн #uxui #дизайнсистемы #состояния #фокус

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21