Что такое дизайн система и зачем она нужна
Что такое дизайн-системы и где они применяются
О них говорят почти на каждой важной конференции, и CodeFest, про который мы недавно рассказывали, не стал исключением. Сложно не заметить тренд. Немного рассказали о явлении и поразмышляли над тем, как практика дизайн-систем применима к проектной разработке.
Дизайн-система — это набор правил и инструментов для визуального и технического исполнения, который отражает философию продукта и постоянно развивается. Это если попытаться в одном предложении. Получилось плохо, как видите — дальше станет понятнее.
То, что сегодня дизайн-системы и само явление унификации на пике популярности, вполне закономерно. Когда веб только начинался, тем, кто его создавал, было не на что ориентироваться. Каждый новый интерфейс становился экспериментом. Веб был про эмоции, а не про удобство.
Пользователь то и дело находил что-то новое, удивлялся: «вау, как они хитро замаскировали меню!». Владельцы заводов показывали сайты друг другу за кружкой пива, восторженно тыкая пальцем на крутящийся и сверкающий flash-логотип. Сайты предваряли специальные странички, на которых пользователю рассказывали, как всем этим пользоваться. Такого понятия, как юзабили, в принципе не существовало — его и не могло быть при том уровне интернет-грамотности.
Со временем произошли три логичные вещи:
Сегодня любой сайт — это в первую очередь решение проблемы. Чем быстрее человек разберется, куда нажимать, тем выше вероятность того, что он здесь останется — а не уйдет к конкурентам. Унификация — это хорошо, потому что если все сайты и элементы управления будут более-менее похожи друг на друга, ими будет проще пользоваться.
Первой осмысленной попыткой масштабной веб-унификации можно назвать Material Design от Google. Над идеей начали работать в 2011 году, а в 2014 представили готовую дизайн-систему.
Дизайн-система: что это, кому нужно и как её создать
Объясняем на примерах, зачем нужна дизайн-система, какие преимущества она даёт и почему нужна далеко не всем.
Глава дизайнерского отдела в LogoDesign.net. Любит рассказывать о тонкостях разработки, графическом и веб-дизайне.
Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.
Если вы следите за миром дизайна, то наверняка слышали про дизайн-системы. О них не сказал лишь ленивый. Одни дизайнеры в восторге от нового тренда, а другие как-то не очень. «Опять придётся что-то учить», — сетуют они. Но как раз дизайн-системы того стоят.
Почему же дизайн-системы стали актуальны? Чтобы понять это, рассмотрим типичный сценарий: нам нужен новый интерфейс для продукта.
Чтобы приступить к разработке, вы собираете требования, беседуете со своей командой, проводите мозговой штурм, и наконец каждый из вас усаживается за проектирование своей части.
Но постойте, какие шрифты мы выбрали? Какой цвет взять, чтобы дизайн создавал нужное настроение? Если я выберу синий, то ощущения будут не такими, как от красного. Мы вообще определились с тональностью сайта? Как насчёт самих компонентов: мы договорились о размерах карточек 1 и их элементах?
Очевидно, что при разработке продукта приходится следить за множеством его частей. Это одна из задач, которую решают дизайн-системы.
Они ускоряют процесс проектирования и дают его участникам много дополнительных преимуществ.
В дизайн-системе Google (Material Design) карточка представляет собой контейнер для целостной единицы контента и действий с ней. Может включать изображение, текст, ссылки и так далее.
Что такое
дизайн-система?
Джереми Кит (Jeremy Keith), ирландский веб-дизайнер и писатель, говорит о дизайн-системе так:
« …Она включает в себя библиотеки шаблонов, руководства по стилю и другие объекты. Но не обманитесь: даже самый полный набор шаблонов никогда не станет для вас дизайн-системой. Потому что система — это не сами компоненты, а то, что связывает их воедино. Это правила и ограничения, которые указывают, как эти шаблоны работают вместе, когда и где целесообразно использовать каждый».
В этом смысле дизайн-система — это структура, которая приводит в порядок все инструменты и процессы проектирования. Это больше чем цвета, шрифты, изображения, макеты и руководства по стилю. Дизайн-система — это философия и язык, которые направляют дизайнеров, помогая создавать продукты более осмысленно.
Преимущества
дизайн-системы
А. Расширение полномочий разработчиков
Иногда программисту что-то неясно в переданном дизайне, а порой возникают особые случаи, про которые дизайнер забыл.
Например, он отрисовал только интерфейс, но разработчику не обойтись без загрузочного экрана и экранов-заглушек (для вывода ошибок и возможных решений). Где взять дизайн отсутствующих элементов? Если сослаться на дизайн-систему, то программиста ничто не задержит — он сразу сможет кодировать. А всё благодаря тому, что последнее слово при разработке — за источником, который доступен сразу всем.
Разработчику не приходится переспрашивать у дизайнеров, правильно ли он реализовал какой-то элемент, ведь команда уже согласовала их все и внесла в систему дизайна — только бери и делай.
Б. Централизация знаний
Как работает дизайн вашего продукта? Может статься, что хорошо это знает один-единственный человек в команде. Тогда всем приходится спрашивать его мнение о дизайнерских решениях. Это замедляет производительность, утомительно, а кроме того, рискованно.
Что делать, если человек этот вдруг уволится со скандалом и обидами? Он унесёт свои знания с собой — и взять их будет уже неоткуда. Отразите эти же знания в дизайн-системе — и они станут доступны любому человеку в любое время.
В. Имидж и маркетинг
Дизайн-системы привлекают отраслевую прессу. Если вы создадите такую для своей компании, не скрывайте её от дизайн-сообщества: поделитесь своими идеями и процессами — и люди о вас заговорят.
Большинство крупных игроков, таких как Shopify, Google, IBM и Atlassian, гордятся собственными дизайн-системами. Они общедоступны, не пугают своим языком и оформлены по-современному. Например:
Создание дизайн системы (пошаговое руководство)
Мы, лаборатория Friendly Design, следим за трендами и исследованиями в области дизайна и около. Хотим поделиться с вами переводом статьи о том, что такое дизайн-система и как нужно подойти к ее разработке.
Дизайн система интерфейса представляет собой набор компонентов для проектирования, который помогает создавать качественный продукт, заложенный в концепции. Это также похоже на некий «инвентарь», который можно использовать для сбора ресурсов и использования их в вашем дизайне.
Дизайн система налаживает взаимодействие внутри продукта, помогая дизайнерам и разработчикам структурировать интерфейс продукта.
Также, органичная система пользовательского интерфейса учит пользователя интуитивно ориентироваться по всему продукту.
Лучший способ — это составить список всех различных шаблонов, цветов, стилей текста и паттернов, которые вы будете использовать в своем дизайне. Это должен быть четкий набор, который показывает все компоненты и функции, необходимые для создания продукта (веб-сайта или приложения). Дизайн системы пользовательского интерфейса требуют достаточно много времени и самоотверженности, что может утомить, но никогда не сдавайтесь!
Давайте начнем с мудборда и цветовой палитры, таким образом, вы зададите тему для своего дизайна и получите довольно хорошую картину о том, как будет выглядеть ваш дизайн. Ваш мудборд может состоять из изображений трендовых пользовательских интерфейсов, вдохновляющих продуктов или простых изображений, которые вам импонируют. Эта доска также поможет вам выбрать цветовую палитру. Помните, что выбор цвета также должен быть основан на ваших исследованиях. Перечислите основные и вторичные цвета и не также забывайте об оттенках этих цветов. Оттенки используются для различных элементов дизайн системы. Большинству интерфейсов понадобятся, как пример, следующие оттенки:
Что такое дизайн система и зачем она нужна? Разбираем на примере кейса ВШЭ
Как мы приводим к единому знаменателю разнообразные цифровые продукты самого диджитализированного университета России
На сегодняшний день у ВШЭ работают несколько отдельных диджитал продуктов, множество сервисов, от сайтов факультетов и отдельных направлений до собственных цифровых проектов, как «Вышка.Digital». Все они стилистически должны принадлежать к одному семейству, быть узнаваемыми вышкинскими продуктами, сохраняя при этом и свою эксклюзивность. Именно для таких случаев и создается дизайн-система, которая, как набор кубиков лего, позволяет легко и быстро собирать качественные и узнаваемые продукты. В этой статье мы расскажем, как создали и продолжаем развивать дизайн-систему для Вышки, одного из самых инновационных университетов страны.
Это напрямую зависит не только от стартового капитала, но и от ваших целей. В случае Вышки, нам нужно было покрыть как можно большее количество сервисов ВШЭ за короткое время. Поэтому мы начали работу с комплексного анализа всех имеющихся продуктов — сайтов, сервисов, подразделений и т.д.
Следующий шаг — приоритизация. Все обнаруженные на сервисах ВШЭ дизайн-компоненты были распределены по частоте их использования, ведь нам нужно было понять, за какие детали браться в первую очередь, а какие оставить на потом или вовсе выкинуть. После началась разработка разных блоков по установленной приоритетности.
Мы выпускали каждый элемент по отдельности, как продуктовые фичи, создавая и наполняя библиотеку блоков.
Скрупулезно обрабатывая каждый элемент системы, мы уже набрали достаточную для работы базу, которая включает в себя:
Визуальный язык — логотип, иконки, паттерн, слоган и т.д. — набор визуальных констант, кубиков лего, обеспечивающих внешнюю узнаваемость и схожесть разных продуктов. В начале мы создали отдельные логотипы для онлайн-продуктов Вышки. Иконки, подогнанные под единые стандарты размера, жирности и цвета, выглядят органично и привычно для пользователя, переходящего с десятков разных страниц, но не теряющего основные элементы управления на странице. Все иконки разработаны в черном цвете, так что дизайнеры Вышки могут окрашивать их в любые цвета.
Дизайн-токены — цвет, типографика, модуль и сетка, размеры и отступы, прозрачность, закругление углов — это базовые элементы визуального языка. Цвет, например, собран в брендовой вышкинской палитре цветов, с ее помощью выделяется основной посыл страницы. При разработке дизайнеры могут задавать уже имеющиеся цветовые коды из нескольких десятков, а не сотен тысяч вариантов. Цветовая палитра разработана под все случаи, а подробная инструкция дает подсказки, где и какой оттенок лучше использовать. Шаг поставлен таким образом, что каждый из цветов отлично становился ховером для другого.
Существует и оригинальный вышкинский шрифт — HSE Sans, разработанный под разные ситуации — заголовки, подзаголовки, подписи, мелкий шрифт для особых случаев и т.д. Помимо самого шрифта, дизайн-система регулирует длину строк, межстрочный интервал, отступы между блоками и компонентами, жирность и другие важные детали, обеспечивая сохранность фирменного стиля.
Библиотека компонентов — технические блоки интерфейса, атомы, из которых разработчики собирают страницы и макеты, вместе с их вариациями и размерами для различных ситуаций. UI-кит обеспечивают схожесть поведения страниц и идентичность сценариев взаимодействия разных продуктов, создают чувство единого вышкинского семейства.
Инструкции по использованию системы для дизайнеров — набор технических правил, которые позволяют всем говорить на одном языке и передавать информацию быстро и понятно между дизайнерскими командами разных продуктов, а также между дизайнерами и разработчиками.
Плоды своей кропотливой работы вы начинаете собирать почти сразу. Во-первых, дизайн-система значительно снижает затраты (вообще всего — денег, времени дизайнеров и разработчиков и т.д.) при реализации новых продуктов.
Дизайнеры и разработчики могут создавать схематические наброски из готовых базовых элементов библиотеки, не затрачивая много сил и времени на разработку, согласования и исправления — готовые элементы системы уже одобрены и протестированы. В среднем, создание сервиса с помощью блоков дизайн-системы снижает время производства новых продуктов до 2-х дней.
А UI-киты позволяют создавать макеты с высокой точностью и скоростью и значительно снижают риски — ведь они дают возможность посмотреть, как дизайн будет выглядеть в жизни, сразу отметить его слабые места и быстро исправить с помощью готовых блоков. С UI-китом можно быстро собрать два-три варианта и протестировать их.
Во-вторых, разработанная дизайн система упрощает взаимодействие пользователей, уже знакомых с экосистемой ВШЭ.
Здесь мы перечислили только основные элементы и процессы работы, из которых уже понятно, что дизайн-система это незаменимый инструмент, позволяющий экономить время, усилия,нервы. Но главное ее достоинство — это ограничение полета фантазии четкими и ясными принципами, отражающими сам бренд и его базовые опоры, при условии сохранения некоторой творческой свободы.
Всегда важно помнить, что дизайн-система — это эффективный инструмент, но никак не самоцель. В работе всегда нужно учитывать, что самое важное — контент, без него дизайн-система просто пустая формочка. Все элементы должны выделять контент, а не перекрывать или отвлекать от него. Кроме шрифтов, заголовков и других блоков, существуют и другие инструменты работы с «контентным наполнением», как адаптивные экраны, цветовое и теневое оформление, ограниченная палитра цветов. Никаких ярких и выбивающихся оттенков, лишних столбцов или крупных изображений там, где они не нужны. Все это помогает контенту грамотно отображаться и читабельно выглядеть.
И самое главное — дизайн-систему нельзя разработать раз и навсегда. Созданная библиотека всегда должна обновляться — нужно постоянно мониторить ситуацию, разрабатывать недостающие элементы или убирать невостребованные рудименты. Участники системы должны быть в курсе последних апдейтов, чтобы говорить на одном языке. Поэтому очень важно разрабатывать развернутые инструкции, релевантные как для дизайнеров, так и для разрабов во всех цифровых продуктах.
Кстати, дизайн-система Вышки будет реализована в ближайшее время, и мы постепенно будем приводить под единый знаменатель все университетские цифровые продукты. И это будет процесс не из быстрых. Век учись — век обновляй дизайн-системы!
Дизайн-система: что это, для чего и как создать
Я рад вернуться к вам, дорогие читатели сообщества, и поделиться опытом и знаниями.
Тема дизайн-систем, казалось бы, уже рассмотрена со всех сторон: можно найти множество статей, постов, докладов и других материалов. Несмотря на это, у каждого, кто сталкивается с этим термином, возникает множество вопросов. Я постараюсь подробно ответить на главные из них:
Что такое дизайн-система?
Для чего она нужна?
Что такое дизайн-система?
Давайте разбираться по порядку. Дизайн-система представляет собой совокупность трех сущностей:
Визуальный язык – то, что мы видим.
Framework – библиотека визуального языка, его код.
Guidelines – правила, как должно все выглядеть и каким образом применяться.
Можно считать, что дизайн-система является отдельным продуктом внутри любого IT-продукта.
Визуальный язык
Визуальная составляющая дизайн-системы включает в себя множество элементов, основные из которых:
Задача визуального языка – передать ценности бренда потребителю. Например, чтобы передать домашнюю атмосферу, можно использовать теплые тона и соответствующие изображения. Чтобы передать какой-то другой характер бренда, например, строгость и честность, использовать определенные шрифты и формы.
Какой образ приходит вам в голову, когда слышите или видите названия таких банков, как Альфа-Банк, ВТБ, Сбербанк, Тинькофф и других? Какие эмоции вы испытываете? Визуальный язык является одним из фактором того, каким мы запомним тот или иной продукт.
Framework
Фреймворк – это, по сути, код визуального языка. Благодаря нему все визуальные элементы можно взять из библиотеки и легко применить во всех своих продуктах.
Давайте представим простую ситуацию. Итак, у нас есть одна кнопка «Оплатить счет». И тут нам нужно поставить точно такую же кнопку для другой страницы, только называться она будет «Перевести деньги».
Что, если у нас фреймворка нет? Тогда данную кнопку необходимо создать заново, пусть даже путем копирования существующего. А если мы решили изменить цвет кнопки, то нам придется вручную менять цвет во всех подобных кнопках? А если таких кнопок десятки, сотни или больше?
Поэтому нужна централизованная библиотека элементов визуального языка, которая позволит создавать и переиспользовать каждую деталь продукта.
Guidelines
Чтобы все, кто взаимодействуют с дизайн-системой, «разговаривали на одном языке», необходимо выработать правила.
Например, один дизайнер считает, что кнопка недостаточно яркая и нужно изменить оттенок ближе к малиновому. Другой уверен, что кнопка должна быть темно-красного оттенка. В то же время разработчики уже неделю ругаются на тему идеального кода для реализации формы поиска. Все это ведет к хаосу в компании и продукте.
Казалось бы, условностей много. Как описать все так, чтобы не запутаться в правилах? Опишите только то, что нужно для конкретного элемента:
Что это за элемент?
Где он используется?
Какие задачи решает?
Также для UI-компонентов можно описывать анатомию: обозначьте структуру и все параметры, из которых они строятся.
Таким образом, правила применения элементов дизайн-системы позволяют упорядочить процесс работы для всех. Они задают определенные рамки для полета фантазии и формируют понимание, что любое изменение дизайн-системы может затронуть множество экранов и сценариев взаимодействия пользователя в продукте. Это развивает чувство ответственности на каждом участке работы над любой, даже самой мелкой, деталью продукта.
Для чего нужна дизайн-система?
Как и для любого IT-продукта, важно ответить на вопрос: для чего нужна дизайн-система? Или, как говорят некоторые коллеги по цеху – «чтобы что»?
Ответ на него даст понять ценность продукта. Отчасти ее уже можно увидеть из того, что я описывал выше. Но давайте разложим по полочкам и рассмотрим глубже.
Автоматизация
Автоматизация – это самая очевидная ценность. Дизайн-система позволит автоматизировать процессы и выиграть время на другие задачи.
Например, дизайнеры смогут сформировать библиотеку компонентов в графическом редакторе Figma и применять их во всех необходимых макетах. Разработчики, в свою очередь, просто используют ранее реализованные компоненты из фреймворка.
Итеративность
Возможность наследования и автоматического применения изменений в элементах дизайн-системы является мощным инструментом для продуктовой команды. Вы можете легко внедрить косметические или даже серьезные правки в одном месте. Таким образом шаг за шагом можно улучшать продукт бесконечно.
Однако любое внесение изменений – это большая ответственность. Поэтому любая коррекция должна быть сознательной и аргументированной.
Консистентность
Консистентность говорит о том, что объекты и сущности, которые мы используем в продукте и которые выполняют одну и ту же работу, должны стремиться к унификации, стремиться быть похожими.
Когда мы пользуемся в продукте похожими функциями, он становится привычным и удобным: мы знаем интуитивно, как работает и выглядит кнопка, где она расположена.
Синхронизация
Все элементы в IT-продукте должны обладать единым языком общения на основе четких правил.
С ними новые члены продуктовой команды выполняют задачи в рамках продукта, не теряя времени на раскачку: дизайнеры создают новые элементы на основе заданного визуального языка, а разработчики точно знают, каким образом их реализовать и использовать.
Больше времени на UX
Эта ценность является, по сути, совокупностью всех предыдущих преимуществ. Ручная работа с визуальным языком, на которую раньше тратилось много времени, становится максимально автоматизированной.
После создания дизайн-системы можно выделить больше времени на исследование и детальнее спроектировать user flow сценариев продукта (да, бывает, флоу не все делают и просто фигачат). Кстати, я писал подробно о user flow в предыдущей статье.
Скорость прототипирования
Дизайн-система позволяет быстро собрать прототип из готовых элементов и проверить гипотезу. Это, в свою очередь, экономит бюджет проекта и дает быстрые результаты.
Недостатки дизайн-системы
Все вышеописанное можно отнести к плюсам дизайн-систем, но у них, конечно, есть минусы.
Во-первых, дизайн-система – это дорого. Нужны ресурсы для ее создания и непрерывной поддержки. Дизайн-система должна развиваться вместе с продуктом. В противном случае между ними возникнет явная рассинхронизация: продукт будет развиваться, а дизайн-система будет постепенно отставать от продукта и терять свою актуальность.
Если бренд сформулировал новые правила визуального и вербального взаимодействия с клиентами, то визуальный язык дизайн-системы необходимо адаптировать. Дизайн-система должна идти в ногу с бизнесом и нести правильную идеологию бренда, развиваясь и трансформируясь вместе с ним.
Однако хочется отметить, что поддержка дизайн-системы в какой-то степени упрощается благодаря использованию современных инструментов, например, редактора Figma. У него достаточно функционала, чтобы дизайнеры могли с комфортом формировать и развивать UI-kit. К тому же, с помощью Figma можно легко перенять опыт коллег по цеху, используя готовые библиотеки
Как создать дизайн-систему?
Есть множество подходов для создания дизайн-системы. Я рекомендую рассмотреть атомарную систему, главным преимуществом которой является наследуемость. Пожалуй, тема атомарной дизайн системы может потянуть на отдельную статью. Про это можно почитать в переводе статьи Брэда Фроста (Brad Frost) «Atomic Web Design».
Примеры того, как сделаны дизайн системы:
После создания дизайн-системы немаловажно разобраться в том, как ее внедрить в практику компании. Во второй статье я расскажу о том, как пошагово выстроить процесс внедрения дизайн-системы в любой компании.
Я надеюсь, что каждый почерпнул для себя ценное из статьи. А я еще раз убедился в том, что работа над статьей структурирует знания и мотивирует на дополнительное изучение.