Дизайн-система — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих. В английском языке для обозначения дизайн-систем чаще всего используют понятие «design language», определяя также его главное отличие от дизайн-системы — возможность использования вне сферы цифровых продуктов. Одним из примеров такого «визуального языка» может служить узнаваемое оформление автомобилей компании BMW (фары, решетка радиатора). Визуальный язык определяет базовые основы создания продуктов и решений.
Сегодня в качестве основных составляющих дизайн-системы специалисты выделяют:
Гайдлайны и руководство по стилю Фреймворки UI-киты, шаблоны Наборы UX-паттернов Библиотеки готовых компонентов Документацию, правила, рекомендации Многие современные дизайн-системы используют дизайн-токены (design tokens) — наборы переменных, определяющих цвета, типографику, отступы, размеры и другие параметры интерфейса. Такой подход позволяет обеспечивать визуальную согласованность продуктов на различных платформах и упрощает поддержку интерфейсов при масштабировании цифровых сервисов.
Задачи дизайн-системы Систематизация дизайна призвана через создание взаимосвязанных базовых элементов прийти к единому полю взаимосвязанных продуктов и решений. Другими словами, дизайн-системы помогают создать удобную экосистему продуктов, которая будет понятна разработчикам и пользователям.
Принципиально важным является разница между библиотекой готовых элементов и дизайн-системой, последнюю отличает исключительная детальная проработка всех нюансов. Ярким примером большой продуманной дизайн-системы является Design Language компании IBM, описавшей все возможные варианты развития ее концепции в цифровых продуктах и представившей сообществу философию системы. IBM фиксирует особую роль дизайн-системы в структуре взаимоотношений «пользователь-продукт», «клиент-компания», «разработчик-продукт», «сотрудник-компания».
Использование дизайн-систем дает ряд определенных преимуществ:
Стандартизация решений Независимость проектов от состава команды Упрощение передачи продукта по стадиям «исследование — дизайн — разработка» Снижение затрат на поддержку, развитие и запуск продуктов
Истоки появления дизайн-систем Основы стандартизации дизайна стали появляться вместе с развитием «швейцарского стиля», оформившегося в 1927 году благодаря Яну Чихольду. Чихольд ввел в обиход не только ключевые понятия простоты, лаконичности и легкости восприятия, но и четко обозначил границы допустимости использования отдельных элементов в графическом дизайне. Также заслугой дизайнера является внедрение модульной сетки — системы, активно используемой в веб-разработке, полиграфии и создании элементов дизайн-систем.
Первые подходы к созданию дизайн-систем появились в 60-е годы прошлого века, когда в программировании стала применяться модульная система. Идея модульности развивалась с конца 50-х годов и постепенно вышла за рамки сферы программирования, охватив смежные области.
Другим важным фактом стало быстрое развитие графического дизайна и запрос на формирование устойчивых принципов фирменного стиля. В качестве примера часто приводят инструкцию для метрополитена Нью-Йорка, которая детально описывает использование всех элементов навигации, типографики, условных обозначений и графических элементов.
Идею создание нового на основе наработок в мире искусства продвигали Карл Герстнер и Сол Левитт. Центральное место в творчестве серийных художников занимала концепция создания искусства с помощью алгоритмов. Сол Левитт был вероятно, самым известным серийным художником. Для самого Левитта настоящим произведением искусства был алгоритм, а не конечный продукт. В современном понимании он был одним из тех дизайнеров, которые экспериментируют с дизайн-системами.
Методология атомарного дизайна Создание дизайн-систем часто связывают с методологией «атомарного дизайна» Брэда Фроста. Атомарный дизайн, используемый в основном для веб-дизайна, имеет 5 уровней разработки:
Атомы — html-теги Молекулы — связанные между собой простейшие элементы (форма обратной связи из кнопки и поля ввода) Организмы — отдельные разделы интерфейса (меню, раздел навигации) Шаблоны — типовые решения для страниц (карточка продукта) Страницы — шаблоны, использующие контент
Методология следования по уровням позволяет внести ясность в процесс сборки как отдельных частей продукта, так и целого решения. Для создания дизайн-систем по методике атомарного дизайна энтузиастами был создан инструмент Pattern Lab.
Инструменты для разработки дизайн-систем В разработке комплексных дизайн-систем специалистам помогают такие приложения как Sketch, Framer, Figma. Большую роль играют также различные фреймворки, SDK и библиотеки (AngularJS, Flutter, React).
Государственные дизайн-системы Развитие государственных дизайн-систем можно рассматривать как логичное продолжение процесса цифровизации отношений «гражданин — государство». Собственные дизайн-системы для разработки сервисов и продуктов обрели такие страны, как Италия, Австралия, Великобритания, Сингапур, США, Эстония.
Примечания
Литература
Ссылки Дизайн в цифровой среде. Никита Обухов Programming Design Systems. Rune Madson 3 lessons learned from the history of design systems. Will Fanguy Когда нужна дизайн-система: что это такое и где применяется. Сергей Попков