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

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

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

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

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

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

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

Канал: Мыслью по древу

База по собеседованиям

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

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

И так:

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

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

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

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

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

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

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

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

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

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

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

Канал: UXFLOW • Сергей Мухин

Кстати, у нас в платформе это решено на уровне таблицы токенов.

- - - -

🛫Канал: Мыслью по древу

На тему компенсации вот ещё интересное решение в Материал. Компенсируют толщину контура иконки в зависимости от фона. У меня была идея в своё время, сделать подобное с текстом с помощью вариативных шрифтов. Но поддержка вариативных шрифтов не очень равномерная пока, особенно в мобилках.

- - - -

🛫Канал: Мыслью по древу

Что-то сегодня прям день оптической компенсации...
Так вот, ещё одно дополнение😅

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

И, внезапно, вот пример с Android в Telegram: кнопки расположены с компенсацией.😉

- - - -

🛫Канал: Мыслью по древу

О канале и об авторе 📌

Так как я благодаря багам ТГ (или своим кривым рукам) просрал первый приветственный пост, то лучше поздно чем никогда. Да?

Тем более знакомые эксперты по ведению Telegram-каналов говорят: «Как ты вообще живёшь без приветственного поста в закрепе!? 😱».
А экспертам надо доверять😁

***

Меня зовут Сергей Мухин.
Я Эксперт-дизайнер команды дизайн системы и DesignOps в Т-Банке 💳, ex Арт-директор онлайна во ВкусВилл 🛒.
Разрабатываю неведомую фигню SDUI-платформу и дизайн-систему на её основе. Рассказываю на канале о своей работе, идеях и проектах.

Помимо этого на канале много брюзжания, духоты, и разных моих умных (или нет) мыслей о дизайне и около него.

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

Я с радостью делюсь своим опытом в постах, и охотно отвечаю в комментариях.

Кстати о комментариях...
❗️Уважайте друг друга и ведите себя хорошо.

Приятного чтения😉

- - - -

🛫Канал: Мыслью по древу

Недавно столкнулись с необходимостью сравнить энергоэффективность SDUI и классического приложения.

Кто-то из коллег принес риск, мол пробовал какое-то из приложений Яндекса на сдуе, и оно довольно быстро высаживало батарею и нагревало телефон.

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

А вот что реально греется от SDUI, это комп... когда открываешь все эти врапперы в фигме.
🔥💻🔥

- - - -

🛫Канал: Мыслью по древу

Я стал довольно часто использовать в работе ИИ, но, внезапно, не про картинки типа midjourney, а Алису для написания текстов.

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

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

Сама конфа, кстати, ещё не скоро — осенью, но подать развернутый план нужно уже сейчас. Как только подтвердят моё участие (я надеюсь), обязательно расскажу подробнее😉

- - - -

🛫Канал: Мыслью по древу

SDUI компоненты...
Что же в них такого хитрого? Многие задаются этим вопросом.

Ну штош, настало время. Сейчас я научу вас делать в фигме особые SDUI-компоненты через 3... 2... 1...
Готовы?

Нужно выделить фрейм и нажать Ctrl+Alt+K (или ⌥ + ⌘ + K). Всё!

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

То, как специфически всё устроено у нас в платформе — это следствие только того, как у нас по особому крутятся шарики в голове при решении наших специфических задач. А не потомучто у нас SDUI😊
Это SDUI у нас потому, что наши задачи мы не смогли решить в традиционном приложении.

А вот как делаются компоненты для такой дизайн-системы, ориентированной на максимаьную управляемость интерфейса с бэка, как у нас, об этом я как-нибудь напишу отдельно.😉

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

🛫Канал: Мыслью по древу

Почему UI иконка — это не картинка

Отвлечёмся немного от мыслей об SDUI и поговорим о вечном.

Исторически UI-иконки произошли от иллюстраций через постепенное упрощение формы и стиля. Недавно я был на стриме, где команда одного сервиса рассказывала о свежем ребрендинге. Ребята гордились тем, что они связали контурные пиктограммы (в том числе в UI) по стилю с логотипом и иллюстрациями. При этом шрифт занял несколько обособленное положение и имел свои особенности, которые не передались иконкам.

Однако, существует противоположное мнение в индустрии, которое я разделяю. Иконки в интерфейсе сейчас больше похожи по функции не на графику, а на глифы, то есть текст. К тому же в UI чаще всего они соседствуют именно с буквами. Этот тренд хорошо виден по развитию подхода к иконкам в мобильных платформах. Шрифт SF Symbols, новые иконки от Material, которые имеют настройки веса (толщины) как у шрифта, и даже упакованы в вариативный шрифт.

Мне кажется, именно в этом направлении будет развиваться подход к UI-иконкам ближайшее время.

И недавно я как раз наткнулся на очень интересную статью о том, как согласовать по стилю и форме ваш шрифт и иконки.

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

🛫Канал: Мыслью по древу

Сколько ни делай удобную документацию, всё равно найдётся дизайнер, который её не читал😡

Вообще, кажется, этим дизайнеры очень сильно отличаются от разработчиков. Сначала залетают «на шару» и разбираются по ходу, а если уж упёрлись во что-то… нет, не читают доку, а идут спрашивать коллег😬

Сейчас как раз идёт первое столкновение продуктовых дизайнеров с платформой. В целом всё хорошо, но вот к чтению различных вспомогательных материалов придётся привыкать. Я, конечно, постарался сделать всё супер наглядно и понятно. Вся документация в Figma, разложена по местам, где лежат мастер-компоненты виджетов. Просто нажимай Go to main и увидишь документацию по нужному виджету… Но, кажется, серии вебинаров и видео не избежать😔

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

🛫Канал: Мыслью по древу

Дизайн-токены

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

Но давайте представим, что у вас есть продукт с веб-, iOS- и Android-частью, а также макеты в Figma. На каждой платформе есть свои переменные, которые могут различаться. Что из этого будет является дизайн-токеном?

А токен на самом деле — это инструмент синхронизации, который позволит привести все переменные к единому виду и связать их между платформами.

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

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

🛫Канал: Мыслью по древу

Про Touch target
(далее TT)

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

Смотрим на картинку.👀

1️⃣ Область нажатия больше фактического размера элемента в вёрстке. Это самый спорный паттерн. Его любят использовать в нагруженных интерфейсах, где нужно разместить 3–4 iconButton’а в ряд. В таком варианте области нажатия как бы пересекаются, что даёт не очень предсказуемое поведение. Это более-менее работает на ПК при наведении курсора, но лучше всё же не размещать элементы друг на друге.

2️⃣ Фактический размер элемента и TT совпадают. Самый стабильный и предсказуемый вариант. В своих проектах и системах я стараюсь придерживаться именно его. Но есть ещё интересный вариант.

3️⃣ Этот вариант можно назвать вариантом два с половиной. Когда TT равен фактическому размеру элемента в вёрстке, но видимая часть (подложка) меньше фактического размера. Это тоже будет нормально работать, позволяет делать компактный UI, когда нужна подложка, но при этом как можно меньше перекрывать фон (например, кнопки на фото).

Наверняка есть ещё варианты и ухищрения по работе с ТТ, если знаете, можете поделиться в комментах😉.

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

🛫Канал: Мыслью по древу

А вот тот самый кейс, после которого я решил написать пост. Проектировал тизер товара для SDUI версии приложения, и там крайне удачно вписался Вариант 3.

- - - -
#дизайн #uxui #вкусвилл

🛫Канал: Мыслью по древу