Создание дизайн-системы помогло мне спроектировать 3 сложных продукта с нуля для 2 платформ за 4 месяца и передать поддержку продукта другому дизайнеру. Когда я пришёл в WeavePay, вид и UX главного продукта компании был довольно старомодным, и он был доступен только в десктопных браузерах.
Первое, что я сделал – создал дизайн-систему, которую можно было одинаково эффективно использовать и на десктопе, и на мобильных устройствах. Поначалу мои новые элементы интерфейса выглядели похожими на технический чертёж (визуальный стиль я планировал доработать позже), но владелец продукта сказал, что это именно то, что нужно – так называемый «швейцарский стиль», созвучный духу компании.
Два ключевых принципа, на которых я строю свою дизайн-систему, – это интерактивность и иерархия, отражающая категории сущностей.
Интерактивность означает, что все варианты компонентов связаны через настройки прототипа в Figma, так что любой макет в любой момент можно запустить в режиме прототипа. Можно увидеть, например, как чекбоксы реагируют на наведение мыши и как пользователь ставит галочку. Таким образом макеты автоматически становятся интерактивными без дополнительных затрат, напоминая реальный продукт – в них нет «мёртвых зон». Даже курсор в поле ввода мигает. Ощущение живого продукта очень важно во время пользовательского тестирования.
Иерархия по категориям означает, что мы докапываемся до истоков состояний, процессов и данных, из которых складывается элемент интерфейса. Я написал об этом отдельный туториал, потому что многие дизайнеры не умеют мыслить категориями. Например, изображение иконки и статус иконки – это разные категории на разных уровнях иерархии, даже если статус визуально выражается через изменение изображения (цвет, форма, размер). Правильно выстроенная иерархия упрощает и саму дизайн-систему, и её реализацию в коде. Некоторые дизайнеры считают, что не стоит тратить время на продумывание всего этого и нужно просто рисовать элементы UI. Однако если у дизайнера развито системное мышление, эта работа даётся ему легко, естественно и быстро, и в долгосрочной перспективе дизайнер экономит время.
Выстраивая иерархию внутри дизайн-системы, даже текстовые блоки я рассматривал как отдельные сущности со своими атрибутами – например, с размерами отступов. Отступы также встроены в другие компоненты, такие как поля ввода. Это позволяет верстать экраны с нулевым расстоянием между элементами, тем самым устраняя неконсистентность. Я написал об этом отдельную статью.
Разумеется, в рамках дизайн-системы я создал цветовые токены, типографические стили и так далее. Подробнее о работе со шрифтами и переменными я расскажу в статье про дизайн-систему InvestEngine.
У разработчиков не возникло никаких сложностей с воплощением моей дизайн-системы в коде, они справились за несколько дней, и ничего не пришлось переделывать.
Что говорят люди
