book-open 1 test
UI-дизайн

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

Изучила десяток дизайн-систем и собрала руководство, которое помогает перенять подходы по развитию приложений и сервисов. В подборке примеры дизайн-систем как популярных (широкого профиля), так и для отдельных отраслей и направлений бизнеса. Обратите внимание на блоки о практичной фишке и философии у каждой дизайн-системы — помогают сделать проекты лучше.
Иллюстрация Matt Chinworth: http://www.chinworthillustration.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 и как она устроена 

Пример раздела из Google Material Design

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

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

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

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

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

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

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

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

Apple Human Interface Guidelines

Что такое 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:

Разделы в Apple Human Interface Guidelines

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

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

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

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

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

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

Microsoft Fluent Design System

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

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

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

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

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

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

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

Пример раздела из Microsoft Fluent Design

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

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?

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

Salesforce Lightning Design System

Что такое 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 — клиент. Развитие инструментов направлено на построение отношений с клиентами и раскрытие потенциала (а для этого требуется глубокое понимание потребностей клиентов):

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

Пример раздела из Salesforce Lightning

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

Web, iOS, Android

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

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

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

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

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

Atlassian Design System

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

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

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

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

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

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

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

Пример раздела из Atlassian Design System

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

Web, iOS, Android

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

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

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

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

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

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, а также ресурсы для разработчиков.

Пример раздела из IBM Carbon

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

Web, iOS, Android

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

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

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

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

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

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 и как она устроена 

Пример раздела из Mailchimp Design System

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

Web, iOS, Android

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

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

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

Uber Design System

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

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

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

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

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

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

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

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

Пример раздела из Uber Design System

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

Web, iOS, Android

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

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

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

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

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:

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

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

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

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

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

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

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

Пример руководств из Help Scout Design System

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

Web

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

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

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

Polaris Design System

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

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

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

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

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

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

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

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

Пример раздела из Polaris Design System

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

Web, iOS, Android

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

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

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

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

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

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

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

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