11 примеров российских и зарубежных дизайн-систем на 2024 год: с исходниками в Figma и GitHub

---

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

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

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

Фишка статьи: Собрала дизайн-системы, на которые опиралась, когда подступалась к дизайну интерфейсов и айдентике международного B2B-SaaS проекта в сфере Real Estate — Agently (formerly dscribe.ai): как с первых экранов и дизайн-принципов, так и задач по развитию системы компонентов.

Что такое дизайн-система и из чего она обычно состоит

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

Такой набор содержит дизайн-элементы, инструкции и правила (англ. guidelines; или гайдлайны), а также базовый комплект терминов важных тем, кто участвует в разработке и развитии продукта/бренда. В дизайн-системе есть и руководство по стилю (англ. style guide; гид по стилю или стайлгайд), а также библиотека шаблонов (англ. pattern library; или паттернов). А еще в ней подробно описаны ценности (shared values), а также устремления и все, на чем стоит вера команды (beliefs) — все, что влияет на внешний вид и продуманность продукта или бренда. Дизайн-система — единый центр знаний для команд, которые помогают двигать развитие продуктов и платформ, а также стремятся обеспечить исключительный пользовательский опыт для клиентов.

На технологическом уровне дизайн-системы (как коллекции компонентов и дизайн-элементов воплощенных в программно коде) удобно развивать и поддерживать с помощью встроенных средств онлайн-платформ класса Figma или вспомогательных инструментов заточенных на дизайн-системы, реализованные в коде (таких как Editor X’s).

В чем ценность дизайн-систем для бизнеса

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

Унификация (от. лат. unus «один» + facio «делаю»; «объединение») — приведение к единообразной системе или форме. Инженерная унификация направлена на сокращение многообразия. В России унификацией, как правило, считают «приведение к единообразию технических характеристик изделий, документации и средств общения (терминов, обозначений и другого)». Унификации изделий может предшествовать их типизация — выделение типовых изделий и типовых проектов. Подробнее →

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

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

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

Что включает современная дизайн-система

Дизайн-система обычно включает:

• Точку обзора (Overview). В этом разделе содержатся обзор системы проектирования, что особенно важно для более сложных систем. В нем можно найти свежие обновления системы, список принципов и ценностей, которые определяют, что означает хороший дизайн для организации.
• Принципы (Foundations). Это рекомендации по эстетике и стилю: подбор цветов, типографика, иконографика, фото и образы, звук, анимации.
• Компоненты (Components). Это библиотека элементов пользовательского интерфейса (reusable UI elements), воплощенных как визуально, так и в коде. Компоненты пользовательского интерфейса создаются на базе пользовательских исследований, тестирования производительности и оценки доступности. Компоненты сопровождает набор рекомендаций и демонстрации того, как и когда их следует использовать.
• Паттерны (Patterns). Это библиотека комбинаций компонентов. Шаблон объединяет элементы интерфейса друг с другом в интерфейс, предназначенный для решения типовых задач. В основе подхода лежит принцип атомарного дизайна.
• Руководство по стилю бренда (Brand guidelines). Классно, когда дизайн-система также включает также и рекомендации по бренд-айдентике, в которых развернуты доступным языком ценности бренда, идентичность, обещания бренда и демонстрация ценности бренда в мире.
• Ресурсы (Resources). Технический блок про инструменты и подключаемые модули, наборы пользовательского интерфейса, статьи и видеоуроки — все, что поможет работать с дизайн-системой для решения прикладных задач.

1. Российские дизайн-системы: VK, Sber (Nova, Plasma), Росатом, Контур, Тинькофф

Первым делом, если вы только начинаете работать с дизайн-системами, я всегда рекомендую заглянуть в КОД — каталог компонентных дизайн-систем проектов, реализованных на технологическом уровне (часть из них уже доступна в исходниках на github).

Как понять, что дизайн-система клевая для изучения на ресурсе КОД: 

1. ищем иконку котенка (исходники github — ваши программисты смогут попробовать ее в работе);
2. затем ищем иконку Figma (в Figma-файле обязательно ищите компоненты, а не просто гайды по стилю);
3. дополнительный критерий — сайт дизайн-системы с клевой подачей и подробной документацией.

2. Дизайн-система Google Material Design [веб и мобильные]

Что такое Google Material Design System и чем известна дизайн-система?

Google Material Design — это дизайн-язык, разработанный Google, с целью помочь продуктовым командам создавать высококлассные приложения для Android, iOS, Flutter и Web-приложений и онлайн-сервисов.

Material design — это гибкая система руководств создания digital-продуктов, компонентов и инструментов, оснащенная передовыми практиками проектирования пользовательских интерфейсов.  

Впервые Material Design представили на конференции Google I/O 25 июня 2014 года. Система интенсивно развивается, свежее обновление Material 3 вышло в 2022 году.

Философия дизайна Google Material Design

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

Даже движение в Google Material Design отражает смысл — движение фокусирует внимание и поддерживает непрерывность — поддерживает связь пользователя в потоке решения задачи.

Что входит в дизайн-систему Google Material Design и как она устроена 

• Лейаут (Layout)
• Цвет (Color)
• Типографика (Typography)
• Компоненты (Components)
• Темы (Material Theming)
• Исходники (Design Source Files)
• Мобильный гайдлайн (Mobile Guidelines)
• Быстрый старт (Starter Kits)
• Темная тема (Dakt Theme)

Для каких платформ, операционных систем и устройств полезна

Веб-приложения и онлайн-сервисы, iOS-приложения, приложение для Android. Ребята постарались сделать систему, которая поможет командам создавать приложения с высококлассным пользовательским опытом для широкого спектра платформа: Android, iOS, Flutter и Web).

В чем фишка дизайн-системы Google Material Design, и в отличие этой системы от остальных?

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

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

А еще заметно, что ребята в Google стремятся к максимальной персонализации приложений на уровне поведения и стиля: одним из таких решений является Material You.

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

• Скачать в Figma Community: Google Material Design System
• Исходники и компоненты в Figma на сайте дизайн-системы

3. Дизайн-система Apple Human Interface Guidelines [сквозной цифровой опыт: веб, desktop, мобильные, часы, TV]

Что такое Apple Human Interface Guidelines и чем известна дизайн-система?

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

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

С момента выпуска одного из своих первых продуктов, компьютера Mac в 1984 году, они сразу же вошли авангард стильных персональных компьютеров, изящных, минималистичных и простых в использовании.

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

Дональд Норман (род. 1935) — американский психолог, специалист в области психологии восприятия, памяти, внимания, познания, профессор Калифорнийского университета.

В 1993 году Норман присоединился к Apple Computer, сначала в качестве сотрудника Apple и архитектора пользовательского опыта (User Experience Architect ), а затем в качестве вице-президента группы передовых технологий (Vice President of the Advanced Technology Group).

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

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

Философия дизайна Apple

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

Понять философию дизайна Apple помогают дизайн-принципы, которые вкладывались под руководством Стива Джобса — они прошивают Apple Human Interface Guidelines от и до:

• Мастерство, прежде всего — скрупулезное внимание к деталям и точности;
• Эмпатия — процесс, который подчеркивает важность сонастройки на потребности пользователя и тесную связь с чувствами клиента;
• Сосредоточенность — устраните все неважные возможности;
• Вклад — люди формируют мнение о компании или продукте на основе сигналов, которые вложены в продукт осознанно и продукт их передает;
• Дружелюбность — признайте, что высокотехнологичные устройства могут быть дружелюбными и доступными и понравиться как начинающим, так и продвинутым пользователям;
• Поиск простоты для будущих решений в метафорах из прошлого — простота дизайна должна быть связана с тем, чтобы сделать продукты удобными для нас с вами в первую очередь.

Что входит в дизайн-систему Apple HIG и как она устроена 

Дизайн-система Apple содержит описание передовых практик, рекомендации и ресурсы для разработчиков, дизайнеров для macOS, iOS, watchOS, vOS:

• Платформы (Platforms)
• Основы (Foundations)
• Паттерны (Patterns)
• Компоненты (Components)
• Устройства ввода (Inputs)
• Технологии (Technologies)

Для каких платформ, операционных систем и устройств полезна

Платформы от Apple: macOS, iOS, watchOS и tvOS.

В чем фишка дизайн-системы Apple Human Interface Guidelines, и в чём отличие этой системы от остальных?

Дизайн-система Apple похожа на классный актуальный курс по UX: в ней собрана документация по всем ключевым поведенческим паттернам в digital: онбординг, обратная связь, Drag-and-drop, отмена действий и множество других базовых сценариев для каждого приложения — огромный пласт ценной информации о том, как обеспечить клевый UX/CX.

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

• Скачать в Figma Community (авторская сборка в Figma): iOS 16 UI Kit for Figma 
• Исходники и компоненты (Sketch/ Adobe XD) на сайте дизайн-системы

4. Дизайн-система Microsoft Fluent [корпоративные приложения (Enterprise)]

Что такое Microsoft Fluent и чем известна дизайн-система?

От создателей Windows, Office и Internet Explorer. Релиз Fluent 2017 год. Дизайн-система представляет собой набор UX-фреймворков и компонентов пользовательского интерфейса, реализованных в коде и с единым подходом к дизайну (проектирование, визуальный дизайн и поведенческие аспекты).

Fluent опирается на пять сенсорных элементов — свет, глубина, движение, материал и масштаб (light, depth, motion, material, and scale) — опираются на физический мир в качестве словаря. Fluent черпает вдохновение из физического мира и направляет создание максимально естественного опыта.

Fluent — это система дизайна с открытым исходным кодом.

Философия дизайна Microsoft Fluent

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

• Признаем существование исключений
• Решение для одного, распространяем на многих
• Учитываем тонкости разнообразия

Что входит в дизайн-систему Microsoft Fluent и как она устроена 

• Цвета (Colors)
• Высота (Elevation)
• Иконографика (Iconography)
• Компоновка (Layout)
• Движение (Motion)
• Типографика (Typography)
• Локализация (Localization)
• Темы (Theming)

Для каких платформ, операционных систем и устройств полезна

Fluent призван помочь создавать согласованные интерфейсы на разных платформах: Web, Windows, iOS, macOS, Android и множество других систем (Cross-platforms).

В чем фишка дизайн-системы Microsoft Fluent, и в чем отличие этой системы от остальных?

Ребята из Microsoft для веб- и desktop-интерфейсов поставили себе планку не уступать Apple HIG и Google Material Design System: в итоге получилась дизайн-система, готовая к управлению обилием деталей (которыми и богат Enterprise-сегмент) — именно этот рыночный и момент пользовательского опыта значительно отличает дизайн-систему Microsoft от Apple и Material Design. Microsoft в отличие от Apple и Google накопили огромный опыт по созданию интерфейсов для Enterprise-клиенто, они сразу росли в Enterprise — это многофункциональные приложения, с обилием различных опций и настроек.

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

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

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

• Скачать в Figma Community: Microsoft Fluent Design System
• Исходники и компоненты в Figma на сайте дизайн-системы

5. Дизайн-система Salesforce Lightning [системы управления ростом продаж (CRM)]

Что такое Salesforce Lightning и чем известна дизайн-система?

Salesforce — пионер в области облачного программного обеспечения CRM (cloud-based CRM software), среди клиентов которой более 150 000 компаний. Salesforce стремиться сделать клиентов максимально результативными в продажах, предоставляя персонализированный опыт клиентам с помощью CRM-технологий: автоматизация маркетинга, продаж, коммерции, сервиса, IT и много чего еще.

Система Salesforce Lightning Design System выведена в свет в 2015 году. Lightning Design System дает принципы и методы разработки корпоративных приложений в экосистеме Salesforce. Вместо того чтобы сосредотачиваться на пикселях, он помогает дизайнерам сосредоточиться на пользовательском опыте (user experience), взаимодействии (interactions) и потоках (flows), а разработчикам помогает сосредоточиться на логике приложения (application logic).

Именно Salesforce первой применила подход дизайн-токенов (design tokens) для кросс-платформенного дизайна: в токенах хранятся атрибуты визуального дизайна (например, цвет, размер шрифта, интервалы), которые можно применять и обновлять для разных компонентов и платформ. Токены помогают не кодировать жестко отдельные значения по мере развития визуального дизайна и гарантируют, что изменения отразятся на всем опыте работы с продуктом. Т.е с помощью токенов можно добиться согласованной визуальной системы, которую намного проще масштабировать.

Философия дизайна Salesforce Lightning

В основе философии Salesforce — клиент. Развитие инструментов направлено на построение отношений с клиентами и раскрытие потенциала (а для этого требуется глубокое понимание потребностей клиентов):

• Ясность (Clarity). Устраняйте двусмысленность. Помогите людям разглядеть возможности, разобраться в ситуации и выработать план для уверенных действий.
• Эффективность (Efficiency). Создавайте бесперебойные и автоматизированные процессы. Предугадывайте будущее и помогайте людям делать их работу лучше, результативнее и быстрее.
• Последовательность (Consistency). Развивайте единый пользовательский опыт, чтобы все было максимально знакомым и интуитивно понятным.
• Выверенность (Beauty). Создавайте продуманные в мелочах дизайн-решения, которые помогают клиентам элегантно справляться с новыми вызовами.

Что входит в дизайн-систему Salesforce Lightning и как она устроена 

• Платформы (Platforms)
• Рекомендации по проектированию и дизайну (Design Guidelines)
• Доступность (Accessibility)
• Компоненты (их много!) (Components)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы Salesforce Lightning Design System, и в чём отличие этой системы от остальных?

Дизайн-система SalesForce заточена на коммерческие процессы c AI под капотом: потоки вокруг продаж, макркетинга, контента, аналитики и отчетности — это один из первопроходцев в данном направлении.

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

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

• Скачать в Figma Community: Salesforce Lightning Design System
• Исходники и компоненты (Sketch) на сайте дизайн-системы

6. Дизайн-система Atlassian Design System [системы проектного управления и управления командами]

Что такое Atlassian Design System и чем известна дизайн-система?

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

Новая дизайн-система Atlassian представляет собой комбинацию двух предыдущих (Atlassian Design Guidelines и Atlaskit). Теперь у нас одна точка для доступа к гайдлайнам для этой экосистемы.

Философия дизайна Atlassian Design

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

В Atlassian считают, что цифровые технологии могут раскрыть потенциал любой команды. Кредо Atlassian —  помогать людям и командам быть более эффективными. Вот их принципы:

• Соответствуйте ожиданиям людей и стремитесь укреплять доверие при каждом взаимодействии;
• Ищите способы объединения людей вокруг общих целей, повышайте интенсивность сотрудничества и помогайте сделать вклад;
• Создавайте дизайн решения вдумчиво с учетом целей, а не просто следуя шаблону;
• Выкладывайтесь от начала и до конца: продумывайте достижение целей, двигайтесь поэтапно и небольшими шагами, отмечайте прогресс и прогнозируйте следующий шаг;
• Помогайте сосредоточиться на работе, а также направляйте так, чтобы каждый мог раскрыться и вложить больше ценности

Что входит в дизайн-систему Atlassian Design System и как она устроена 

• Рекомендации по бренд-айдентике (Brand guidelines)
• Принципы дизайна и проектирования (Design Principles)
• Иллюстрация (Illustration)
• Продукт (Product)
• Прерсонализация (Personality)
• Создание прототипов (Prototyping)
• Маркетинг (Marketing)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы Atlassian Design System, и в чём отличие этой системы от остальных?

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

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

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

• Скачать в Figma Community: Atlassian Design System
• Исходники и компоненты в Figma на сайте дизайн-системы

7. Дизайн-система IBM Carbon Design System

Что такое IBM Carbon Design System и чем известна дизайн-система?

Сейчас IBM один из крупнейших поставщиков решений для Enterprise клиентов (large enterprise IT needs). У IBM большая история в цифровизации и повышении результативности предприятий с помощью технологий: ребята стремятся быть на каждом участке производственной цепочки — от бизнес-консалтинга до услуг по разработке программного обеспечения, ИТ-хостинга и управления, программных продуктов и оборудования (серверы, мэйнфреймы, хранилища) и даже финансирование. 

Выручка IBM от продаж в России в 2021 году составила $300 млн (22,1 млрд руб.). Совокупная выручка IBM по миру в 2021 г. составила более $57 млрд. Для справки — выручка Microsoft на 2021 год по миру составила $52 млрд — IBM такой же значимый игрок для изучения дизайн-систем как и Microsoft, пригодится для изучения, если вы создаете Enterprise-решения.

Среди крупнейших клиентов IBM в 2021 году — РЖД, Сбербанк, «Почта России», Газпромбанк, «Аэрофлот», «Норникель».

IBM Carbon Design System — это дизайн-система с открытым исходным кодом (open-source) для развития всех digital-продуктов IBM. Система состоит из руководств по пользовательскому интерфейсу, рабочего кода и ресурсов для проектирования и подключена к сообществу участников. Carbon направлена на улучшение единства и качества пользовательского интерфейса с помощью четких и доступных рекомендаций по лучшим практикам проектирования и разработки.

Подход к развитию системы с позиции Open Source помог правильно подойти к проработке стандартов и документации, здесь вы найдете и все о том, как развивать компоненты и шаблоны, сообщать о недочетах (issues) или предоставлять общую обратную связь через сообщество GitHub (GitHub community).

Философия дизайна IBM Carbon

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

Что входит в дизайн-систему IBM Carbon и как она устроена 

Инструменты Carbon включают файлы дизайна для Sketch, Axure и Adobe XD, а также ресурсы для разработчиков.

• Уроки (Tutorials)
• Методические рекомендации (Guidelines)
• Компоненты (Components)
• Паттерны (Patterns)
• Визуализация данных (Data Visualization)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы IBM Carbon Design System, и в чём отличие этой системы от остальных?

Если вы создаете корпоративные системы или крупномасштабные корпоративные продукты (внутри или вне компании), Carbon — отличный пример того, как это можно сделать хорошо.

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

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

• Скачать в Figma Community: IBM Carbon Design System
• Исходники и компоненты в Figma на сайте дизайн-системы

8. Дизайн-система Mailchimp Design System

Что такое Mailchimp Design System и чем известна дизайн-система?

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

Mailchimp — это платформа автоматизации маркетинга и сервис email-маркетинга. В 2018 году Mailchimp обновила свой бренд, сделав его смелее и выразительнее: за основу взяли искрометный юмор и игривые иллюстрации. И даже их система дизайна вовсю впитала эту красочную индивидуальность (colorful identity).

Система дизайна состоит из двух разделов: основы (foundations) и компоненты (components). А еще там есть дельный раздел визуализации данных, предлагающий подробные рекомендации о том, как рассказать четкую и убедительную историю на основе данных. Рекомендации также включают работу с цветом для обеспечения визуальной гармонии, согласованности, предсказуемости и доступности. А еще здесь содержатся рекомендации о том, как можно использовать цвет, формы и интервалы для передачи данных понятным и соответствующим бренду способом.

Философия дизайна Mailchimp Design

Философию дизайна Mailchimp классно раскрыли ребята в Collins: Mailchimp продемонстрировал предпринимателям, что вывод бизнеса на новый уровень — это не безликая шаблонизация и автоматизация — а путь роста с учетом уникальных характерных свойств конкретной компании.

Mailchimp стремится помочь компаниям расти, оставаясь при этом верными себе. Дизайн-система воплощает в себе то, что важно и для команды Mailchimp — преданность делу, любовь к творческому самовыражению и одержимость качеством.

Что входит в дизайн-систему Mailchimp Design System и как она устроена 

• Цвет (Color)
• Визуализация данных (Data Visualization)
• Система сеток (Grid System)
• Типографика (Typography)
• Компоненты (Components)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы Mailchimp Design, и в чём отличие этой системы от остальных?

Если вы работаете над проектом в области email-маркетинга, развития онлайн-бизнеса, стратегии или рекламы, то в Mailchimp вы найдете множество примеров того, как сделать это хорошо и при этом даже с самобытностью, самовыражением и творческими аспектами. Ребятам в Mailchimp удалось реализовать множество сложных вещей вокруг автоматизации онлайн-бизнеса ясными и доходчивыми дизайн-решениями (интуитивно понятный UX). Обратите также пристальное внимание на рекомендации по сторителлингу на основе данных.

9. Дизайн-система Uber Design System

Что такое Uber Design System и чем известна дизайн-система?

Uber — это сервис по вызову такси, часть гиг-экономики (обслуживает как пассажиров, так и фрилансеров). Экосистема Uber включает сервис поездок, вызов службы доставки, доставку еды (Uber Eats) и систему микромобилей с электрическими велосипедами и скутерами.

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

В дополнение к своим визуальным и стилевым рекомендациям Uber также создала Base Web, библиотеку компонентов пользовательского интерфейса с открытым исходным кодом, которые фокусируются на основах (отсюда и название “Базовый”), таких как типографиrf, цвет, сетка и иконография, а также на таких важных элементах, как кнопки, списки, и элементы управления. Хотя эти компоненты разработаны как базовые строительные блоки, они также легко настраиваются с помощью переопределений стилей и могут быть сконфигурированы множеством различных способов.

Философия дизайна Uber Design

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

Кредо Uber: «Подсвечивать возможности и приводить мир в движение».

Что входит в дизайн-систему Uber Design System и как она устроена 

• Логотип (Logo)
• Архитектура бренда (Brand Architecture)
• Цвет (Color)
• Композиция (Composition)
• Иконографика (Iconography)
• Иллюстрация (Illustration)
• Движение (Motion)
• Фотография (Photography)
• Тон коммуникации (Tone of voice)
• Типография (Typography)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы Uber Design System, и в чём отличие этой системы от остальных?

Если вы работаете в сфере путешествий или перевозок, гиг-экономики или космоса; Будь то скутер, почтовый голубь или скоростной поезд, Uber — удивительный пример того, как решать проблемы, связанные с перемещением из точки А куда угодно.

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

• Скачать в Figma Community: Uber Design System
• Исходники и компоненты в Figma на сайте дизайн-системы

10. Дизайн-система Help Scout Design System

Что такое Help Scout Design System и чем известна дизайн-система?

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

Help Scout Design System (HSDS) — это система дизайна, которая помогает создавать консистентный и последовательный пользовательский опыт для всех, кто взаимодействует с продуктами Help Scout.

У Help Scout распределенная команда дизайнеров и поэтому и ребятам особенно важно развивать единый свод принципов дизайна.

Философия дизайна Help Scout

Бренд Help Scout призван не только очеловечивать продукт и строить отношения с клиентами. Отличные продукты радуют людей, никогда не мешая им и не отвлекая от их цели.

Взгляните на основополагающие ценности бренда Help Scout:

• Ценности бренда (Brand Values). Все в Help Scout начинается с ценностей. Эти ценности бренда проникают во все, что мы проектируем, пишем, программируем и создаем любым образом. Это то, что делает нас... нами. И это то, что, как мы надеемся, люди прочувствуют, взаимодействуя с брендом.
• Полезный (Helpful). Это также одна из наших основных ценностей. Полезность означает, что все дело в другом человеке. Речь идет не о том, чтобы быть чрезмерно дружелюбным, а о том, чтобы дать людям то, что им нужно в данный момент, чтобы они могли сделать следующий шаг. Речь идет о том, чтобы дать людям знать, что вы рядом, но не мешаете.
• Надежный (Trustworthy). Бизнес — это не бизнес без клиентов, и мы знаем, что доверять программному обеспечению для управления этими отношениями может быть сложно. Очень важно, чтобы контент, который мы создаем, и продукты, которые мы производим, укрепляли доверие не только между нами, но и между вами и вашими клиентами.
• Человек и органичность (Human & Organic). Мы делаем Help Scout, чтобы объединять людей и помогать компаниям строить лучшие отношения со своими клиентами. Мы подходим к Help Scout не как к закрытой системе. Мы хотим, чтобы Help Scout ощущал себя доступным, полным индивидуальности и всегда развивался, чтобы лучше общаться с людьми.
• Энергичный (Energetic). Давайте будем честными — обслуживание клиентов — тяжелая работа! Мы стремимся привнести в людей энергию, которая вдохновляет и воодушевляет — возможно, мы даже время от времени рассказываем анекдот или два. Это небольшой способ помочь нашим клиентам оставаться на высоте и преодолевать трудности.
• Любопытный (Curious). Мы играем, изучаем новые идеи и экспериментируем, не опасаясь неудачи. Мы доверяем нашей команде делать то, что правильно для наших клиентов и друг друга. Руководствуясь добрыми намерениями и целеустремленностью, мы раздвигаем границы, не воспринимая себя слишком серьезно.

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

«Дизайн-система — это набор правил, а правила и креативность не исключают друг друга. Правила можно нарушать».

— Мина Маркхэм — инженер. дизайнер. писатель. спикер.

Принципы продуктового дизайна Help Scout (Product Design Principles):

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

• Помогите клиентам обеспечить лучшую поддержку (Help customers provide better support). Дайте клиентам возможность оказывать полезную, актуальную, контекстную и диалоговую поддержку. Наша платформа должна дать пользователям дополнительное измерение в их разговорах, как сверхспособность, которая поможет им полностью понять, о чем спрашивает их клиент, и предоставить ответы мирового класса (world-class responses).
• Полезно, с подмигиванием (Helpful, with a wink). Передайте человеческую и природную энергию, добавляйте неожиданное, восхитительное и небрежно странное. Наши продукты предоставляют важную услугу, поэтому функциональность имеет первостепенное значение, но мы помним, что реальные люди проводят весь свой рабочий день, взаимодействуя с нашим программным обеспечением. Мы хотим вознаграждать, радовать и поддерживать их, когда это уместно.
• Баланс очевидный, легкий и возможный (Balance obvious, easy and possible). Для создания инструмента, полезного как для начинающих, так и для профессиональных пользователей, требуются различные подходы. Мы стремимся сделать расширенные функциональные возможности менее заметными, а основные пути нашего продукта более понятными и понятными для всех.
• Укрепляйте человеческие связи (Strengthen human connections). Свяжите функции и взаимодействия с человечностью, стоящей за инструментами — с людьми, которым оказывается поддержка, и с людьми, оказывающими эту поддержку. Мы несем ответственность за посредничество в реальных человеческих связях и мы стремимся быть чем-то большим, чем система назначения талонов (тикетов). Мы работаем над тем, чтобы укреплять человеческие связи: поощряем естественный язык и отказ от заготовленных шаблонных ответов, стремимся соответствовать ожиданиям и не в нашем вкусе машинно-ориентированная коммуникация.

Что входит в дизайн-систему Help Scout Design System и как она устроена 

Система Help Scout небольшая, при этом прекрасно продумана и состоит из 3-х основных разделов:

• Visual Elements (Визуальные элементы)
• Content Style (Стиль контента)
• Product Design (Дизайн продукта)

Для каких платформ, операционных систем и устройств полезна

Web

В чем фишка дизайн-системы Help Scout, и в чём отличие этой системы от остальных?

Классный источник, если вы создаете системы поддержки, работы с заявками, базами знаний и FAQ, вики и форумами поддержки.

11. Дизайн-система Shopify: Polaris

Что такое Shopify Polaris и чем известен?

Shopify — это платформа для онлайн-продаж (e-commerce platform), когда у вас свой бизнес. Сейчас Shopify обслуживает более 1 000 000 предприятий по всему миру.

Polaris — это система дизайна для администратора платформы Shopify. Это язык дизайна, который определяет, как в Shopify следует создавать высококачественный опыт для онлайн-продаж.

Система управления онлайн-продажами включает устанавливаемые приложения (installable apps), которые распространяются через Shopify App Store. Они позволяют продавцам добавлять функциональные возможности в свои магазины.

Философия дизайна Shopify Polaris

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

• Внимательность (Considerate) — прежде всего мы заботимся о людях, которые используют наши инструменты и продукты;
• Расширение возможностей (Empowering) — Мы хотим, чтобы люди чувствовали, что они могут добиться всего, что пытаются сделать;
• Выверенность (Crafted) — Пользователь Shopify должен чувствовать, что все сделано на высочайшим уровнем мастерства;
• Эффективность (Efficient) — Shopify важно помогать людям достигать своих целей быстро, результативно и с меньшими усилиями.
• Надежность (Trustworthy) — идет постоянная работа над перезарядкой батарей доверия пользователей.
• Привычность (Familiar) —  важно, чтобы люди чувствовали себя комфортно, при работе с продуктами, независимо от того, используют ли они их впервые или уже в сотый раз.

Среди принципов дизайн-системы Shopify особенно интересны следующие:

• Доступность (Accessibility). Делать коммерцию лучше для всех — это значит серьезно заботиться о производстве качественных продуктов. Качественный продукт должен обладать фантастическим пользовательским опытом (UX).
• Локализация валют (Formatting localized currency). Валюты имеют разный формат в разных странах и на разных языках.
• Информационная архитектура (Information architecture). Все, что мы создаем в Shopify, основано на информационной архитектуре. Если вы дизайнер, контент-стратег или UX-разработчик, вы уже занимаетесь IA.
• Интернационализация (Internationalization). Сделайте коммерцию лучше для всех, создав интерфейсы, которые будут работать везде. Эти рекомендации помогут вам проектировать, писать и создавать продукты, которые можно использовать в любой части мира.
• Ценность Shopify (Shopify experience values). В Shopify мы расширяем возможности торговли в глобальном масштабе. Мы создаем продукты, инструменты и услуги, чтобы люди могли запускать, управлять и масштабировать бизнес. Мы берем на себя огромные сложности, как и любые коммерческие гиганты и повышаем шансы новичков на успех.

Что входит в дизайн-систему Shopify Polaris и как она устроена 

• Цвета (Colors)
• Доступность (Accessibility)
• Ресурсы (Resources)
• Типографика (Typography)
• Иллюстрации (Illustrations)
• Звуки (Sounds)
• Значки (Icons)
• Состояния взаимодействия (Interaction states)
• Интервалы (Spacing)
• Визуализация данных (Data visualizations)

Для каких платформ, операционных систем и устройств полезна

Web, iOS, Android

В чем фишка дизайн-системы Shopify Polaris, и в чём отличие этой системы от остальных?

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

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

Скачать в Figma Community: Shopify Design System

Что еще почитать на тему дизайн-систем и развития программных продуктов

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

• Ментальные модели в проектировании и дизайне интерфейсов продукта (UX/UI) →
• Обзор 19 лучших источников UI Kits и библиотек для вашего проекта →
• Обзор 20 методов UX-исследований от NNGroup: какой метод выбрать и когда →
• Бесплатный онлайн-курс «Дизайн-системы. Погружение» →

Вывод и рекомендация

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