Дизайн-система

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

Принципиально важным является разница между библиотекой готовых элементов и дизайн-системой, последнюю отличает исключительная детальная проработка всех нюансов. Ярким примером большой продуманной дизайн-системы является Design Language[1] компании IBM, описавшей все возможные варианты развития ее концепции в цифровых продуктах и представившей сообществу философию системы. IBM фиксирует особую роль дизайн-системы в структуре взаимоотношений «пользователь–продукт», «клиент–компания», «разработчик–продукт», «сотрудник–компания».

Использование дизайн-систем дает ряд определенных преимуществ:

• Стандартизация решений
• Независимость проектов от состава команды
• Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»
• Снижение затрат на поддержку, развитие и запуск продуктов

Основы стандартизации дизайна стали появляться вместе с развитием «швейцарского стиля», оформившегося в 1927 году благодаря Яну Чихольду[2]. Чихольд ввел в обиход не только ключевые понятия простоты, лаконичности и легкости восприятия, но и четко обозначил границы допустимости использования отдельных элементов в графическом дизайне. Также заслугой дизайнера является внедрение модульной сетки – системы, активно используемой в веб-разработке, полиграфии и создании элементов дизайн-систем.

Первые подходы к созданию дизайн-систем появились в 60-е годы прошлого века, когда в программировании стала применяться модульная система. Идея модульности развивалась с конца 50-х годов и постепенно вышла за рамки сферы программирования, охватив смежные области.

Другим важным фактом стало быстрое развитие графического дизайна и запрос на формирование устойчивых принципов фирменного стиля. В качестве примера часто приводят инструкцию для метрополитена Нью-Йорка[3], которая детально описывает использование всех элементов навигации, типографики, условных обозначений и графических элементов.

Идею создание нового на основе наработок в мире искусства продвигали Карл Герстнер и Сол Левитт. Центральное место в творчестве серийных художников занимала концепция создания искусства с помощью алгоритмов. Сол Левитт был вероятно, самым известным серийным художником. Для самого Левитта настоящим произведением искусства был алгоритм, а не конечный продукт. В современном понимании он был одним из тех дизайнеров, которые экспериментируют с дизайн-системами.

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

На данный момент в мире насчитывается несколько сотен больших дизайн-систем. Лидерами по созданию и развитию направления являются крупные ит-компании (Apple, Microsoft, Google), банки и финансовые организации («Тинькофф Банк», «Альфа Банк», Spare Bank 1, VISA), производители программного обеспечения (Atlassian, Mozilla, IBM), дизайн-студии (Chulakov, AIC), производители сферы FMCG (Royal Canin).

Создание дизайн-систем часто связывают с методологией «атомарного дизайна» Брэда Фроста[4]. Атомарный дизайн, используемый в основном для веб-дизайна, имеет 5 уровней разработки:

• Атомы – html-теги
• Молекулы – связанные между собой простейшие элементы (форма обратной связи из кнопки и поля ввода)
• Организмы – отдельные разделы интерфейса (меню, раздел навигации)
• Шаблоны – типовые решения для страниц (карточка продукта)
• Страницы – шаблоны, использующие контент

Методология следования по уровням позволяет внести ясность в процесс сборки как отдельных частей продукта, так и целого решения. Для создания дизайн-систем по методике атомарного дизайна энтузиастами был создан инструмент Pattern Lab.

В разработке комплексных дизайн-систем специалистам помогают такие приложения как Sketch, Framer, Figma. Большую роль играют также различные фреймворки, SDK и библиотеки (AngularJS, Flutter, React).

Развитие государственных дизайн-систем можно рассматривать как логичное продолжение процесса цифровизации отношений «гражданин – государство». Сегодня собственные дизайн-системы для разработки сервисов и продуктов имеют Италия[5], Австралия[6], Великобритания[7], Сингапур[8], США[9], Эстония[10].

Российская государственная дизайн-система разрабатывается по заказу Министерства цифрового развития, связи и массовых коммуникаций, но не имеет официального подтвержденного финального варианта визуально-графического оформления и правил использования шрифтов и элементов системы.

Многие дизайн-системы получают собственные имена, которые отражают суть философии и визуального языка:

• Bootstrap – фреймворк и дизайн-система Twitter
• Carbon – дизайн-система компании IBM
• Consta – дизайн-система компании Газпром нефть
• Fluent – дизайн-система компании Microsoft
• Gel – дизайн-система компании BBC
• Lightning – дизайн-система компании Salesforce
• Material – дизайн-система компании Google
• Nachos – дизайн-система Trello
• Paradigm – дизайн-система компании Mail.RU
• Photon – дизайн-система Firefox
• Polaris – дизайн-система компании Shopify
• Ratio – дизайн-система компании Rambler
• Solid – дизайн-система компании BuzzFeed

• Дизайн в цифровой среде. Никита Обухов
• Programming Design Systems. Rune Madson
• 3 lessons learned from the history of design systems. Will Fanguy
• Когда нужна дизайн-система: что это такое и где применяется. Сергей Попков

• Alla Kholmatova. Design Systems. — Smashing Magazine, 2017. — 288 p. — ISBN 978-3-945749-58-6.