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
Доброе утро! Начнем этот день с мудрости:
«Джун ступает осторожно, ища границы возможного, Мидл осмеливается войти внутрь, а Сеньор парит за пределами»

- - - - -

Канал: Мыслью по древу
😁9
#статья #платформаманго #SDUI

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

Ссылки на первую часть: vc.ru, дзен, медиум, телетайп

- - - - -

Канал: Мыслью по древу
🔥12
#технологии #дизайнсистемы

Бывают ли неатомарные дизайн-системы?

Сегодня в мире дизайна господствует атомарная концепция построения дизайн-систем по Фросту: токены → атомы → молекулы → организмы... планеты, галактики😁

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

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

А чем плох чисто атомарный подход? Зачем что-то придумывать новое? Вот здесь поправляйте, если что, но насколько я понимаю, суть атомарного дизайна заключается в том, что элементы того же уровня не должны содержать друг друга, тем более включать себя же. Например, если атом “кнопка” содержит атом “иконка”, то это уже будет не атом, а молекула "кнопка с иконкой". Да и сама кнопка не может содержать такую же кнопку внутри себя. Возможно странный пример, но попробуйте представить, что все элементы в вашем проекте организованы так же, как в Figma. Тогда что же представлял бы собой “frame” с точки зрения атомарности?

А как работает “виджетный” дизайн? Здесь каждый может подойти к его созданию по-своему. Как ни странно, все основано на виджетах! Далее термины, которые использую я сам при проектировании. Виджеты могут быть двух типов, назовём их открытые и закрытые. Закрытые виджеты принимают только параметры, а открытые могут принимать параметры и другие виджеты. Открытые виджеты, в свою очередь, могут работать как контейнеры или иметь специальные слоты. Окна, например, работают как контейнеры, которые способны вместить в себя любой набор виджетов. Списки могут принимать шаблоны типов элементов или даже другие списки (получая, таким образом, списки списков 🤯).

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

Такой подход, на мой взгляд, отлично сочетается с принципами SDUI, хотя где-то в проекте, возможно, и будет присутствовать атомарность "по Фросту". Если бы мне пришлось отвечать сейчас на вопрос “Is atomic design dead?”, я бы сказал, что в его нынешнем виде - да. Ведь в старых рамках многие уже начинают чувствовать себя тесно, искать альтернативы. Но полностью, вероятно, атомарность никуда не исчезнет. Однако, сегодня это уже не единственный путь, а лишь один из инструментов для решения конкретных задач.

- - - - -

Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
Не получается у меня что-то писать короткие посты... Так что завтра в следующем тоже будет много букв.

Ну а с другой стороны, название канала оправдывать-то надо😁

- - - - -

Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8😁2
UX FLOW • Сергей Мухин
#карьера Часть 1. Оптимальный старт. Тут очень много переменных... Возраст, стартовые ресурсы, бэкграунд... Я постараюсь сформулировать как вижу себе плюс минус общие паттерны, но призываю не брать референс в чистом виде на этом этапе и стараться натянуть…
#карьера

Мой совсем не оптимальный старт

Сегодня многие (в том числе и ваш покорный слуга), нет-нет да пытаются раздавать советы, как побыстрее и поэффективнее ворваться в IT и конечно же в дизайн, заработать первые сто-двести-триста тысяч (нужное подчеркнуть). Но те, на кого сейчас равняются молодые дизайнеры, шли к этому издалека. Мой первый коммерческий опыт я получил, к примеру, в 2007 году и прошло уже почти 17 лет 🙈.

Так каким же был старт тогда, во времена динозавров?

Свой путь я начал в колледже, обучаясь программированию. Менторов и курсов тогда ещё не было. Обучали там различным языкам программирования, однако мое сердце покорила одна платформа - перспективная, новая, будоражащая воображение - Flash🤩. Эх, что это была за штуковина… Кажется, даже сейчас, со всеми нашими технологиями, мы так и не достигли всех возможностей, которые были у Flash в те далекие годы. Только представьте, дизайн, анимация и код в одной среде... Но что-то меня унесло от темы...

И вот, еще не успев окончить колледж, на последнем курсе, я устроился «на практику» в рекламное агентство на должность веб-дизайнера. Это означало, что я занимался созданием сайтов, от дизайна до кодинга (причем и фронт и бэк), ведь тогда еще не было такого четкого разделения на роли, как сейчас. Но вскоре я начал заниматься и дизайном листовок, визиток и баннеров. А что? Раз уж слово «дизайнер» есть в названии должности, по мнению начальства, этого было достаточно. И в дальнейшем это определило мое направление развития на много лет вперед. Я поработал в разных дизайн-студиях, рисовал логотипы и макеты для разных видов печати, наружной рекламы, разрабатывал айдентику, занимался SMM. Прошел путь от джуниора до ведущего дизайнера.

На моих глазах появлялись новые роли и профессии. Первым в индустрию ворвались UX/UI-дизайнеры. Это стало хорошей возможностью вернуться к созданию сайтов, а затем и приложений. Вскоре появилась и роль продуктового дизайнера, в которой я себя тоже сразу решил попробовать. В то же время внутренний программист во мне все время стремился к оптимизации и систематизации. Я был уверен, что дизайн можно сделать более эффективным. Так я стал интересоваться интеграцией кода и дизайна и пришел к проектированию дизайн-систем. По пути успел освоить React и поработать в роли проджект-менеджера.

К чему это всё я... Зачастую дизайнеры, кто начинал очень давно, дают советы новичкам, опираясь на свой опыт. Например, я мог бы начать всем говорить: "Пиши код!". Ведь я писал, и вон каким стал! И ты пиши! Но я стараюсь так не делать, и смотреть на сегодняшнее состояние индустрии, когда даю советы. Сегодня нет времени на то, чтобы идти через программирование, проектный менеджмент, несколько лет графического дизайна, да и ждать, пока появятся новые роли, где это всё пригодится, не нужно. Конечно, опыт «динозавров дизайна» разносторонен и обширен, порой поражает воображение новичков. Но стоит ли сегодняшним джунам пытаться повторять их путь?😀

- - - - -

Канал: Мыслью по древу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13🤔2
#платформаманго #шрифт

Как мы выбирали шрифт для дизайн-системы ВкусВилл

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

- - - - -

Канал: Мыслью по древу
🔥9💯1
UX FLOW • Сергей Мухин
Photo
Тест на “текстовость”

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

Шрифт Epilogue я добавил из-за более гуманистической формы буквы "g". По остальным шрифтам видно, что сейчас всё же есть тренд на геометричность. Однако, если говорить о полной "текстовости", то разница верхних частей букв должна быть ещё больше.

- - - - -

Канал: Мыслью по древу
🔥9😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Косплей аватарки канала😁

(снято на выставке "Лаборатория цвета")

- - - - -

Канал: Мыслью по древу
🔥12
Дизайн-система не работает без дизайнеров

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

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

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

Буду тестировать видео вставки с разъяснением ключевых механик в более наглядной форме. Должно сработать🤞

- - - - -

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