Сила структуры — руководство по моделям систем проектирования

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

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

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

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

Zalando — ведущая европейская онлайн-площадка для модной одежды. Atlassian известна во всем мире своими инструментами для разработки программного обеспечения. У каждого есть большие группы разработчиков и сложные потребности в дизайне. Что можно узнать из их моделей дизайн-систем?

Zalando: сотрудничество как модель дизайн-системы

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

Можно подумать, что поддержание системы дизайна для такого известного бренда потребует строгого управления и узкого круга лиц, принимающих решения по дизайну. Вместо этого подход Заландо явно основан на сотрудничестве. Вместо того, чтобы рассматривать свою дизайн-систему как совершенную сущность, находящуюся под угрозой энтропии, Zalando поощряет свои специализированные команды вносить новые идеи по мере необходимости. Как это работает?

Основная цель команды дизайн-системы Zalando (ZDS) — помочь командам разработчиков разрабатывать компоненты, необходимые им для того, чтобы продукты блестели. В то же время ZDS гарантирует, что целостность системы проектирования не будет нарушена. Таким образом, ZDS является одновременно связующим звеном и сетью безопасности.

Когда специализированная команда Zalando обнаруживает, что ей нужно решение, противоречащее дизайн-системе компании, она вносит свой вклад, используя простую форму Google. Когда получен билет взноса, ZDS просматривает и классифицирует запрос на изменение как легкий , средний или тяжелый . Каждая категория имеет свою собственную последовательность совместной проверки, проектирования и итерации.

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

Простота модели вклада Zalando позволяет различным мнениям в компании влиять на развитие системы. С философской точки зрения Zalando рассматривает свою систему как продукт, а не просто как ресурс документации, предназначенный для визуального согласования продуктов. Из этого обзора вытекают практические выводы, применимые к различным моделям систем проектирования:

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

Atlassian: Новый взгляд на дизайн-систему

Atlassian создает инструменты для разработки программного обеспечения и совместной работы, такие как Jira и Trello.

В 2017 году Atlassian провела ребрендинг и запустила сайт с рекомендациями по дизайну. Одновременно компания разместила отдельный сайт, посвященный компонентам пользовательского интерфейса и соответствующим примерам кода.

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

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

Чтобы полностью понять свою проблему, Atlassian провела внешний аудит и опубликовала опросы об удовлетворенности клиентов. Как и ожидалось, оба сайта были сочтены несогласованными и устаревшими. Учитывая, что на кону ее репутация и большая экосистема дизайнеров, разработчиков и заинтересованных сторон, требующих изменений, Atlassian признала свои недостатки и решила переосмыслить свою систему дизайна.

В начале августа 2020 года команда Atlassian по системе дизайна (ADS) запустила новый сайт, на котором собраны рекомендации по бренду, визуальным элементам, контенту, компонентам и шаблонам.

Кроме того, команда ADS:

• Половина компонентов пользовательского интерфейса перенесена в новую систему (остальные находятся в процессе)
• Переписана и упрощена документация по всему
• Улучшен поиск внутри системы
• Добавлены ссылки для копирования кода.

Наиболее яркое свидетельство взросления мышления Atlassian исходит от ведущего дизайнера ADS Дженни Йип: «Распространенное заблуждение о дизайн-системах состоит в том, что после их публикации они становятся неизменным источником истины. Дизайн-система никогда не бывает завершенной. В Atlassian мы начинаем менять свое представление о нашей дизайн-системе… превращая ее в живую и дышащую сущность».

5 принципов дизайн-системы, о которых стоит помнить

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

1. Дизайн-системы — это цифровые продукты.

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

2. Дизайн-системы предназначены для совместной работы.

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

3. Дизайн-системы ценятся за простоту.

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

4. Дизайн-системы требуют стратегий коммуникации и взаимодействия.

Команды, управляющие дизайн-системами, должны подумать о том, как регулярно сообщать заинтересованным сторонам об обновлениях и новых функциях. Информационные бюллетени, сеансы вопросов и ответов и другие информационные стратегии должны информировать и вовлекать: «Это изменения. Вот почему вы должны заботиться».

5. Дизайн-системы централизованы.

Системы проектирования должны быть доступны в одном облачном месте. Навигация по системе или получение ресурсов не должны требовать знания конкретной программы проектирования. И помните, публикация отдельных руководств по дизайну и разработке — верный путь к диссонансу продукта.

Сила структурной гибкости в дизайне

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

В конечном счете, лучшие системы проектирования являются простыми, совместимыми и гибкими. Они четко отвечают на насущные вопросы проектирования, приветствуют вклад множества заинтересованных сторон и отдают приоритет эффективным решениям, а не догматическим формулам.

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Последовательность — это ключ — как создать дизайн-систему Figma
• Понимание систем дизайна и шаблонов
• Figma, Sketch и Axure: обзор на основе задач
• Зачем использовать материальный дизайн? Взвешивание плюсов и минусов
• Прошлое все еще присутствует — обзор вневременного дизайна