Список лучших систем, созданных и поддерживаемых компаниями с передовым опытом в отрасли, которые вы можете использовать, чтобы учиться и вдохновляться своими проектами.
За последние несколько лет масштабы и скорость проектирования интерфейса значительно выросли. Существуют миллионы веб-приложений и мобильных приложений, и эти миллионы веб-сайтов или приложений могут иметь сотни и тысячи экранов. Нам нужны дизайн-системы для масштабного управления дизайном и оптимизации процесса.
В этой статье я хочу начать диалог о дизайн-системах. Поскольку компании во всем мире продолжают инвестировать в цифровую трансформацию, они обнаруживают, что им необходимо сократить время, необходимое для создания новых продуктов. Дизайн-система — это один из таких ресурсов, который поможет вам сделать это эффективно в нескольких точках взаимодействия. Итак, без дальнейших промедлений, давайте быстро погрузимся в это.
Что такое дизайн-система?
Работая над этой статьей, я искал точное и простое определение, но в Интернете есть лишь несколько расплывчатых концепций. Кажется, это зависит от того, кого вы спрашиваете.
Ниже приведены два определения, которые я считаю наиболее подходящими:
«Полный набор стандартов проектирования, документации и принципов, а также набор инструментов (шаблоны пользовательского интерфейса и компоненты кода) для достижения этих стандартов». (источник: uxpin.com)«Системы дизайна — это, по сути, наборы правил, ограничений в принципах, реализованных в дизайне и коде. Эти три атрибута выполняют разные функции и обеспечивают согласованную систему системного порядка в системах от кнопок до одностраничных приложений». (источник: medium.muz.li)
Таким образом, дизайн-система — это набор стандартов для управления дизайном в масштабе за счет уменьшения избыточности и поддержания согласованности.
1. Материальный дизайн
Это сундук с сокровищами для простых, элегантных шаблонов дизайна и руководств по стилю. Разработано Google.
2. Система свободного дизайна
Microsoft разработала систему дизайна Fluent.
3. Атласиан
Язык дизайна для создания простых, интуитивно понятных и красивых интерфейсов.
4. Полярис
Полярис от Shopify. Он объединяет рабочий процесс дизайнера и разработчика.
5. Руководство по человеческому интерфейсу
Получите подробную информацию и ресурсы пользовательского интерфейса для разработки отличных приложений, которые легко интегрируются с платформами Apple.
6. Система углеродного дизайна
Carbon — это система проектирования IBM с открытым исходным кодом для продуктов и цифрового опыта.
7. Мейлчимп
Дизайн-система Mailchimp игривая и выразительная
8. Ауди
Пользовательские интерфейсы для Audi.
9. Система дизайна Airbnb
Разработано и поддерживается Airbnb.
10. Система молниезащиты
Готовые к использованию HTML- и CSS-элементы пользовательского интерфейса обеспечивают основу для разработки Salesforce.
Какие уроки вы можете извлечь из этого? Предположим, вы разрабатываете сайт электронной коммерции с выпадающим меню для категорий. Не знаете, какого размера должна быть стрелка раскрывающегося списка или как далеко от текста она должна располагаться? Вы можете узнать, как это сделать, взглянув на новаторскую систему покупок, такую как Shopify!