Недавно столкнулись с необходимостью сравнить энергоэффективность 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 #дизайнсистемы #адаптив #вебдизайн

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

В закромах не нашел нормально работающего примера в 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 #переменные #баги

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