***

Просто начните

Я не люблю коучинговые советы, но иначе не скажешь.

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

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

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

Вывод: не тратьте время на незначительные детали. Если сомневаетесь или не хватает опыта — просто копируйте. Со временем разберетесь, что и зачем. Не стремитесь сделать идеально все мелочи с самого начала.

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

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

ВАКАНСИЯ

Ищем дизайнера продукта в платёжный путь 🥑.

Для чего нужно будет проектировать интерфейс:
🔘 Кассы самообслуживания
🔘 Кассы с кассиром
🔘 Киоски в кафе и весы

Что важно:
— От 2-х лет релевантного опыта (если был опыт в оффлайн-продуктах, будет плюсом);
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели😉)
— Классное портфолио

Откликаться и присылать ваше CV и портфолио можно напрямую Саше


🔎 Смотреть вакансию

- - - -
#дизайн #вакансия #вкусвилл #офлайнпродукт

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

Как чуть не получилось три дизайн-системы вместо одной

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

Так вот, хоть я здесь рассказываю о передовых решениях SDUI и работе с токенами, в текущем мобильном приложении ВкусВилл до сих пор нет ни дизайн-системы, ни даже токенизации.😭

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

Сейчас для макетов текущего МП дизайнеры использовали UI Kit, который мы сделали "по-быстрому", чтобы чисто прожить с ним полгода-год. Мы не планировали его масштабировать, думая, что скоро перейдём на SDUI (как мы были наивны). Однако разработчики решили использовать этот "временный" Kit для создания компонентов. Когда об этом узнали дизайнеры, было уже поздно что-то менять — сделано уже существенное количество компонентов, необходимых для новой фичи, переделывать времени нет, пришлось доработать Kit до приемлемого уровня, добавив спецификации.


И вот у нас три параллельных истории:

— С одной стороны компоненты на основе "временного" UI Kit.

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

— А где-то в параллельной вселенной шёл своим чередом проект SDUI платформы.


У проекта SDUI сейчас не лучшие времена, стадия оценки эффективности и соответствия бизнес-требованиям по итогам MVP, и нет сейчас точных прогнозов, когда же уже наступит светлое будущее. И тут пришло элегантное решение: у нас уже есть реализованная дизайн-система в этом проекте, да ещё и с возможностью экспорта из Figma в код. Основные споры касаются технологий (например, необходимость учить фронтам Go и использование веб-сокетов вместо Rest API), но не самой дизайн-системы.

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

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

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

Зачем меняю аватарку канала (а ещё и название).

Вы, наверное, замечали, что адрес канала @uxflow (типа UX поток). Тут выяснилось, что и домен этот свободен. Ну а я и купил 😁

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

Вот... захотелось с вами поделиться планами.
Как вам, кстати, новая аватарка?😁

Про идеальные формулы

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

Похожее, кажется, происходит и в дизайне. Вместо экспериментов и рискованных решений всё как будто свелось к «идеальным формулам». Достаточно взглянуть на современные смартфоны или автомобили (особенно боком), чтобы заметить, как они стали практически идентичными. Лишь иногда кто-то осмеливается на эксперимент, создает продукт с авторским дизайном, проваливается в продажах (или изначально не ориентируется на массовый рынок) — и этим укрепляет остальных в вере в «проверенные решения».

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

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


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

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

* Пока пишется вторая часть (осталось совсем немного), небольшое дополнение.

Нужно ли отображать все состояния в вариантах компонента в Figma?

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

Часто вижу, как для каждой кнопки в Figma прорисовывают disabled, focus и другие состояния...

А вы часто используете все эти свойства в макетах? Если какого-то состояния нет в варианте, но есть в документации для разработчика и для дизайнера инструкция, как его получить, это, на мой взгляд, гораздо эффективнее. Посмотрите на обложке поста, как это выглядело у компонента в одной из моих дизайн-систем: в вариантах нет состояний, а способ получения disabled описан только в документации, с примером на инстансе компонента. За два года работы с этой системой ни разу не пожалели о таком подходе. Пару раз, когда мне или дизайнеру таки понадобился disabled в макете, мы добавляли его за 30 секунд, а поддерживать компоненты в библиотеке стало значительно проще.

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

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

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Что-то навеяло 😂

- - - -
#дизайн #мемы

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Короче, я сделал сайт (на самом деле ещё нет 😬)

Я уже делился планами сделать себе сайт. И вот, дело, наконец, сдвинулось! Выбрал для этого Тильду по нескольким причинам: её удобно оплатить из РФ, есть прямые интеграции с нужными сервисами, например, с Telegram-ботом для парсинга контента с канала.

Когда сам верстаешь свой же дизайн, открывается пара забавных инсайтов.

Первый — оказывается, делать сайт для себя невероятно лень, и, садясь за работу, вдруг не знаешь, чего хочешь, какая будет структура, что главное (становишься типичным «заказчиком»).

Второй — если верстка не выходит в точности по макету, просто делаешь «как смотрится норм», а потом просто правишь в макете 👀

Короче, упражнение «Сверстай свой дизайн» до сих пор работает. Только теперь не на понимание, как лучше сделать макет, а чтобы лучше понять лень боль верстальщиков и заказчиков 😂

- - - -
#дизайн #сайт #боль

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

В продолжение, вот пример неведомой фигни, особенно дизайнерам полезно.

Когда вроде бы всё понятно, что надо сделать, но у кода своё мнение. Хотел скруглить в шаблоне новостного блока все фоточки. Всё просто — скругляешь родительский контейнер и чтобы переполнение было content clip (overflow: hidden).

Но почему-то это каким-то образом влияет на размер элемента... Просидел, наверное, час, пытаясь понять, что не так, в итоге углы остались прямые🐱

Вот если за одно, тут есть знатоки тильды, подскажут, как это, блин, побороть😬

- - - -

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru