Дизайн-система: что это и почему она нужна в каждом современном проекте

Дизайн-система – это набор компонентов, которые отражают визуальную картину и ценности бренда. В статье рассматриваем основные виды, преимущества, недостатки и даем инструкцию, как создать system design с нуля.

Что такое дизайн-система

Согласно определению ирландского веб-дизайнера Джереми Кита, system design (дизайн системы) включает библиотеки шаблонов, руководства по стилю и другие визуальные компоненты продукта. Но это не просто набор объектов, это принципы их связи друг с другом. Система содержит правила и ограничения, по которым визуал воздействует на пользователя. 

System design обеспечивает единый стиль, согласованность объектов дизайна в продукт. Это делает бренд более узнаваемым и привлекательным для пользователей. Благодаря использованию готовых шаблонов, разработка становится быстрее и проще, что позволяет сфокусироваться на решении более сложных задач. Система упрощает коммуникацию между дизайнерами, разработчиками и другими участниками команды, потому что все они работают по одним стандартам.

Зачем она нужна

Основные задачи:

• Помогает оптимизировать работу команды на этапах исследования, дизайна и разработки. К примеру, подходит для банков, которые развивают несколько сервисов внутри единой экосистемы – ПО для инвестирования, официальный сайт, приложение для бизнеса.
• Формирует визуальный стиль продукта, отражает ценности бренда понятным для сотрудников и клиентов способом. 
• Обеспечивает автоматизацию процессов и экономию времени. Например, дизайнеры создают объемную библиотеку компонентов в графическом редакторе Figma, чтобы использовать их в требуемых макетах. Разработчики применяют ранее заготовленные компоненты из фреймворка.
• Позволяет автоматически применять правки одновременно в разных элементах. Это упрощает процесс доработки продукта.
• Обеспечивает консистентность – унификацию объектов визуала. Использование похожих функций помогает клиентам привыкнуть к дизайну и интуитивно им пользоваться.
• Разрабатывает четкие права для коммуникации элементов в IT-продукте. 
• Занимается улучшением UX.
• Увеличивает скорость прототипирования из готовых элементов и проверку гипотез.

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

Из чего она состоит

Дизайн-система включает три компонента:

• UI-кит. Визуальный язык, элементы, которые видны пользователю – цвета, шрифты, формы, иконки, изображения, анимация. Задача – передать атмосферу бренда. Например, чтобы сформировать уютное настроение, используют теплые тона.
• Фреймворк. Библиотека визуального языка, его код – плагины для анимации, метки для навигации. Чтобы не создавать с нуля уже готовые кнопки, а просто заменить цвет при необходимости, создают шаблоны – фреймворки, которые хранятся в централизованной библиотеке. 
• Гайдлайны. Правила, в соответствии с которыми используются объекты дизайна. Помогают ответить, где и для чего применяется конкретный элемент. Нужны, чтобы не прибегать к помощи дизайнера в простых задачах и обращаться напрямую к разработчику. В гайдлайнах прописывают принципы использования цветов, модульных сеток, отступы от текста, расположение заголовка.

Какие есть виды

• С открытым кодом. Любой бренд может применять материалы и адаптировать их для своих проектов – изменять цвета кнопок, шрифты, иконки. К примеру, Ant Design, Human Interface Guidelines, Material Design позволяют пользователям  не создавать дизайн-систему с нуля, а применять готовые решения. Начинающие специалисты могут найти готовые элементы в свободном доступе и подстроить их под нужды заказчика. 
• С закрытым кодом. Разрабатываются для конкретной фирмы или продукта. Материалы доступны только сотрудникам или частично открыты для отдельных лиц.

Плюсы и минусы

Как создать дизайн-систему с нуля

Разработка дизайн-систем строится по правилам атомарного дизайна, то есть наследуемости: начинается с простого, затем усложняется. Эта методика включает пять уровней проектирования объектов:

