UXPUB

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

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

Зареєструватися Увійти
Cover image for 10 найпопулярніших дизайн-систем для UX-дизайнерів у 2022 році
Xperience
Xperience

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

10 найпопулярніших дизайн-систем для UX-дизайнерів у 2022 році

Список найкращих дизайн-систем, створених і обслуговуваних компаніями з передовим досвідом у галузі, які ви можете використовувати, щоб вчитися та надихатися для ваших проєктів.


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

У цій статті я хочу розпочати діалог про дизайн-системи. Оскільки компанії по всьому світу продовжують інвестувати в цифрову трансформацію, вони виявляють, що їм потрібно скоротити час, необхідний для створення нових продуктів. Дизайн-система — це один із таких ресурсів, який допомагає вам ефективно це робити в багатьох точках взаємодії. Тож, не зволікаючи, давайте швидко зануримося в них.

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

Досліджуючи цю статтю, я шукав точне та зрозуміле визначення, але в Інтернеті витають лише деякі розпливчасті поняття. Здається, це залежить від того, кого ви запитуєте.

Нижче наведено два визначення, які, на мою думку, є найбільш слушними:

«Повний набір стандартів проектування, документації та принципів, разом із набором інструментів (шаблони інтерфейсу користувача та компоненти коду) для досягнення цих стандартів». (джерело: uxpin.com)

«Дизайн-системи — це, по суті, набори правил, обмежені принципами, та реалізовані у дизайні та коді. Ці атрибути виконують різні функції та забезпечують цілісну систематизацію в узгодженому порядку від кнопок до сторінок». (джерело: medium.muz.li)

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

1. Material Design

Це скарбниця для простих, елегантних шаблонів дизайну та стайл-гайдів. Розроблено Google.

Material Design

https://material.io

2. Fluent Design System

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

Fluent Design System

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

3. Atlassian

Мова дизайну для створення простого, інтуїтивно зрозумілого і красивого досвіду.

Atlassian

https://www.atlassian.com

4. Polaris

Polaris від Shopify. Об’єднує робочий процес дизайнера та розробника.
Polaris

https://polaris.shopify.com/

5. Human Interface Guidelines

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

Human Interface Guidelines

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

6. Carbon Design System

Carbon — це система розробки IBM із відкритим вихідним кодом для продуктів і цифрового досвіду

Carbon Design System

https://www.carbondesignsystem.com/

7. Mailchimp

Система дизайну Mailchimp грайлива та експресивна
Mailchimp

https://ux.mailchimp.com/

8. Audi

Інтерфейс користувача для Audi.

Audi

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

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

Розроблено та підтримується Airbnb.

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

https://airbnb.design/

10. Lightning Design System

Готові до використання елементи інтерфейсу користувача HTML і CSS створені для розробки Salesforce.

Lightning Design System

https://www.lightningdesignsystem.com/

Які уроки ви можете винести з цього? Припустімо, що ви розробляєте сайт електронної комерції з меню для категорій. Не знаєте, якого розміру має бути стрілка меню чи як далеко від тексту слід розмістити? Ви можете дізнатися, як це зробити, подивившись на новаторську систему покупок, таку як Shopify!

Переклад uxplanet.org

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

Згорнути/розгорнути
shelest profile image
shelest • Змінено on

чому постійно посилання на звичайний дизай-блог компанії airbnb.design/ подають як посилання на дизайн систему?