ДС — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих. (1)

ДС — это набор ценностей бренда, инструментов и компонентов, который упрощает создание, тестирование, визуальное и техническое обновление продуктов, а также обеспечивает единообразие их интерфейсов. (2)

В английском языке для обозначения дизайн-систем чаще всего используют понятие «design language», определяя также его главное отличие от дизайн-системы – возможность использования вне сферы цифровых продуктов. Одним из примеров такого «визуального языка» может служить узнаваемое оформление автомобилей компании BMW (фары, решетка радиатора). Визуальный язык определяет базовые основы создания продуктов и решений. (1)

Сегодня в качестве основных составляющих дизайн-системы специалисты выделяют:

• Гайдлайны и руководство по стилю

• Фреймворки

• UI-киты, шаблоны

• Наборы UX-паттернов

• Библиотеки готовых компонентов

• Документацию, правила, рекомендации

На сегодняшний день в мире зафиксировано более ~500 дизайн-систем. Все они собраны на сайте Website Style Guide Resources. Это первый и самый полный каталог со множеством категорий и полезных образовательных материалов. (2)

Задачи дизайн-системы

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

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

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

• Стандартизация решений

• Независимость проектов от состава команды

• Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»

• Снижение затрат на поддержку, развитие и запуск продуктов

Истоки появления дизайн-систем

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

Первые подходы к созданию дизайн-систем появились в 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 – ДС компании Salesforces

• Material – ДС компании Google

• Nachos – ДС Trello

• Paradigm – ДС компании Mail.RU

• Photon – ДС Firefox

• Polaris – ДС компании Shopify

• Ratio – ДС компании Rambler

• Solid – ДС компании BuzzFeed

Дизайн-системы сегодня

Кому и зачем сейчас нужны дизайн-системы

Обычно дизайн-системы нужны крупным продуктам, которые регулярно обновляют и запускают новые сервисы: банкам, холдингам, международным корпорациям. Самый яркий пример в России — «Яндекс» с его огромным количеством проектов: музыка, блоги, афиша, почта и другие.

Пример дизайн-системы, на которую можно ориентироваться, недавно представил «Альфа-Банк». Приветливый тон, яркие иллюстрации и понятная навигация уже располагают к продукту.

Сайт дизайн-системы Альфа-Банка — design.alfabank.ru

Кроме этого, дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие. Большинство компаний публикуют часть своих наработок. Их на своём сайте собирает Юрий Ветров, директор по дизайну в Mail.Ru Group.

Проект Юрия Ветрова о ДСх России

Design System Club — проект Юрия Ветрова о ДСх России

Бо́льшая часть российских компаний, у которых есть ДС, — банки. Обычно у банка есть мобильное приложение и сайт, которые должны иметь похожие интерфейсы. Эту задачу можно решить с помощью единого подхода к дизайну и проектированию, то есть дизайн-системы. Даже если сайт и приложение будут создавать отдельные команды дизайнеров и разработчиков, они могут использовать общие компоненты и паттерны.

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

ДС создаёт ощущение единства и помогает потребителю достичь нужной цели в кратчайшие сроки, а крупному бизнесу — зарабатывать больше.

Для государственных сервисов и сайтов польза также очевидна: системный подход к проектированию формирует правильный пользовательский опыт. Государству важно, чтобы люди умели работать с госсайтами, а также — легко отличали их и не путали с коммерческими. Единый паттерн — подход к проектированию интерфейсов — должен быть во всём: в навигации, иконках, шрифтах и названии вкладок.

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

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

• в компании много проектов, сайтов, подразделений;

• у компании большой корпоративный сайт со множеством сервисов и продуктов;

• у вас есть UI-кит, но нет единой библиотеки для разработчиков и дизайнеров;

• у бренда нет единого визуального языка.

Как дизайн-системы помогают в работе

Польза дизайн-системы проявляется на внутреннем и внешнем уровнях.

Польза для команды

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

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

Принципы работы с сеткой в дизайн-системе Mail.Ru Group Paradigm

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

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

Польза для потребителей

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

Как понять, нужна ли вам ДС

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

Чтобы определить, нужна ли ДС вашей команде, проверьте, актуальны ли для вас эти утверждения.

Несколько отделов вашей компании одновременно работают над одним проектом

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

Например, вы разрабатываете CRM-систему. Если у вас есть ДС, не нужно шлифовать прототип до идеала, чтобы протестировать новый сервис. Достаточно собрать первый прототип и дать доступ к ограниченному кругу пользователей, которые укажут на недостатки продукта. А ДС поможет доработать его и быстро внедрить новые функции.

Есть потребность масштабировать дизайн на сотни макетов

Если у вас сложный продукт, растущая или уже большая команда, как минимум стоит начать с UI-кита, популярных паттернов и библиотеки, откуда макеты будут подтягивать свои компоненты. Это заметно упростит работу в будущем, когда дизайнеров будет в два-три раза больше и станет тяжело собраться вместе, чтобы обсудить макет.

У компании есть ресурсы на создание дизайн-системы

Разработка дизайн-системы — внутренний проект компании, который не приносит прибыль здесь и сейчас. На её создание нужны время и ресурсы, которые можно было бы потратить на проектирование макетов без системы.

Руководить её разработкой должен осознанный специалист, который понимает, как продукт выиграет от систематизации в долгосрочной перспективе. Это должен быть дизайнер, который не боится скучной методичной работы.

Прежде чем приступить к созданию дизайн-системы, обязательно определите критерии, по которым вы сможете оценить эффективность её внедрения. Также составьте смету расходов и план работ.

Что надо запомнить

Вместо вывода мы составили список основных тезисов.

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

2. ДС экономит время и ресурсы на разработку, тестирование или обновление компонентов. Но, как любой инструмент, сама ДС требует поддержки и обновлений, что будет тратить ресурсы команд. Это стоит учитывать при оценке финансовой выгоды и рисков.

3. Систематизация знаний решает задачи с помощью готовой библиотеки элементов и компонентов. Возможность масштабировать и улучшать типовые решения положительно отражается на прибыли компании.

4. ДС позволяет получить целостный интерфейс и привести продукты бренда к единому визуальному языку. Это помогает компании повысить узнаваемость и лояльность среди клиентов.

5. ДС предназначена не только для крупного бизнеса, ей могут пользоваться и команды из 10 человек. Но большим продуктам с множеством проектов точно нужно задуматься о её внедрении.

Источники:

(1) Wikipedia — https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0

(2) https://www.cossa.ru/152/230108/