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
#анонс #дизайнвыходные

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

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

Когда
Само мероприятие пройдет с 19 по 21 апреля. Я, скорее всего, буду выступать 19го в зале "Дизайн-центричность" у МТС, точного времени пока нет.

Организаторы обещали трансляцию и запись выступления, так что, скорее всего, это всё тоже появится на этом канале.

- - - - -

Канал: Мыслью по древу
🔥24
Уже в эту пятницу начнутся Дизайн-выходные.

19 апреля в 18:00 в зале "Дизайн-центричность" расскажу про наш подход к SDUI.
Трансляция будет по ссылке

- Зачем нужен SDUI (или BDUI): что это такое и какие возможности даёт.
- SDUI на рынке: кто ещё пытался и что получилось
- Проблемы, которые нам пришлось решить.
- Ключевые находки, которые позволили нам построить по-настоящему гибкую систему. Наследуемые свойства.
- Как это работает? Примеры, как мы меняем интерфейс только с помощью свойств.
- Чем нам не угодила Figma и что мы с этим сделали.
- Ради чего всё затевалось: возможности, которые мы рассчитываем получить


Увидимся на Д-в!
🔥23
Что делает спикер за несколько часов до выступления? Конечно переделывает презу😂

Хорошо, что была возможность протестить все на площадке. На светодиодном дисплее потерялись некоторые не контрастные элементы.

Еще одно напоминание о том, как важно думать, для какого устройства твой дизайн.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥214🙈3💯2
Спасибо всем, кто пришел офлайн и всем, кто смотрел трансляцию. Спасибо за крутые вопросы. Очень классная энергетика🤗

P.s. очень просили выложить презу. Уже загружается, прилетит сразу после этого сообщения.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34💯1
Сергей Мухин - SDUI (1).pdf
9.9 MB
Преза выступления на Д-в

Канал: Мыслью по древу
🔥32
Фигма наконец представила переменные для типографики, а я вам расскажу, как устроена типографика у нас. Спойлер: Figma переменных в ней пока нет, и вряд-ли будут 😁

Читать на VC

- - - -

Канал: Мыслью по древу
🔥9
UX FLOW • Сергей Мухин
Фигма наконец представила переменные для типографики, а я вам расскажу, как устроена типографика у нас. Спойлер: Figma переменных в ней пока нет, и вряд-ли будут 😁 Читать на VC - - - - Канал: Мыслью по древу
Ещё из забавного. Хотел этот пост сделать через телеграф (нативные лонгриды в телеге). Но в темной теме с ПК оно открывается вот так... Так что эксперимент провалился ещё до публикации.

- - - -

Канал: Мыслью по древу
🙈5
SDUI: как сделать дизайнера разработчиком не заставляя писать код

Запись моего выступления на "Дизайн-выходных" в Нижнем Новгороде.

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

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

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

🛫Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17
Media is too big
VIEW IN TELEGRAM
Ну и конечно бесценные вопросы зрителей, которые не попали в монтаж.

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

Канал: Мыслью по древу
🔥20
Заканчивайте начинать. Начинайте заканчивать.

Классная фраза. Услышал её от кого-то из коллег. Задумался вот о чём.

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

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

К чему я это.
Легко работать, когда есть вдохновение, когда работа(или проект) новая и интересная. Но это состояние неизменно сменяется рутиной, и так хочется бросить и начать что-то новое, чтобы снова почувствовать вдохновение. Но секрет успеха в том, чтобы взять себя в руки и закончить скучную часть работы.

- - - -

Канал: Мыслью по древу
💯19🔥7🤔1
Атомарность в дизайн-системе

Тут сразу хочется оговориться, что то, о чём я тут рассказывал до этого, про врапперы и прочие SDUI — это платформа.

Платформа ≠ Дизайн-система, по крайней мере, в терминах нашей команды.

А что такое тогда ДС?
В нашем случае это библиотека компонентов (пресетов) на базе технологии (платформы). И у этих пресетов есть своя собственная атомарность.

Как это работает по Фросту: атомы, молекулы, организмы… Думаю, многие видели, читали, знают такой подход. В теории круто, на практике — вопросы.

Вот кнопка — это атом или молекула? А иконка? А кнопка с иконкой?

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

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

💼 Simple
Компоненты только из платформенных виджетов (врапперы, айтемы, вот это всё).

💼Complex
Если в составе есть Simple пресеты.

