Что такое дизайн-системы и как их создавать?

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

Дизайн-система может существовать на сайте или внутри ПО для создания прототипов (например, Figma или Sketch). Если вы являетесь частью большой команды, дизайн-система способна значительно сократить время проектирования, ведь вам не придется повторять одни и те же действия снова и снова.

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

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

Глубокое погружение

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

Чтобы создать продуманную дизайн-систему, требуются значительные средства, ресурсы и время.

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

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

Основа любой дизайн-системы — “язык дизайна”. Она включает не только визуальные элементы, но и документацию относительно тона и голоса бренда, а также подсказывает, как использовать те или иные компоненты. 

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

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

Когда и где использовать дизайн-системы

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

Представьте, что вам поручили обустройство нового района. Как же в нем разместятся жители? Вы можете создать шаблоны для домов разных размеров: дом с двумя спальнями будет отличаться от дома с четырьмя спальнями.

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

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

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

Кто должен использовать дизайн-систему?

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

Чек-лист для создания дизайн-системы

Из чего состоит дизайн-система?

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

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

Разделы дизайн-системы

1. Брендинг и язык дизайна

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

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

Включите в этот раздел вашей дизайн-системы следующие рекомендации:

• Философия дизайна и ценности, как организован процесс проектирования в вашей компании?
• Рекомендации относительно языка и тона голоса бренда
• Эксклюзивная для вашей организации терминология
• Типографика — шрифты, читабельность, размер и интервалы
• Цветовая палитра, соответствующая стандартам доступности
• Логотипы, в том числе когда и где их использовать, монохромные версии и различные форматы.

2. Лейаут и навигация

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

Включите в этот раздел вашей дизайн-системы следующие рекомендации:

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

3. Компоненты и шаблоны

Модульные компоненты включают интерактивные элементы, в том числе различные стили для разных случаев применения в ваших проектах.

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

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

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

Чтобы дизайн-система получилась максимально эффективной, модульными и масштабируемыми должны быть следующие компоненты:

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

Как внедрить дизайн-систему

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

Определите, как именно вы будете проектировать свою дизайн-систему: в Figma, Zeplin или другом инструменте? Если ваша команда создает вайрфреймы и прототипы в Figma, смело размещайте здесь и дизайн-систему.

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

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

Поддержка дизайн-системы

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

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

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

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

Позаботьтесь о том, чтобы команда могла вносить корректировки в компоненты и шаблоны и обновлять их без последствий для остальных элементов дизайн-системы. Также система должна поддерживать переменные отдельных компонентов. И самое главное, она должна быть надежной: не давать сбоев при добавлении, изменении или удалении элементов.

Вдохновляющие дизайн-системы

Хотите увидеть несколько вдохновляющих дизайн-систем? Эти примеры дадут вам более полное представление о том, как работают дизайн-системы. Возможно, у вас даже появятся идеи для создания собственной! Вот они:

1. Дизайн-система G Source от The Guardian

У британского новостного ресурса The Guardian есть собственная дизайн-система G Source. Она выглядит аккуратно и организованно, разделы удобно просматривать. Вся документация написана понятным разговорным языком. Дизайн-систему открывает список принципов дизайна и UX и краткое руководство для дизайнеров. Здесь также имеются рекомендации по брендингу, включая цвета, логотипы и типографику.

В G Source говорится: "Коэффициент контрастности всех текстовых и интерактивных элементов, представленных в наших цифровых продуктах, должен соответствовать уровню AA Руководства по доступности веб-контента (WCAG 2.1)". Это огромный плюс — так мы напоминаем дизайнерам о необходимости проверять свои работы на предмет доступности.

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

G Source содержит правила и для создания рекламных рассылок: сетки, размеры шрифтов, высота строки и многое другое.

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

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

2. Дизайн-система Orbit от Kiwi

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

Эта дизайн-система еще более детализирована, чем G Source, что особенно сильно бросается в глаза в разделах с компонентами и паттернами проектирования. Она ориентирована на пользователей и ставит во главу угла их интересы и цели.

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

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

3. Дизайн-система W3C

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

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

4. Дизайн-система Fluent UI от Microsoft

Дизайн-система Fluent UI от Microsoft объединяет компоненты, элементы и шаблоны, упрощающие проектирование для Windows, macOS, веба, мобильных устройств, включая Android и iOS, и даже кроссплатформенных проектов.

Fluent UI может похвастаться тремя характеристиками, которые отличают любую успешную дизайн-систему: модульность, надежность и высокая масштабируемость. Именно эта система используется в пакете Microsoft Office и Microsoft Teams. Довольно сложная Fluent UI служит "зонтиком" для многих небольших библиотек: Windows UI Library, Fluent UI Apple, Fluent UI Android и других.

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

Как и дизайн-система W3C, Fluent UI предоставляет примеры дизайна элементов с кодом. Благодаря повсеместному распространению Microsoft существует множество каналов связи, ресурсов и способов поддержки Fluent UI. Хотя сперва система может показаться сложной, ее разделы хорошо организованы, а соответствующая документация всегда остается под рукой.

Наконец, эта дизайн-система прекрасно справляется с задачей разграничения платформ, сохраняя при этом единый “язык дизайна”. Это поразительно, учитывая, огромный след, оставленный Microsoft в самых разных отраслях.

5. Дизайн-система Aurora от правительства Канады

Дизайн-система с открытым исходным кодом Aurora используется канадским правительством для проектирования опыта взаимодействия на различных устройствах. Она содержит ресурсы для дизайнеров, разработчиков, писателей и специалистов по анализу данных.

Лендинг Aurora четко отражает лежащую в основе дизайн-системы философию. В разделе ресурсов дизайнеры могут скачать UI-кит для Adobe Illustrator и XD, а разработчики — загрузить скомпилированный CSS и Javascript.

Как и W3C, Aurora предоставляет HTML-код для элементов дизайна: это позволяет быстро и без усилий реализовать их на сайте, что экономит время разработки. Дизайн-система содержит небольшие подсказки, которые обеспечивают максимальную производительность приложения или сайта, например, загрузка только необходимых элементов. 

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

Дополнительные ресурсы по теме

Хотите узнать больше? Следующие ресурсы помогут вам глубже погрузиться в мир дизайн-систем:

• Design Systems Repo, впечатляющая коллекция статей, книг, лекций и инструментов, посвященных дизайн-системам
• Атомарный дизайн, книга Брэда Фроста
• Создание дизайн-системы: Чек-лист из 100 пунктов, электронная книга Марцина Тредера
• Дизайн-системы, книга Аллы Холматовой
• Создание дизайн-системы для дизайнеров, видео от Figma
• Поднимите свой дизайн на новый уровень с помощью UI-китов, дизайн-систем и многого другого, видео Фемке ван Шунховен

Чувствуйте себя как дома

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

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

Хотя создание дизайн-системы кажется сложной задачей, результат подарит вам прекрасную возможность по-настоящему продемонстрировать суть вашего бизнеса! Вам уже не терпится начать?