• Атомы. Мелкие компоненты, такие как кнопки, поле ввода текста, шрифты.
• Молекулы. Объединение нескольких простых элементов: заголовок и строка ввода, чекбокс, окно с уведомлением.
• Организмы. Конечные объекты – шапка сайта, карточка продукта.
• Шаблоны. Макеты страниц без контента, например, меню.
• Страницы. Страницы с контентом.

Пошаговая инструкция:

1. Определитесь с идеей. Отправной точкой может стать готовая дизайн-система, нуждающаяся в доработке.
2. Сформулируйте требования. Конкретизируйте проблему, которую нужно решить.
3. Подберите базовые элементы: цветовую палитру, шрифты, анимацию, звуки.
4. Соберите главные компоненты интерфейса. Создайте UI-дизайн. 
5. Спроектируйте комбинации элементов и эскизы.
6. Сформируйте список визуальных объектов с правилами их использования. Пропишите в гайдлайне, зачем нужен каждый элемент, как применять.
7. Передайте задачу команде программистов. Обсудите нюансы и следите за разработкой. 
8. Проведите тестирование, получите обратную связь и улучшите результат.

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

• Google. Использует имитацию физического мира и текстур, чтобы сделать дизайн знакомым и предсказуемым.
• Medium. Предлагает текстовый редактор, который упрощает и ускоряет процесс публикации. Вместо массы функций по оформлению бренд сужает выбор пользователей до семи основных возможностей.
• Dinosaur.Design. Яркие цвета, веселые изображения и непринужденные шрифты формируют беззаботное настроение. 
• Apple. Темные фотографии в высоком разрешении с практичным и сдержанным шрифтом задают серьезный тон и статусность. 
• Shopify. В основе лежит уверенность, надежность, эффективность.
• Atlassian. Упрощает работу в команде и вдохновляет на творчество.
• IBM. Предлагает уроки и методические материалы для пользователей.

Типичные ошибки и как их исправить

• Отсутствие четких требований. Необходимо полное понимание задач проекта, иначе программисты не смогут создать результативный продукт.
• Отсутствие надобности. Дизайн-система нужна для больших брендов. Для стартапа подойдет UI-кит. Излишние затраты не обоснованы.
• Невнимательность к безопасности системы. Разработайте меры защиты данных и пользователей, такие как аутентификация, авторизация, шифрование.
• Недостаточное тестирование. Соберите фокус-группу, чтобы выявить недочеты, найти несоответствия дизайна ценностям компании. 
• Отсутствие документации. Опишите архитектуру, интерфейсы, API, потоки данных и другие аспекты.

Главное, что нужно знать

1. Дизайн-система (system design) – это набор компонентов, которые отражают визуальную картину и ценности бренда. К ним относятся визуальный язык, библиотеки шаблонов, фреймворки и гайдлайны – руководства по оформлению продукта. Чаще применяется для крупных проектов с обширными интерфейсами и пользовательскими сценариями.
2. Среди основных задач – помогает оптимизировать работу команды на этапах исследования, дизайна и разработки, формирует визуальный стиль продукта, автоматизирует процессы, экономит время, позволяет автоматически применять правки в разных элементах системы, обеспечивает консистентность, увеличивает скорость прототипирования.
3. Среди плюсов – автоматизация, создание централизованной базы знаний, поддержка единого фирменного стиля, внимание к пользовательскому опыту. Среди минусов – дороговизна, необходимость регулярного обновления и совершенствования, плохая мобильность, ограничение креативности.
4. Чтобы создать дизайн-систему, определитесь с идеей, поставьте конкретную цель, подберите базовые элементы, такие как цвета, шрифты, анимация, звуки, разработайте UI-дизайн, спроектируйте комбинации элементов и эскизы, сформируйте список визуальных объектов с правилами их использования, передайте задачу команде программистов. 
5. Успешные дизайн-системы предлагают Google, Medium, Dinosaur.Design, Apple, Shopify, Atlassian, IBM.