Кот-маламут
前往频道在 Telegram
Инстач Бо @malamuth Дизайн, винишко, самоед, Fiat 500 и прочие ноготочки Tutu Design System Lead, ex. Ozon, Alfa Bank 🇺🇦🇬🇪
显示更多448
订阅者
无数据24 小时
无数据7 天
无数据30 天
帖子存档
448
Подробнее про безобразно, но единообразно. Моя цель на этом этапе, чтобы все продуктовые ребята, как можно быстрее почувствовали позитивные изменения. Для этого будем параллельно идти по двум трекам:
1. Построим систему. У разрабов на всех платформах есть то или иное количество компонентов и других штук. Что-то есть в фигме. Если выровнять фигму и прод между собой, уже получим дизайн-систему. Неудобную, неоптимальную, страшненькую, но систему. А это уже снимет часть проблем в работе над фичами. Как выровнять максимально дёшево? Привести либу в фигме к тому, что есть у разрабов. А не наоборот. Да-да, мы будем плясать от разработки. Но не без оговорочек.
2. Поймём, как эту систему развивать. А вот тут мы уже обстоятельно и не спеша проработаем архитектуру дизайн-системы от потребностей дизайна.
Первый трек поможет оперативно снять симптомы, на втором мы победим причину.
Про оговорочки. Чтобы не было совсем грустно, перед тем, как сбивать фигму с продом, мы выровняемся по базовым токенам: определимся с антихрупкой матрицей цветов и типографики и организуем их доставку разрабам.
Гайд
Повторюсь, мой план в том, чтобы дизайнеры сами строили дизайн-систему под себя. Поэтому для работы над токенами я собрала рабочую группу из всех, кому интересно поковырять ДС. Но мы же не можем просто сесть рабочей группой и начать пилить эти токены. Надо было собрать гайд — опорные материалы и флоу для рабочей группы.
Пока я его собирала, словила интересный пивот. Сначала мне казалось, что не надо перегружать — пойдём от частного к общему. Уже звучит нелогично, да? Но мне показалось, что так правильно. Потому что, если сразу вывалить всё, кажется, можно отбить интерес у ребят или погрязнуть в холиварах.
Но флоу повествования от частного к общему как-то не клеился — постоянно хотелось перескочить на следующий уровень системы, чтобы продемонстрировать «чтобы что». В итоге, я пошла от логичного обратного: от того, какие вообще уровни абстракции предлагаю реализовать в дизайн-системе, и как они влияют на самый базовый — токены. Пока что кажется, что это правильно 🙂 Так это или нет, увидим, как обкатаем рабочую группу.
Вообще волнуюсь, потому что формат для меня очень непривычный.
Что ещё
Помимо роудмапа, зафиксировали метрики дизайн-системы. Тут пока никакого рокет сайнс — тупо CSI и покрытие продукта компонентами. К тому же, мы их пока не меряем 😄 Но это пока.
Ещё договорились о «процессе» пополнения библиотек компонентов. Всё супер тривиально: собираем канал на всех разрабов и дизов. Хочешь новый компонент — оповещаешь всех в канале и груммишь с командой и другими откликнувшимися. Фиксируешь требования, заводишь таску в общей джире чтобы всегда можно было понять, кто, что и когда. Делаем компонент, проверяем, добавляем в кит, закрываем задачу.
Пока намеренно не усложняю, потому что в принципе никакого подобия такого процесса не было. Сейчас надо добавить прозрачности, никого не отпугнув. Я хочу, чтобы киты пополнялись УЖЕ СЕЙЧАС. Да, до проработанной архитектуры, без пристального внимания к ТЗ и дизайн-ревью. Просто, чтобы остановить шквал кастома и начать ехать на каких-то общих штуках. А потом уже их причёсывать, апдейтить, деприкейтить…
Много общаюсь. Со всеми, это важно) У дизайнеров, например, вроде удалось снять опасения — рассказала про свою роль и роль команды (направлять и мэйнтейнить, а не делать работу за кого-то). Вроде, всё спокойно.
В среду стартуем с рабочей группой, на следующей неделе планирую начать работу над source of truth для токенов 🔥
448
Тут такое дело, я уже чуть больше месяца работаю в tutu 🤨 Пока ещё параллельно докатываю делишки в Озоне, но скоро полностью передам дела. Хотелось ещё раз собрать дизайн-систему и провести работу над ошибками. В tutu это интересно и удобно — компания небольшая, можно быстро делать, проверять и корректировать.
Собственно, почему я об этом пишу. Потому что ещё мне захотелось вести своего рода бортовой журнал) Пилишь продукт и ритмично фиксируешь, что делал, что получилось, что нет. Крутой формат. Так что теперь буду регулярно делиться такими историями. Сегодня кусочек про итоги первого месяца.
Немного контекста про tutu — это относительно небольшая и очень свободная по духу компания. Реально, я каждый день кайфую от атмосферы — да, хаос, но природа хаоса в том, что все пытаются улучшить всё, до чего могут дотянуться, без формальностей. Как следствие, кто в лес, кто по дрова, но от всей души 🙂 К дизайн-системе подступались несколько раз, не вышло. И у ребят есть скепсис относительно этой очередной попытки. Так что задача вкусная: понять, как тут строить, чтобы таки достроить, а ещё по дороге не убить это ощущение свободы.
Исследование
Спойлер: мы будем строить дизайн-систему от того, что уже есть в коде
Онбординг плавно перешёл в дискавери — знакомишься с ребятами и по ходу выясняешь, что, как устроено, что хорошо, что болит. Ну и, конечно, опросики. Причём мне понравился сам собой родившийся «перекрёстный» формат — у меня было три формы (отдельно для дизов, вебов и мобильщиков), но вопросы идентичные, отличался только POV. То есть, дизайнера я спрашиваю, на какие штуки он проверяет макет перед передачей в разработку, а разраба — каких штук чаще всего не хватает в макетах. Или, какие проблемы у тебя бывают с разрабами? А у тебя с дизайнерами?
Скажу несимпатичную вещь, но такие опросы больше для того, чтобы заложить первый кирпичик доверия. Прям каких-то сногсшибательных инсайтов ожидаемо не было. Да, появилась фактура и конкретика, я вычислила, кто готов коммитить в ДС. Но, в первую очередь, эта активность была для айс-брейкинга. Мобильщики, например, обалдели от того, что у них дизайнеры в принципе спрашивают чо как.
План-капкан
Когда раскатываешь дизайн-систему, начинается очень болезненный этап адопшна. Пользователей вынуждают работать по-новому, а это всегда 😬 А ещё есть избитая фраза, что «дизайн-система — тоже продукт». Всё так, но есть одно но: любой внутренний продукт, в отличии от продукта на внешнюю аудиторию, можно навязать регламентами и процессами. То есть, да, конечно, можно собирать обратку и улучшать что-то, но когда в компании в принципе есть требование делать всё на какой-то технологии — это уже другое, потому что эта технология существует вне конкуренции. Хорошая она, или не очень.
Я задалась вопросом, а что если попробовать избавиться от этого вязкого и болезненного этапа адопшна в принципе? Как сделать так, чтобы он был не нужен? Чтобы внутренний продукт не навязывался, а привлекал пользователей естественным продуктовым путём? Чтобы пользователи говорили: я пользуюсь дизайн-системой, потому что так кайфовее.
И у меня появилась гипотеза, что если ДС построят сами дизайнеры, адопшн пройдёт незаметно для всех на этапе проектирования. А моя задача в том, чтобы направлять: определять что и когда делаем, организовывать, давать вводные, подсвечивать риски, предлагать варианты, подталкивать дизайнеров и разработчиков к общению друг с другом 🫶 Но остальное сами.
Эти рассуждения вылились в верхнеуровневый роудмап с такими вехами:
- Безобразно, но единообразно (© Шу). Киты в дизайне и коде становятся дизайн-системой, без кардинальных изменений в UI. Понимаем, как развивать эту систему дальше
- Единообразно и удобно. Рефакторим и пополняем компонентную базу, всё ещё без кардинальных изменений в UI
- Удобно и прекрасно. Дизайн-система становится красивой, автоматизируем процессы, дорабатываем инструменты
Сегодня такое очень общее введение, а завтра расскажу поподробнее про первую веху и ещё кое-что 👍
448
Уфффф, отвыступалась, скидываю ссылочки на полезные материалы по теме:
⁃ Доклады Саши Свиридова и Лёши Новикова о виджетной архитектуре в Ozon
⁃ Моё видео о том, что такое врапперы и пресеты
Ещё очень советую почитать статью Ани Саботович из Альфа-Банка про реализацию SDUI для непредсказуемых форм
И ещё раз скажу @golden_oar самое огроменнейшее спасибо за самую лучшую и заботливую организацию митапа, Женя, ты топ 🔥
448
🚨 17 февраля у нас митап про дизайн-системы! 🚨
Я буду снова плакаться про Server Driven UI, Витя покажет красоту оптимизации в фигме, а Женя по-разрабски почеленджит макеты. Короче, очень рада, очень волнуюсь, приходите/подключайтесь 🔥
448
Подвожу обновлённый враппер 👏 Пока неотточенный рассказ о токенизации вёрстки в мобайле, немножко об SDUI (точно хочу развивать тему) и никакой фигмы
448
Записали с Шу на коленке про те первые наивные пакеты с пакетами ©. Да-да, повторяемся, и осознанно — на днях будет видос про возмужавшие врапперы и пресеты, к которым пришли в Ozon 🥹 Там SDUI и другие взрослые проблемы, но для контекста нужно вспомнить с каких простых идей подход начинался.
ЗЫ так давно не писала сюда, что аж нервничаю 😓
