Для чего нужна дизайн система
Дизайн-система: что это, кому нужно и как её создать
Объясняем на примерах, зачем нужна дизайн-система, какие преимущества она даёт и почему нужна далеко не всем.
Глава дизайнерского отдела в LogoDesign.net. Любит рассказывать о тонкостях разработки, графическом и веб-дизайне.
Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.
Если вы следите за миром дизайна, то наверняка слышали про дизайн-системы. О них не сказал лишь ленивый. Одни дизайнеры в восторге от нового тренда, а другие как-то не очень. «Опять придётся что-то учить», — сетуют они. Но как раз дизайн-системы того стоят.
Почему же дизайн-системы стали актуальны? Чтобы понять это, рассмотрим типичный сценарий: нам нужен новый интерфейс для продукта.
Чтобы приступить к разработке, вы собираете требования, беседуете со своей командой, проводите мозговой штурм, и наконец каждый из вас усаживается за проектирование своей части.
Но постойте, какие шрифты мы выбрали? Какой цвет взять, чтобы дизайн создавал нужное настроение? Если я выберу синий, то ощущения будут не такими, как от красного. Мы вообще определились с тональностью сайта? Как насчёт самих компонентов: мы договорились о размерах карточек 1 и их элементах?
Очевидно, что при разработке продукта приходится следить за множеством его частей. Это одна из задач, которую решают дизайн-системы.
Они ускоряют процесс проектирования и дают его участникам много дополнительных преимуществ.
В дизайн-системе Google (Material Design) карточка представляет собой контейнер для целостной единицы контента и действий с ней. Может включать изображение, текст, ссылки и так далее.
Что такое
дизайн-система?
Джереми Кит (Jeremy Keith), ирландский веб-дизайнер и писатель, говорит о дизайн-системе так:
« …Она включает в себя библиотеки шаблонов, руководства по стилю и другие объекты. Но не обманитесь: даже самый полный набор шаблонов никогда не станет для вас дизайн-системой. Потому что система — это не сами компоненты, а то, что связывает их воедино. Это правила и ограничения, которые указывают, как эти шаблоны работают вместе, когда и где целесообразно использовать каждый».
В этом смысле дизайн-система — это структура, которая приводит в порядок все инструменты и процессы проектирования. Это больше чем цвета, шрифты, изображения, макеты и руководства по стилю. Дизайн-система — это философия и язык, которые направляют дизайнеров, помогая создавать продукты более осмысленно.
Преимущества
дизайн-системы
А. Расширение полномочий разработчиков
Иногда программисту что-то неясно в переданном дизайне, а порой возникают особые случаи, про которые дизайнер забыл.
Например, он отрисовал только интерфейс, но разработчику не обойтись без загрузочного экрана и экранов-заглушек (для вывода ошибок и возможных решений). Где взять дизайн отсутствующих элементов? Если сослаться на дизайн-систему, то программиста ничто не задержит — он сразу сможет кодировать. А всё благодаря тому, что последнее слово при разработке — за источником, который доступен сразу всем.
Разработчику не приходится переспрашивать у дизайнеров, правильно ли он реализовал какой-то элемент, ведь команда уже согласовала их все и внесла в систему дизайна — только бери и делай.
Б. Централизация знаний
Как работает дизайн вашего продукта? Может статься, что хорошо это знает один-единственный человек в команде. Тогда всем приходится спрашивать его мнение о дизайнерских решениях. Это замедляет производительность, утомительно, а кроме того, рискованно.
Что делать, если человек этот вдруг уволится со скандалом и обидами? Он унесёт свои знания с собой — и взять их будет уже неоткуда. Отразите эти же знания в дизайн-системе — и они станут доступны любому человеку в любое время.
В. Имидж и маркетинг
Дизайн-системы привлекают отраслевую прессу. Если вы создадите такую для своей компании, не скрывайте её от дизайн-сообщества: поделитесь своими идеями и процессами — и люди о вас заговорят.
Большинство крупных игроков, таких как Shopify, Google, IBM и Atlassian, гордятся собственными дизайн-системами. Они общедоступны, не пугают своим языком и оформлены по-современному. Например:
Когда нужна дизайн-система: что это такое и где применяется
Последние два года дизайнеры, студии и продукты пишут о дизайн-системах и активно внедряют свои. В AIC рассказали, что это, зачем дизайн-системы нужны и как их использовать.
Когда появились дизайн-системы
Систематизация дизайна появилась вместе с тиражностью. Так, например, первые рукописные книги для удобства и оперативности копирования приводили к единым правилам, сеткам и повторяющимся элементам.
Термин «дизайн-система» появился в середине ХХ века и означал систему визуальной идентификации бренда. Правда, в то время речь шла только о физических продуктах на полках магазинов или о самой сети магазинов.
Визуальное руководство Нью-Йоркского метрополитена в 1970-х
С появлением интернета дизайнерам пришлось осваивать новое направление — веб-дизайн. О термине «дизайн-система» надолго забыли. Примерно в двухтысячных о нём вспомнили вновь — дизайнеры заметили, что многие вещи можно систематизировать, упростить и автоматизировать.
Одним из первых в России о дизайн-системах заговорил Артём Геллер, арт-директор «Лаборатории Артёма Геллера». Сейчас совместно с ним мы в AIC разрабатываем дизайн-системы для государственных сайтов.
Сайт дизайн-системы государственных порталов России gov.design
Всё, что нужно знать о рекламе в мобильных играх
Аналитический обзор Gameloft: рекламные форматы, портрет аудитории, надёжные бенчмарки.
На сегодняшний день в мире зафиксировано более 500 дизайн-систем. Все они собраны на сайте Website Style Guide Resources. Это первый и самый полный каталог со множеством категорий и полезных образовательных материалов.
Что такое дизайн-система
Понятие «дизайн-система» часто путают с более мелкими явлениями: гайдлайн, UI-кит, брендбук. На деле у этого определения более широкое значение.
Дизайн-система — это набор ценностей бренда, инструментов и компонентов, который упрощает создание, тестирование, визуальное и техническое обновление продуктов, а также обеспечивает единообразие их интерфейсов.
По моему мнению, дизайн-системы окружают нас повсеместно. В пример можно привести систему дорожных знаков или обозначений для управления музыкальными приложениями на смартфоне. Даже за рубежом мы узнаем знак пешеходного перехода и найдём кнопку «плей» в приложении.
Александра Ермоленко, директор департамента дизайна Rambler&Co, рассказывает, какие компоненты входят в дизайн-систему Rambler:
Слайд из презентации Rambler&Co о компонентах дизайн-системы
Кому и зачем нужны дизайн-системы
Обычно дизайн-системы нужны крупным продуктам, которые регулярно обновляют и запускают новые сервисы: банкам, холдингам, международным корпорациям. Самый яркий пример в России — «Яндекс» с его огромным количеством проектов: музыка, блоги, афиша, почта и другие.
Пример дизайн-системы, на которую можно ориентироваться, недавно представил «Альфа-Банк». Приветливый тон, яркие иллюстрации и понятная навигация уже располагают к продукту.
Сайт дизайн-системы Альфа-Банка — design.alfabank.ru
Кроме этого, дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие. Большинство компаний публикуют часть своих наработок. Их на своём сайте собирает Юрий Ветров, директор по дизайну в Mail.Ru Group.
Design System Club — проект Юрия Ветрова о дизайн-системах России
Бо́льшая часть российских компаний, у которых есть дизайн-система, — банки. Обычно у банка есть мобильное приложение и сайт, которые должны иметь похожие интерфейсы. Эту задачу можно решить с помощью единого подхода к дизайну и проектированию, то есть дизайн-системы. Даже если сайт и приложение будут создавать отдельные команды дизайнеров и разработчиков, они могут использовать общие компоненты и паттерны.
В будущем, когда руководство банка решит провести редизайн сайта и приложения, дизайн-система позволит централизованно обновить компоненты во всех проектах одновременно.
Дизайн-система создаёт ощущение единства и помогает потребителю достичь нужной цели в кратчайшие сроки, а крупному бизнесу — зарабатывать больше.
Для государственных сервисов и сайтов польза также очевидна: системный подход к проектированию формирует правильный пользовательский опыт. Государству важно, чтобы люди умели работать с госсайтами, а также — легко отличали их и не путали с коммерческими. Единый паттерн — подход к проектированию интерфейсов — должен быть во всём: в навигации, иконках, шрифтах и названии вкладок.
Кроме этого, дизайн-система ускоряет взаимодействие государственных институтов с дизайнерами и разработчиками: унифицирует терминологию, сокращает временные затраты на обсуждение задач, формирует общее понимание целей и принципов работы. Зрелая дизайн-система может в перспективе сэкономить время и деньги на разработку нового сервиса или обновление продукта.
Итак, если вы наблюдаете одну или несколько ситуаций из списка ниже, стоит задуматься над разработкой дизайн-системы:
Как дизайн-системы помогают в работе
Польза дизайн-системы проявляется на внутреннем и внешнем уровнях.
Польза для команды
Все участники команды проектируют, разрабатывают и внедряют продукты на основе общих элементов дизайна. Во-первых, дизайн-система экономит время дизайнеров: с готовой библиотекой и паттернами они гораздо быстрее создают и тестируют макеты.
Во-вторых, дизайн-система упрощает коммуникацию внутри команды, помогает дизайнерам и разработчикам решать задачи, которые ставят менеджеры.
Принципы работы с сеткой в дизайн-системе Mail.Ru Group Paradigm
Дизайн-система повышает лояльность сотрудников компании к собственным продуктам, положительно влияет на репутацию бренда на рынке. Сам факт создания дизайн-системы — это хороший PR-повод, который привлекает внимание к бренду.
Вдобавок, наличие дизайн-системы позволяет привлекать в команду специалистов любого уровня и не бояться, что они испортят продукт. Дизайн-система, созданная сильной командой, минимизирует вероятность ошибки.
Польза для потребителей
Дизайн-система меняет отношение пользователей к бренду. Во-первых, общий подход к проектированию UX и UI делает продукт более доступным и понятным для клиентов. Во-вторых, единый визуальный стиль всех проектов повышает узнаваемость компании на рынке и планку качества для конкурентов.
Как понять, нужна ли вам дизайн-система
Дизайн-система не появляется из воздуха — она создаётся на основе ценностей компании. Если раньше большинство команд формировали подход к дизайну в ходе развития бизнеса, то сегодня компании всё чаще закладывают дизайн-культуру на старте. Появление общих ценностей означает, что у компании появилась необходимость, возможность и внутренние ресурсы оформить эту культуру в систему.
Чтобы определить, нужна ли дизайн-система вашей команде, проверьте, актуальны ли для вас эти утверждения.
Несколько отделов вашей компании одновременно работают над одним проектом
Если да, то дизайн-система поможет работать всем в одном направлении и экономить время на коммуникацию. Единый подход в разработке интерфейсов исключает риск сделать работу впустую и позволяет быстрее протестировать новый сервис.
Например, вы разрабатываете CRM-систему. Если у вас есть дизайн-система, не нужно шлифовать прототип до идеала, чтобы протестировать новый сервис. Достаточно собрать первый прототип и дать доступ к ограниченному кругу пользователей, которые укажут на недостатки продукта. А дизайн-система поможет доработать его и быстро внедрить новые функции.
Есть потребность масштабировать дизайн на сотни макетов
Если у вас сложный продукт, растущая или уже большая команда, как минимум стоит начать с UI-кита, популярных паттернов и библиотеки, откуда макеты будут подтягивать свои компоненты. Это заметно упростит работу в будущем, когда дизайнеров будет в два-три раза больше и станет тяжело собраться вместе, чтобы обсудить макет.
У компании есть ресурсы на создание дизайн-системы
Разработка дизайн-системы — внутренний проект компании, который не приносит прибыль здесь и сейчас. На её создание нужны время и ресурсы, которые можно было бы потратить на проектирование макетов без системы.
Руководить её разработкой должен осознанный специалист, который понимает, как продукт выиграет от систематизации в долгосрочной перспективе. Это должен быть дизайнер, который не боится скучной методичной работы.
Прежде чем приступить к созданию дизайн-системы, обязательно определите критерии, по которым вы сможете оценить эффективность её внедрения. Также составьте смету расходов и план работ.
Что надо запомнить
Вместо вывода мы составили список основных тезисов.
Дизайн-система. Определение понятия
В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.
Одним из наиболее распространенных заблуждений является чрезмерно узкое понимание термина “дизайн-система”, когда за неё принимают какой-то один из составляющих элементов, например, визуальный язык или дизайнерские шаблоны.
www.facebook.com/nikita.melnikov/posts/1809068045779433
Регулярно в своих выступлениях я затрагиваю определение понятий и говорю о том, что в действительности понимается под дизайн-системой в наше время.
Однако, споры продолжаются, а значит точка ещё не поставлена.
Я серьёзно беспокоюсь о том, что эта неопределенность может негативно отразиться на нашей отрасли, попросту затормозить нас, поэтому беру на себя смелость попытаться в этой заметке максимально чётко определить, что же такое современная дизайн-система, почему она существует в таком виде и, что едва ли не важнее всего, чем она отличается от статичных гайдлайнов прошлого. Для удобства, часть заметки будет оформлена в формате ответов на часто задаваемые вопросы.
Откуда ноги растут
Способность к передаче опыта и знаний была одним из толчков к развитию человечества, однако, формализованной системы для этого не существовало в течение очень долгого времени. Всё происходило довольно стихийно, буквально из уст в уста.
Центрами знания были, как правило, библиотеки и культовые места, где не только хранилась информация, но и происходило обучение.
bit.ly/dsdefinition-img-1
Прекрасным примером подлинной реформы в систематизации знания можно считать изобретение в средние века Гвидо Аретинским системы нотного письма, которая впоследствии эволюционировала в то, чем мы пользуемся и сейчас. Она позволила существенно упросить процесс обучения певчих, и сократить его с 10 лет до 2!
Огромный толчок к развитию возможностей передачи опыта, безусловно, дало изобретение книгопечатания. Даже сам процесс книгопечатания можно считать неплохим примером, т.к. он требовал очень чёткого соблюдения принципов.
bit.ly/dsdefinition-img-3
Чем сложнее и многограннее система, тем значимее точность передачи опыта. Поэтому, громадный технологический рывок XX века потребовал усовершенствовать то, как мы формализуем знание и контролируем результат.
В середине 50х с активным ростом коммерческого графического дизайна для корпораций возникает понятие визуальной идентификации бренда (слово «дизайн-система» появляется примерно в то же время).
Классическим (и наиболее близким к нашей теме) примером является исключительно подробная инструкция для метрополитена Нью-Йорка, где досконально объясняются все детали создания графики, принципы навигации и т.п.
bit.ly/dsdefinition-img-5
С такого рода документами разной степени подробности приходилось (и по сей день приходится) работать дизайнерам, делающим что-либо для компаний в оффлайне. Возможно, в этом и кроется причина того, что очень часто под дизайн-системой в целом понимают именно визуальные гайдлайны и руководства по фирменному стилю.
Чтобы не затягивать рассказ, сразу перейду к последнему десятилетию, когда произошёл совершенно невероятный рост и развитие технологических стартапов.
Невиданная ранее динамика рынка и особенности digital-среды потребовали по-новому взглянуть на вопрос консистентности и масштабируемости решений. Для новых компаний это стало одним из ключевых факторов для успешного роста.
К сожалению, существовавшие ранее гайдлайны не могли отвечать новым требованиям, т.к. являлись статическим артефактом и предполагали прохождение любого дизайн-решения через цепочку: «гайдлайн → макет → верстка → реализация». Юра Ветров в одной из статей цикла «UX стратегия» указал на то, какие это порождает проблемы: на каждом из этапов цепочки теряются детали и генерируются баги, реализовать задуманное на 100% становится крайне сложно… Только перенося референсный дизайн из статической документации на уровень реализации, можно сократить цепочку до «гайдлайн = дизайн = верстка → реализация», а значит — избавиться от кучи геморроя по внедрению, улучшению и поддержке продуктов.
Итак, технологическим компаниям нужно было соответствующее решение на стыке дизайна и технологий.
Идеальным примером такого решения станет библиотека Bootrstap, позволившая молодым стартапам быстро собирать лендинги с адаптивностью и простой библиотекой компонентов из коробки — то, что нужно!
Однако, это было лишь технической частью. Необходимой, но недостаточной для того, чтобы называться «дизайн-системой».
Последней вехой на пути к дизайн-системам в современном их понимании хочется выделить появление методологии Atomic Design.
bit.ly/dsdefinition-img-4
Существует понятие модульного дизайна, когда мы рассматриваем наш процесс в контексте абстрактных слоев, уровней. Это облегчает восприятие комплексного дизайн-процесса и дробит его на понятные составляющие.
Atomic design, безусловно, не был первым и лично я не могу назвать себя сторонником парадигмы Брэда Фроста, т.к. он выбрал довольно специфичные метафоры для описания слоев, однако, нельзя отрицать, что именно эта методология стала наиболее известным примером, в целом популяризировавшим направление.
Как обещал в самом начале, часть, посвящённая определению понятия дизайн-системы, для удобства восприятия, будет подана в формате вопросов и ответов.
Вопросы и ответы
Что такое дизайн-система в двух словах?
В качестве ёмкого определения я бы предложил следующее:
Дизайн-система — это целостный визуальный язык и его техническое отражение в виде библиотеки компонентов на едином репозитории, а также сопутствующих дизайнерских шаблонов.
Из чего состоит настоящая дизайн-система?
Чтобы называться таковой, дизайн-система должна включать в себя четыре необходимых элемента:
Что такое «визуальный язык»?
Визуальный язык — это парадигма, определяющая то, как мы создаём интерфейсы продуктов, основа-основ.
Целостный визуальный язык включает в себя:
Что такое «библиотека компонентов»?
Библиотека компонентов в коде — техническая реализация всего того, что было заложено в вашем визуальном языке. Вся необходимая логика буквально «зашивается» в компоненты, они становятся основным отражением вашей системы.
Очевидным плюсом использования библиотеки является то, что она существенно упрощает поддержание консистентности продуктов и стабильный уровень качества дизайна.
Хорошая библиотека включает в себя:
Подробнее узнать о преимуществах работы с библиотекой можно в одной из статей цикла “UX стратегия” Юры Ветрова.
Что такое дизайнерские шаблоны в дизайн-системе?
Несмотря на то, что единственно значимым отражением вашей системы являются компоненты в коде (т.е. то, что непосредственно видят ваши пользователи), у дизайнеров должна быть возможность свободно прототипировать, используя все необходимые элементы. В идеальной картине мира у дизайнеров есть среда прототипирования с использованием боевых компонентов и реальных данных, однако, это довольно трудно достижимо. Достаточным является наличие актуального и поддерживаемого шаблона (или группы шаблонов) для любого используемого вами дизайнерского инструмента.
Подробнее о том, как устроены шаблоны в Портальной команде Mail.Ru можно почитать здесь.
Важно помнить, что дизайнерские шаблоны — это лишь часть дизайн-системы и сами по себе, без привязки к библиотеке компонентов, они являются лишь статичными артефактами.
Слышал определение «единый источник правды». Что это и зачем оно нужно?
Критически важно, чтобы существовал (и поддерживался в актуальном состоянии) ресурс, где будет всецело отражёна дизайн-система со всеми её составляющими. Этот ресурс будет являться вашим единым источником правды о системе — местом, с которым можно будет регулярно сверяться в процессе работы.
Существование такого ресурса кардинально упрощает взаимодействие вокруг дизайн-системы, т.к. все участники процесса имеют под рукой единую точку, куда можно обратиться за ответами на все распространённые вопросы. Особенно ярко это ощущается при взаимодействии с аутсорсом — именно тогда вы понимаете, насколько доступно всё описали!
Для Портальной команды Mail.Ru «единым источником правды» является сайт Paradigm.
Дизайн-системе нужна команда?
Команда дизайн-системы — последний составляющий элемент нашего определения. Как и любой другой серьезный долгосрочный проект, дизайн-система должна иметь своих идеологов, которые заложат и будут поддерживать философию и базовые принципы, менеджеров, которые сделают так, чтобы проект случился, и исполнителей, которые будут работать над ней руками. Зачастую случается так, что эти роли совмещаются и перемешиваются. На определенном уровне зрелости компания может создать выделенную команду системы, но как правило, работа ведётся параллельно с основной деятельностью. Cамое главное, чтобы в принципе существовали люди, регулярно и систематически удаляющие внимание проекту. Только в этом случае он имеет шанс обрести жизнь.
Полезную информацию об устройстве команды дизайн-системы можно почитать у главного идеолога этой темы — Nathan Curtis.
Не понимаю: чем дизайн-система отличается от гайдлайна?
bit.ly/dsdefinition-img-7
Гайдлайн в традиционном понимании — статичный документ, в котором фиксируются правила работы с визуальным стилем компании. Дизайн-система может включать в себя эту информацию, но она гораздо шире. Гайдлайн — лишь один из элементов системы.
В отличие от классического статичного гайдлайна, дизайн-система — «живая», т.е. не только описана, но реализована в библиотеке компонентов. Таким образом, в дизайн-системе (в отличие от гайдлайна) есть динамическая связка между исходными правилами и реализацией. Гайдлайн можно обновлять, не будучи уверенными в том, что это изменение на чём-то отразится. В дизайн-системе изменения могут раскатываться на всю цепочку продуктов.
Мы собрали крутейший UI Kit в Sketch/Figma/etc. и активно используем его в работе. Можно сказать, что у нас есть дизайн-система?
Можно сказать, что вы сделали шаг к унификации дизайна. В идеале этот процесс начинается не с графических артефактов, но осознания и формулирования принципов, которыми вы руководствуетесь в дизайне продуктов. Без этого унификация будет происходить только на визуальном уровне.
Также важно помнить, что сам по себе UI Kit вне системы — не более, чем статичное изображение элементов, которое будет неизбежно устаревать и никак не отражать реальность. Чтобы этого избежать, ваш UI Kit должен быть реализован в виде «живых» компонентов в коде, используемых на реальных продуктах.
Иными словами, от схемы, при которой ваш дизайн никак не связан с итоговым результатом, необходимо прийти к той, когда ваш дизайн “вшит” в библиотеку компонентов и результат предсказуем.
Вывод
Рассматривая дизайн-системы в историческом контексте и препарируя само понятие, я бы хотел отметить две ключевые мысли: