Чем сложнее проект, тем больше вероятность, что вам придется иметь дело с дизайн-системой. Это эффективный инструмент, который помогает создавать единообразные, согласованные, доступные интерфейсы.
В сложных проектах рано или поздно наступает момент, когда вы начинаете задумываться о создании дизайн-системы. В этой статье мы рассмотрим некоторые интересные примеры и их особенности, чтобы помочь вам создать свою успешную дизайн-систему, которая будет хорошо работать для вас и вашей команды.
Дизайн-системы обеспечивают согласованность, неоднократное использование элементов и единообразие проекта или бренда. И хотя мы очень хорошо научились разбивать интерфейс на компоненты, многие дизайн-системы не так полезны и практичны, как могли бы быть, или вообще “пылятся на полке”. Как же сделать так, чтобы ресурсы и усилия, вложенные в создание дизайн-системы, действительно окупились? Как создать дизайн-систему, которую все будут использовать с удовольствием?
В этой статье мы рассмотрим интересные дизайн-системы, создатели которых справились с задачей на ура.
Вдохновляющие дизайн-системы
1. NORD: ДОСТУПНОСТЬ И ПРАВИЛА ИМЕНОВАНИЯ
Собрав воедино все, что необходимо для цифрового управления медицинским бизнесом, компания Nordhealth создает программное обеспечение, предназначение которого — переосмыслить здравоохранение. Ее дизайн-система Nord в значительной степени ориентирована на доступность.
Nord предлагает множество вариантов кастомизации, темы и полноценный CSS-фреймворк, а также специальные руководства, например, по именованию и локализации. К сожалению, Nord Figma Toolkit пока не имеет открытого исходного кода.
2. WORKBENCH: “ЖИВЫЕ” ПРИМЕРЫ
Компания Gusto обслуживает более 200 000 компаний по всему миру, автоматизируя начисление сотрудникам заработной платы, вознаграждений и работу с персоналом. Дизайн-система Workbench включает философию бренда, дизайн-токены, иконки, иллюстрации, React-компоненты, утилиты — и документацию, чтобы связать все это воедино. Она представляет собой тот фундамент, благодаря которому команда смогла создать целостный и доступный опыт взаимодействия для пользователей платформы.
Чем действительно может похвастаться дизайн-система Workbench, так это полноценными “живыми” примерами, которые объясняют, как именно следует использовать компоненты в различных контекстах. Как делать нужно, а как — нет, визуальные пояснения и описание особенностей реализации гарантируют, что и дизайнеры, и разработчики смогут использовать Workbench эффективно.
Существует также расширение Gusto Workbench VS Code Extension с фрагментами кода для популярных UI-компонентов.
3. ОЛИМПИЙСКИЕ ИГРЫ: БРЕНДИНГ И МУЛЬТИЯЗЫЧНЫЙ ДИЗАЙН
Олимпийские игры, вероятно, являются одним из самых узнаваемых брендов в мире. С момента зарождения современных Игр более 125 лет назад сотни людей развивали и совершенствовали “олимпийский бренд”. Чтобы повысить согласованность и эффективность дизайна, МОК нанял канадское агентство для создания комплексной дизайн-системы, которая будет транслировать ценности Олимпийских игр и придаст бренду более современный облик.
Хотя основной акцент в Олимпийской дизайн-системе делается на брендинге и айдентике, здесь также содержатся примеры иллюстраций и графических элементов. Она не только показывает, как сделать дизайн понятным для носителей любого языка, но и включает множество примеров правильного и неправильного использования типографики.
4. BRAND ESTONIA: УНИКАЛЬНЫЕ АТРИБУТЫ ДИЗАЙНА
Нетронутая, полная контрастов природа, цифровое общество и умные, независимые люди — вот основные ценности бренда "Estonia". Дизайн-система отображает сильные стороны страны и показывает, как выразить их в текстах, дизайне, презентациях и видео.
Истории, ключевые идеи, факты, а также множество примеров и шаблонов обеспечивают прочную основу для создания текстов и дизайна в вебе, социальных сетях и печати. Особое место в дизайн-системе Эстонии занимают аутентичные фотографии и уникальные атрибуты дизайна, например, словесные знаки и иллюстрации-валуны, усиливающие сообщение.
5. AUDI: НАГЛЯДНЫЕ ПРИМЕРЫ, ЧТО МОЖНО, А ЧТО НЕТ
Интерфейсы Audi варьируются от веб-сайтов до приложений для оказания конкретных услуг. Дизайн-система Audi представляет собой единый набор компонентов, модулей и анимаций для создания сбалансированного, системного опыта взаимодействия.
Наряду с рекомендациями по брендингу и UI-компонентами, дизайн-система содержит исчерпывающую коллекцию визуальных примеров, которые демонстрируют, как должен или не должен применяться тот или иной компонент в интерфейсах Audi. Существует также Audi UI-кит для Figma и библиотека Sketch UI, которые гарантируют, что дизайнеры будут использовать в своих продуктах последние версии компонентов и иконок.
6. DEUTSCHE BAHN: РЕКОМЕНДАЦИИ ПО КОНТЕНТУ И UX-КОПИРАЙТИНГУ
Deutsche Bahn, национальная железнодорожная компания Германии, — один из самых узнаваемых брендов в стране. С помощью своей платформы DB Digital Product Platform она дает возможность разработчикам, дизайнерам и копирайтерам создавать гибкие цифровые решения.
Дизайн-система включает фрагменты кода, компоненты, примеры их использования, визуальный гайд по доступности, а также рекомендации по контенту и UX-копирайтингу. Все с открытым исходным кодом на GitHub и NPM.
7. SHOPIFY, IF И ДРУГИЕ: ВИЗУАЛИЗАЦИЯ ДАННЫХ
Данные бесполезны, если мы не можем их понять. К счастью, визуализация данных помогает нам доносить их значение. Но как добавить визуализацию данных в дизайн-систему? Вот несколько примеров.
Дизайн-система Shopify Polaris содержит рекомендации по визуализации данных и определяет пять основных принципов успешной визуализации. Здесь можно найти практические примеры того, что делать можно, а что нельзя.
Система Culture Amp содержит ссылки на полезные дополнительные ресурсы по каждому типу визуализации данных. Дизайн-система If проливает свет на применение цвета в визуализации данных, а дизайн-система Carbon содержит демки и готовые к использованию фрагменты кода для React, Angular, Vue и Vanilla.
8. ДИЗАЙН-СИСТЕМЫ ДЛЯ FIGMA
Atlassian, Uber, Shopify, Slack — вот лишь некоторые из дизайн-систем, которые вы найдете на сайте Design Systems For Figma. Курируемый Джошем Кьюсиком, этот ресурс представляет собой постоянно растущее хранилище Figma-китов — сгруппированных, организованных и доступных для поиска.
Не вошел в коллекцию, но также заслуживает внимания Figma-кит дизайн-системы GOV.UK. Основной акцент здесь делается на сложных пользовательских сценариях и веб-формах. Множество ценных инсайтов и вдохновение гарантированы.
