Дизайн-система — это набор компонентов, сделанных по четким правилам, отраженные в виде кода в единой библиотеке. Не путайте дизайн систему с UI Kit. UI Kit это только одна из ее составляющих. По мимо кликабельных компонентов с открытым кодом в дизайн систему входит миссия и ценность компании, руководство по стилю, паттерны, ссылки на репозиторий и ресурсы.
Когда и зачем нужна дизайн система?
Прежде чем приступить к созданию дизайн системы, поймите, какую проблему вы хотите решить и какие ресурсы доступны для решения этой проблемы. Многие проблемы которые можно решить дизайн системой, могут быть решены более быстрыми и дешевыми инструментами. Возможно в вашей ситуации будет эффективнее нанять еще одного специалиста.
Если у вас небольшая команда или у вас мало продуктов для совместного использования компонентов, то скорее всего вам подойдет обычный UI Kit. И это нормально.
Дизайн-система это продукт компании, который не приносит прибыль. На его создание нужны время и ресурсы, которые можно было бы потратить на проектирование макетов без системы.
Потребность в дизайн-системе возникает, когда проект разрастается и над ним начинаю работать несколько дизайнеров или команд. Дизайн система экономит время на разработку продукта, ей можно пользоваться как конструктором, легче вносить обновления и легче масштабировать, унифицирует интерфейсы.
Для нас дизайнеров может быть очевидно, почему единая библиотека компонентов необходима, но вот бизнесу не всегда это может быть понятно.
Как аргумент можно взять обычную кнопку. На первый взгляд кажется, что это просто прямоугольник с подписью внутри, но по факту все сложнее. У этого прямоугольник есть отступы снаружи и внутри, есть цвет, есть скругления, есть различные состояния. Только у одного шрифта: гарнитура, начертание, кегль, кернинг, интерлиньяж, цвет. В итоге на разработку только одной кнопки потребуется n-ое количество времени. Если на проекте много дизайнеров, то количество рабочих часов придется помножить на кол-во дизайнеров. Дизайн система решает эту проблему. Все кнопки приводятся к единому стилю.
Но возможно, в вашей компании есть другие, более острые проблемы, которые может помочь решить дизайн система.
Из чего состоит дизайн система
Миссия и ценность компании
Миссия компании — это то ради чего существует компания, по мимо зарабатывания денег. Она формирует ценности, верования и принципы бизнеса, отражает предназначение компании, ее позиционирование (отличие от других участников рынка), определяет ту роль, которую компания хочет играть в обществе. В миссии так же описывают, что компания не будет делать.
Руководство по стилю (гайдлайн)
Цвет
Иконография
Сетки и лейаут
Анимация в интерфейсе. Анимация состоит из времени (плавность, смещение и задержка) и трансформации
Отступы
Темы
Типографика
Контент
Текст на сайте является основным источником взаимодействием с клиентом. Здесь вы указываете каким образом будет происходить коммуникация, как будут скомпонованы материалы. Правила построения заголовков и текстов, их длина, структура, сложность. Каким образом мы будем обращаться к пользователю на Вы или Ты. Как правильно сокращать слова, формировать буллеты, написание английских слов по русски. Правила в орфографии, синтаксисе, пунктуации.
Например «Используйте простые глаголы, стройте предложения краткими, простыми, дружелюбными. Избегайте длинных предложений, более 20 слов. Не используем слова без смысловой нагрузки. Текст должен быть строго упорядочен по важности и полезности для читателя».
Компоненты
Компоненты являются одним из ключевых блоков системы проектирования. Каждый компонент разработан и закодирован для решения конкретной проблемы пользовательского интерфейса. Все компоненты структурированы и приведены к общему виду для того чтобы работать гармонично совместно, как часть большого целого.
Компоненты нужны для того чтобы попробовать в живую и проверить работу всех элементов сайта. Вы больше не будете биться в догадках, есть ли у вас такой-то элемент или нет, вы сможете попробовать, поиграться и узнать возможности его использования в рамках вашей текущей задачи. Это очень важно иметь возможность увидеть все элементы, которые используются в проекте и знать все их особенности.
Ресурсы для дизайнеров и разработчиков
Библиотека контролов
Палитра цветов
Шаблоны экранов
Иконки для интерфейса
Продуктовые иконки
Плагины для Скетча
GitHub репозитории
Для меня это оптимальный набор того, что должно быть в дизайн системе. Строгих правил нет, какие пункты она должна содержать, скорее она формируется от задач для решения которых была создана.
