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

Вот уже, наверное, на протяжении последних четырёх-пяти лет не утихает ажиотаж вокруг темы дизайн-токенов. И до сих пор дизайнеры спорят о том, что же следует считать собственно токенами. Ситуация дошла до того, что с появлением 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 #дизайнсистемы #адаптив #вебдизайн

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

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

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

Вдобавок прикрутил эти ваши модные Figma Variables. С их помощью, в теории, можно довольно быстро сделать базовый адаптив из одного брейкпоинта. Но кажется, переменные — не панацея, и макеты всё равно нужно будет править руками, переключая (или выключая) некоторые компоненты.

📱 Смотреть пример в Figma

Можно скопировать себе и изучить, как там всё работает.

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

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

Нравится выполнять тестовые? Мне тоже нет. А уж какие бывают "креативные" задания.

Как вы поняли, я считаю, что тестовые совершенно не работают.

И вот почему:

1️⃣ Отказы
Если тестовое является обязательным этапом отбора, работодатель может потерять потенциально подходящих кандидатов, которые не готовы тратить время на задание. Например, когда я последний раз менял место работы, за неделю у меня накопилось 12 тестовых заданий, и все они были обязательными для перехода на следующий этап. Кстати, ни одно из них я так и не выполнил. То есть эти компании "потеряли" меня как кандидата.

2️⃣Жульничество
Вы не видите сам процесс выполнения задания соискателем. А это открывает простор для разного рода махинаций. Я даже встречал наставников и менторов, специализирующихся на выполнении тестовых заданий вместе или вместо своих подопечных.

Особенно тупо тестовое работает на первом касания, когда задание дают сразу после отклика.

Будучи нанимающим директором, я уже давно отказался от тестовых заданий при поиске дизайнеров грейда мидл и выше. Если есть сомнения в навыках кандидата, я практикую так называемое техническое интервью. На нём мы моделируем более-менее реальную ситуацию, когда дизайнер, арт-директор и продакт накидывают идеи и концепты по проблемной фиче прямо во время звонка. Задачи тоже берём реальные: с болями пользователей, их потребностями, гипотезами, данными аналитики и исследований, реальными макетами прода. Интервьюер играет роли арт-директора и продакта, презентуя задачу, освещая проблемы, отвечая на вопросы и направляя соискателя.

И вот эта штука очень круто работает. Финальный макет с чистовым UI по итогу никто не требует, но то, как человек ориентируется, разбирает задачу, какие вопросы задаёт и к чему в итоге успевает прийти за час-полтора, даёт достаточно точное представление об уровне соискателя.

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

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

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

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


- - - -
#дизайн #карьера #найм #тестовоезадание

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

А ещё в макетах была отсылка.

- - - -

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

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

📱 Смотреть в Figma

- - - -
#дизайн #карьера #найм #вкусвилл

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

Недавно тестировали интересный концепт для дизайна системы на нашей SDUI платформе в Figma. Идея заключается в том, чтобы собрать на переменных второго уровня (component) такие вариативные элементы, как ячейки, разичные сложные панели и т.п., чтобы избежать создания сложных структур из вложенных компонентов с множеством вариантов. При этом сам компонент можно (и нужно) детачить, сохраняя «рецепт» ячейки и управляя им через коллекцию переменных. Эту сущность мы так и назвали — «рецепты».

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

- - - -
#дизайн #uxui #дизайнсистемы #variables #figma #переменные

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

Вот так это работает в фигме на примере рецепта ячейки и как из него сделать тизер продукта.


- - - -
#дизайн #uxui #дизайнсистемы #variables #figma #переменные

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

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

- - - -
#variables #figma #переменные #баги

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

Или как вам такое?)
Иконка скидывается на дефолтную при детаче... 😱
А всё из-за того, что одно из свойств привязано к булевой переменной. И это почему-то скидывает оверрайды.

- - - -
#variables #figma #переменные #баги

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

Про доступность интерфейсов

Ещё её называют инклюзивностью. В общем, насколько легко или возможно использовать интерфейс с теми или иными физическими ограничениями.

Таких ограничений масса: дальтонизм, слабое зрение. Даже перелом правой руки и необходимость тыкать в телефон непривычным образом или немота и глухота — тоже влияют на прохождение некоторых сценариев (например, позвонить или принять звонок).

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

