UXPUB

UXPUB - спільнота з 4,132 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for 50 примеров дизайн-систем для вдохновения
Редакція
Редакція

Опубліковано

50 примеров дизайн-систем для вдохновения

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

Но сначала давайте разберемся с основами дизайн-систем…

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

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

Подробнее об основах дизайн-систем (от NN Group) читайте ниже.

Design Systems 101

Какова общая структура дизайн-системы?

Обычно дизайн-системы делятся на шесть элементов:

  1. Обзор: Здесь упоминаются обновления в виде журналов, принципы, лежащие в основе структуры дизайн-системы, и общие ценности.
  2. Основы: Охватывают основные компоненты, такие как цвет, типографика, иконография, изображения, звук, движение и многое другое.
  3. Компоненты: библиотека повторно используемых компонентов интерфейса с набором правил или рекомендаций, как и когда их следует использовать.
  4. Паттерны дизайна: Паттерны– это передовые методы организации компонентов, решающих проблемы пользователей.
  5. Контент:рекомендации по голосу и тону сообщений включают в себя список слов и то, как их следует или не следует использовать.
  6. Руководство по бренду: это руководство включает в себя ценности бренда, индивидуальность бренда и демонстрацию параметров его использования.

Чему можно научиться у дизайн-систем?

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

Зачем компании создают дизайн-системы?

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

Дизайн-системы помогают получить максимальную отдачу от команды. В конце концов, команда получит…

  • Более быстрый процесс проектирования
  • Лучшее сотрудничество между отделами
  • Более высокое качество продукции
  • Четкие рекомендации бренда

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

Как внедряются дизайн-системы?

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

Авторитетные дизайн-системы

К ним относятся Material Design и Human Interface Guidelines. Во многих отношениях они определили внешний вид дизайн-систем, когда цифровые мобильные операционные системы впервые появились на смартфонах. Благодаря им дизайнеры узнали много полезных методов проектирования, и они до сих пор остаются золотым стандартом дизайн-систем.

1. Material Design от Google

Material You от Google

Material Design 3.0 и 2.0 от Google — это единая дизайн-система, которая сочетает в себе теорию, ресурсы и инструменты для создания цифрового опыта на Android-смартфонах.

2. Human Interface Guidelines от Apple

Human Interface Guidelines от Apple

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

Известные системы дизайна

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

Дизайн-система от Atlassian

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

4. Дизайн-система Pajamas от GitLab

Дизайн-система Pajamas от GitLab

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

5. Дизайна-система Photon от Mozilla Firefox

Дизайна-система Photon от Mozilla Firefox

Photon — это язык дизайна Firefox, который позволяет создавать современный, простой и привлекательный опыт на всех платформах, от мобильных и десктопных до телевизоров.

6. Паттерны Mailchimp

Библиотека паттернов MailChimp является результатом перехода компании на более гибкое, элегантное и удобное программное обеспечение.

7. Единая система дизайна HUDL

Единая система дизайна HUDL

Сочетание дизайна и кодинга создали систему, объединяющую продукты Hudl.

8. Thumbtack Thumbprint

Thumbtack Thumbprint

Thumbprint — это живая система, которая использует консолидацию, стандартизацию и документацию для оптимизации проектирования и разработки.

9. Rizzo Style от Lonely Planet

Rizzo Styleguide от Lonely Planet

Rizzo был создан с упором на снижение сложности и повышение возможности повторного использования.

10. Язык дизайна Carbon от IBM

Язык дизайна Carbon от IBM

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

11. Stacks от Stack Overflow

Stacks от Stack Overflow

Stacks предоставляет вам все необходимое для последовательного и согласованного взаимодействия со Stack Overflow, включая продукт и электронную почту.

12. Пользовательский интерфейс Audi

Пользовательский интерфейс Audi

Целью интерфейса Audi является разработка разнообразных решений и хорошо сбалансированного общесистемного пользовательского опыта, от приложения до автомобиля.

13. Global Experience Language (GEL) от BBC

Global Experience Language (GEL) от BBC

Общий фреймворк дизайна BBC, GEL, позволяет нам создавать согласованный и приятный пользовательский опыт во всех цифровых сервисах.

14. Дизайн-система Canvas от HubSpot

Дизайн-система Canvas от HubSpot

Эта коллекция иллюстрирует компоненты дизайн-системы Hubspot, от цветов и типографики до функций на основе React, и инструментов визуализации данных.

15. Ant Design от Ant Finances

Ant Design от Ant Finances

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

16. Polaris от Shopify

Polaris от Shopify

Дизайна-система Polaris помогает всем продавцам Shopify сотрудничать, чтобы создать выдающийся опыт.

17. Дизайн-система Grommet от Hewlett Packard

Дизайн-система Grommet от Hewlett Packard

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

18. Styleguide от Marvel

Styleguide от Marvel

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

19. Garden от Zendesk

Garden от Zendesk

Garden — это выбранная компанией коллекция элементов интерфейса. Zendesk обычно «выращивает» компоненты интерфейса для продуктов Zen в «саду».

20. Дизайн-система Lightning от Salesforce

Дизайн-система Lightning от Salesforce

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

Хорошо проработанные дизайн-системы

  1. Asphalt от Gojek
  2. Orbit от Kiwi
  3. Microsoft’s Office UI Fabric
  4. PatternFly от Redhat
  5. Pega Cosmos от PegaSystem
  6. Дизайн-система австралийского правительства
  7. Protocol от Mozilla
  8. Дизайн-система Quickbooks
  9. Vanilla от Ubuntu
  10. Canvas от Workday
  11. Styleguide от Yelp
  12. Дизайн-система Airbnb
  13. Spectrum от Adobe
  14. Lexicon от Liferay
  15. Fluent от Microsoft
  16. Solid от BuzzFeed
  17. Buffer Styleguide
  18. Base Web от Uber

Достойны упоминания

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


Перевод статьи blog.prototypr.io

Обговорення (0)