Самые популярные дизайн-системы, на которых стоит учиться UX-дизайнерам в 2022 году


13.07.2022 Время чтения - 3 минуты 2745

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

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

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

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

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

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

«Полный набор стандартов проектирования, документации и принципов, а также набор инструментов (UI-шаблоны и компоненты кода) для достижения этих стандартов». 

Источник: uxpin.com

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

Источник: medium.muz.li

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

1. Material Design

Это просто клад для простых, элегантных шаблонов дизайна и руководств по стилю. Разработано Google.

https://material.io/

2. Fluent Design System

Дизайна-система Fluent, разработанная Microsoft.

https://www.microsoft.com/design/fluent/#/

3. Atlassian

Язык дизайна для создания простых, интуитивно понятных и красивых интерфейсов.

https://www.atlassian.com/

4. Polaris

Полярис от Shopify. Он объединяет рабочий процесс дизайнера и разработчика.

https://polaris.shopify.com/

5. Human Interface Guidelines

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

https://developer.apple.com/design/human-interface-guidelines/

6. Дизайн-система Carbon

Carbon — это система проектирования IBM с открытым исходным кодом для продуктов и цифрового опыта.

https://www.carbondesignsystem.com/

7. Mailchimp

Забавная и яркая дизайн-система Mailchimp.

https://ux.mailchimp.com/

8. Ауди

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

https://www.audi.com/ci/en/guides/user-interface/introduction.html#

9. Дизайн-система Airbnb

Разработано и поддерживается Airbnb.

https://airbnb.design/

10. Дизайн-система Lightning

Готовые к использованию HTML- и CSS-элементы пользовательского интерфейса обеспечивают основу для разработки Salesforce.

https://www.lightningdesignsystem.com/

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