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

- - - -

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

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

- - - -

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

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

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

И, внезапно, вот пример с 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 #вкусвилл

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

Ну а первый вариант с перекрытиями ТТ можно встретить в некоторых продуктах Гугл, например в веб версии GMail. Но по моим наблюдениям, в обновлениях и гугл отходит постепенно от этой практики.

- - - -
#дизайн #uxui

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

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

Вообще то, что ТГ в последнее время воюет в сторону прокачки рекомендательных систем, начинает пугать. Так и до общей ленты не далеко.

- - - -
#чтозадичь #дуроввернистену #раньшебылолучше #скайримдлянордов #нужно #больше #хештегов

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

Я не успел за выходные дописать душный длиннопост, поэтому держите мем 😁

- - - -

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

❗️Дисклеймер:
Речь пойдёт о модульных сетках именно в интерфейсе. В частности, в интерфейсе сервисов и продуктов, а также об их использовании в дизайн-системах. Возможно, если вы разрабатываете отдельный лендинг, модульные сетки всё ещё могут оказаться полезным инструментом для упорядочивания контента и ускорения работы с адаптивом.

***

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

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

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

А как тогда?

Перспективным и современным я считаю подход через контейнеры и компоненты.
Контейнеры могут управлять компоновкой контента внутри себя, в зависимости от типа устройства, а компоненты могут иметь разные шаблоны в зависимости от групп девайсов. А для верстки используются только простые принципы растяжения контента: заполнение, hug, hug+fill, fix+fill, деление на две\три равные колонки и т.п.

Такая система, на мой взгляд, более предсказуема и лучше сохраняет консистентность.

- - - -

#дизайн #uxui #дизайнсистемы #адаптив #вебдизайн

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