💼Panels
Если в составе есть Simple и Complex пресеты, и вид+функциональность укладывается в понятие "функциональной панели".

💼Templates
Шаблоны сценариев.


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

Канал: Мыслью по древу
🔥111
UX FLOW • Сергей Мухин
Атомарность в дизайн-системе Тут сразу хочется оговориться, что то, о чём я тут рассказывал до этого, про врапперы и прочие SDUI — это платформа. Платформа ≠ Дизайн-система, по крайней мере, в терминах нашей команды. А что такое тогда ДС? В нашем случае…
А ещё компоненты могут быть «коробочными» (глобальными), то есть поставляются вместе с платформой.

Или локальными для продукта и локальными для определённой части продукта, даже локальными для экрана.

В общем, опять матрёшка, модульность и вот это всё.

- - - -

Канал: Мыслью по древу
🔥71
Года два-три назад в одной компании я руководил небольшой командой дизайнеров. Однажды мы созвонились с моим коллегой — лидером разработчиков, чтобы обсудить внутренний сервис, над которым работали. Прямо во время разговора у нас родилась идея фичи. Я тут же сделал макет, коллега сверстал и закодил его. Речь само собой о небольшой фиче, но главное – от идеи до реализации за 40 минут! Ради смеха мы решили оценить, сколько времени заняла бы эта работа, если бы мы делегировали её командам, а те бы взяли её в спринт, тестирование и вот это всё. Получилось около недели! 😬

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

Да, это пост о стиле лидерства 😁

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

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

А мой основной фокус теперь будет на проекте платформы и технологиях.👍

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

Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥215
База по собеседованиям

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

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

И так:

1. Организованность и планирование
Не опаздывайте и по возможности не переносите больше одного раза интервью. Позаботьтесь о качестве связи и изображении, если интервью проходит по видеосвязи, или о своём внешнем виде (и запахе), если встречаетесь в офисе. Казалось бы, ну очевидно же, но… как-то в одну из пятниц ко мне на интервью в Zoom один «сеньор» вышел прямо из бара, причём уже изрядно выпившим. Вот тут уже лучше было перенести😬

2. Подготовка
Заранее пробегитесь по своему опыту и составьте тезисный план, чтобы не «нукать» и не теряться «А откуда начать? А что вас интересует?». Если вас просто просят — расскажите про свой опыт, без уточнений, не плохо бы уже иметь базовую структуру повествования.

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

4. Кто вас слушает?
Важно подстраиваться под того, с кем вы разговариваете. Если вас интервьюирует HR, не нужно засыпать его терминами и непонятными ему нюансами. И наоборот, при собеседовании с диздиром нужно концентрироваться на ремесленных штуках, показать, что вы действительно классный специалист.

5. Техника S.T.A.R.
Есть такая категория вопросов — объектные. Это вопросы, которые смещают фокус как бы с интервьюируемого. Например: «Бывало ли, что продакт не согласен с вашим решением? Расскажите про такой случай». И вот тут подвох, так как вопрос как бы не про соискателя, тот может расслабиться и наговорить такого… и что в команде только он нормально работает, и что продакт – осёл и не понимает в дизайне, и вообще… На помощь приходит техника STAR. Вообще это целая методика ведения собеседований, и её очень любят на Западе. Сам я с ней познакомился, когда готовился к своему первому интервью на английском языке. Но даже в обычных интервью при ответе на вопросы формула может быть очень полезной. STAR — это акроним. Situation (ситуация), task (задача), action (действие), result (результат). Собственно, в этом и суть. Описывая любой конфликт или давая ответ на любой объектный вопрос, старайтесь описывать по вот этим четырём пунктам.

Возвращаемся к вопросу про «продакт не согласен с вашим дизайном», как бы мог выглядеть ответ:

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

Вот! И описан как бы конфликт, и выведено всё в конструктивное русло, без лишних оценочных вставок.

6. Обратная связь
Если вам отказали после интервью, всегда просите обратную связь. Её дают, мягко говоря, не все, но если всё-таки дают, вам это сильно поможет сделать выводы и исправить что-то в будущих собеседованиях.

Вот такая вышла «База». Надеюсь, получилось полезно😉

- - - -
#дизайн #карьера

Канал: UXFLOW • Сергей Мухин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥183
Оптическая компенсация формы в интерфейсе

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

Ну а я решил показать один из её вариантов в интерфейсе.

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

🛫Канал: UXFLOW • Сергей Мухин
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19💯31