Команда
Дизайн-система это сложная инженерная задача, но до сих пор встречаются крупные компании, которые пытаются сделать ее на коленке, чаще всего в свободное время, которого конечно же нет, ну или пытаются выделить один или несколько технических дней в неделю и верят, что получат хороший результат.
Это не так. При таком подходе проект не сможет развиваться, быть современным, технологичным и актуальным.
Дизайн-система это фулл-тайм. Это полноценный продукт с выделенной командой. Именно о ней мы и поговорим в этой главе.
Принципы команды
Команду дизайн-системы можно сравнить с локомотивом, который задает темп и тянет всех за собой. Чтобы стать таким локомотивом, комада должна быть хорошо настроена, замотивирована и умна.
Вы будете работать с большим количество задач, мнений, условий, ограничений и хочется меньше отвлекаться на какие-то вещи, которые вам, как руководителю команды, кажутся очевидными, понятными и авторитеными.
Кроме того, просто приятно и комфортно работать, когда вы с коллегами находитесь на одной волне: разделяете одинаковые ценности, меньше спорите и понимаете друг-друга с полуслова. Это идеальная история: долгая, сложная, но возможная.
Собрать идеальную команду непросто, тут много всего: процесс подбора, оценка компетенций, онбординг и даже везение. Но есть один аспект, который работает безотказно и помогает начать слаживание, даже если вы пропустили все этапы формирования команды.
Этот аспект, это принципы команды — они культивируют знания и профессионализм, настраивают на рабочий лад и помогают создать команду мечты.
Знания
В основе документа описание базовых настроек дизайнера дизайн-системы: кто он, что умеет, кого читал, за кем следит:Продуктовый дизайнер в Контуре
- Знает основы верстки HTML/CSS.
- Разбирается в устройстве генераторов статики: 11ty, Docusaurus.
- Умеет вайбкодить: сможет решить простую задачу, протестировать и зарелизить.
- Может написать SQL-запрос к базе.
- Может подготовить данные и настроить дашборд в DataLens.
- Прекрасно ориентируется в интерфейсах, контроллах и чужих документациях.
- Следит за развитием крупных дизайн-систем: taiga, vk, ant.
- Имеет личный проект или ведет блог.
- Читал:
- Джим Кемп. Сначала скажите «нет»
- Максим Ильяхов, Людмила Сарычева. Пиши, сокращай
- Генрих Альтшуллер. Найти идею
- Джеф Раскин. Новые направления в проектировании компьютерных систем
Продолжите этот список, ориентируясь на ваш опыт и на ваше видение профессионального дизайнера и идеального члена команды дизайн-системы.
Ценности
Это верхнеуровневая история, более абстрактная, но формирующая отношение дизайнера к делу. Кодекс бюрошника
Во главе ценностей конечно же пользователь:
- Наши пользователи, это наши коллеги, а мы любим коллег и проектируем для них приятный Developer Experience.
- Мы слышим коллег, спокойно реагируем на критику, фиксируем и разбираем замечания.
- Пользователь не всегда прав, он может плохо знать документацию, не разобраться в проблеме, быть на эмоциях. Помогаем ему с запросом, подсказываем и наставляем.
Уважаем членов своей команды и ценим их время:
- Приходим с решением, а не с проблемой.
- Не унижаем ребят из смежных команд, не виним их в бедах, багах и проблемах. Помните, мы делаем одно дело.
- Disagree and commit: после принятия решения, все следуют ему, даже если изначально были несогласны.
Профессионально делаем свою работу:
- Формулируем понимание задачи и ищем пользу
- Чья задача — тот и носится
- Не работаем без задачи в трекере
- Фиксируем договоренности. Не держим в голове, а выгружаем в задачу
- Помним, что интерфейс — зло
DoR
Все члены команды должны одинаково понимать критерии готовности задачи к передаче в разработку, для этого придумали скрамовский артефакт — Definition of Ready.
Зачем нужен
Все банально, он нужен, чтобы экономить деньги компании:
- Помогает убедиться в необходимости задачи, её полезности и важности для бизнеса.
- Гарантирует, что у команды есть вся необходимая информация до начала работы.
- Уменьшает риск блокеров и переделок в процессе разработки.
- Разработчики не тратят время на уточнения и ожидание недостающих данных.
- Позволяет точнее оценивать сроки выполнения задач.
- Вовлекает каждого участника в обсуждение задачи.
Когда нужен
DoR нужен всегда, но чем больше у вас уровней согласования, сложных интеграционных процессов, зависимости от смежных команд — тем он нужнее.
Что внутри
Исполнитель пишет понимание задачи (раз, два, три). Это подход, который помогает сформулировать суть задачи и её пользу. Может включать в себя ответы на вопросы:
- Что делаем?
- Для кого делаем?
- Почему сейчас?
- Зачем это пользователю?
- Как он сейчас решает эту проблему?
- Сколько людей будут этим пользоваться и как часто?
- Какие метрики бизнеса будут затронуты?
- Что будем считать показателем успеха внедрения?
- Какой срок реализации и что будет если его нарушить?
Задача прошла по чек-листу проектировщика, учтены и продуманы: Постановка задач по методике SMART
- Состояния: Enabled, Disabled, Hover, Focus, Active, Pressed
- Размеры
- Анимация
- Работа с помощью клавиатуры
- Кликабельные области элементов, если они больше видимых
- Маска
- Минимальные и максимальные значения
- Значение по умолчанию
- Плейсхолдер
- Тип поднимаемой клавиатуры
- Валидация и сообщения об ошибках
- Синтаксис элементов интерфейса
- Если вызывается справочник:
- Название
- Появление
- Отображение значений
- Выделение значений
- Выбор значений
- Сортировка
- Количество видимых пунктов списка
- Механизм поиска, если это автокомплит
- Загрузка справочника и подгрузка данных
- Ошибка при загрузке
- Справочник пуст
- Ничего не найдено
- Знаем как тянется дизайн и выглядит на мобильных устройствах.
- Доступность фичи для пользователей с ограниченными возможностями:
- Заполнение ARIA-атрибутов
- Стилизация фокуса
- Tabindex
- Управление фокусом
- Темная тема учтена
- Есть название компонента и список пропсов
- Продумана миграция компонента на другую платформу (например, веб → мобила)
- Результат соответствует принципам дизайна
- Задача согласована с лидами разработки и дизайна
Подготовлены критерии Definition of Done.
Проведена декомпозиция и оценка трудозатрат.
DoD
Все члены команды должны одинаково понимать критерии готовности задачи к релизу, для этого придумали скрамовский артефакт — Definition of Done.
Что внутри
Задача протестирована самостоятельно и соответствует требованиям
Код-ревью пройден
- Учтены все комментарии
- Нет конфликтов с другими PR
- CI/CD-пайплайн пройден
Дизайн-ревью пройден
Pull Requests связаны с задачами и согласованы
- на изменения репозитория с кодом
- на изменение библиотеки в Фигме
- на изменение репозитория с документацией
Описание компонента добавлено в Storybook
- Пропсы описаны
- Примеры использования добавлены
- Changelog обновлен
Тесты написаны
- Snapshot
- Юнит
- API
- a11y
Кроссплатформенное тестирование проведено
- Операционные системы: Windows 11, macOS Sonoma, Linux Ubuntu 23.10, iOS 17.4, Android 14
- Браузеры: Chrome 122.0.6261.69, Firefox 123.0.1, Safari 17.4, Edge 122.0.2365.92, Opera 108.0.5067.38
- Устройства: iPhone 16, Galaxy S24 Ultra
Производительность в норме: время загрузки, рендеринг, память
У всего этого может быть больше подробностей и регламентов, но вы уже знаете с чего начать.