Ну а эта история — про моё столкновение с доступностью во «ВкусВилл».

***

В компании есть обычай отправлять всех новых лидеров на обучение Beyond Taylor (система менеджмента, или даже философия работы в ВВ). Обучение представляет собой проект, который студенты проводят через все этапы подготовки, как стартап. Исследование рынка, проверка потребностей, болей клиента, построение гипотез и их проверка. И в конце получается готовый к переходу на этап MVP продукт.

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

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

Это перевернуло мой мир и в целом стало удивительным открытием для команды 😬

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

А вы работаете с доступностью ваших проектов?

- - - -
#вкусвилл #доступность #инклюзивность #доступныйдизайн #a11y #accessibility

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

Кто такой веб-дизайнер?

Недавно попросили сделать ревью программы одного курса в качестве эксперта. Его специализация называлась «Веб-дизайн». И меня это немного смутило. Дело в том, что когда только появился цифровой дизайн, веб-дизайнерами называли всех, кто создаёт что-то в интернете. Причём изначально в эту работу входил и код. То есть веб-дизайнер делал сайты "под ключ". Затем, при разделении ролей, этим словом стали называть дизайнера, который делает макет сайта и передаёт его верстальщику.

Но сейчас понятия настолько усложнились, что даже «верстальщик» уже никто не говорит, теперь они фронтендеры. Про дизайнеров всё чаще говорят UX/UI-дизайнер или дизайнер продукта.

Но тем не менее понятие «веб-дизайнер» ещё не вымерло полностью, и несмотря на то, что многие, судя по моим опросам, понимают под этим «мастера по лендосам», в отрасли единства нет. Встречал вакансии, где в требованиях был описан почти чистый UX/UI, в смысле проектирование веб-сервисов и т. д.

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

- - - -
#брюзжание #вебдизайн

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

Дайджест канала за январь-июль 2024

Каналу скоро пол года. Было много интересных постов, и мне вдруг подумалось сделать небольшую подборку постов по группам тем. Чтобы точно не пропустить самое интересное😉.


▶️ КАРЬЕРА

Оптимальный старт карьеры продуктового дизайнера — Основные ошибки начала пути и несколько советов.

Мой не оптимальный старт — как я начинал свою карьеру дизайнера.

Что такое релевантный опыт — почему не весь ваш опыт учитывается при найме.

База по собеседованиям — основные ошибки и советы по прохождению собеседований.


▶️ ДИЗАЙН-СИСТЕМЫ

Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков.

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

Семантическая палитра — слой токенов цвета с семантической привязкой.

Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ.

Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead"

Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС.

Что такое SDUI — Краткое описание понятия.

Дизайн-токены — что это, и зачем.

Рецепты компонентов — техника описания основных характеристик групп компонентов.



▶️ БРЮЗЖАНИЕ

Про менторство — моё отношение к этому и почему я не занимаюсь менторством.

Операторы figma — о чрезмерном фокусе дизайнеров на инструменте.

Для кого старается продуктовый дизайнер — цель работы дизайнера, и что такое эффективность дизайна.

Про тестовые задания — почему они не работают.

О красоте — как объяснить красоту, и можно ли её измерить.

О доступности интерфейса — мой опыт исследования доступности во ВкусВилл.

Кто такой веб-дизайнер — о пересекающихся понятиях в индустрии



▶️ ДИЗАЙН-ТОНКОСТИ

Оптическая компенсация — как с ней работать в интерфейсе

Почему UI иконка – это не картинка — о важности единства стиля иконок в интерфейсе и шрифта.

Про Touch target — как работать с облатсью нажтия в компонентах.

Почему модульные сетки устарели — моё виденье развития и актуальности использования модульных сеток в дизайне интерфейсов.
И пример адаптива на переменных в фигме.


▶️ СТАТЬИ И ВЫСТУПЛЕНИЯ

Описания работы механики наследуемых свойств в нашей SDUI платформе.
Часть 1 и Часть 2

Типографика во ВкусВилл — как я организовал работу с текстом в нашей диаайн-платформе.

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

Ответы на вопросы зрителей — видео ответов на вопросы из зала после выступления на Д-в.

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

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