Сегодня каждая компания, с которой я общаюсь, хочет внедрить дизайн-систему с нуля. К сожалению, детали дизайн-системы не изучаются, поэтому зачастую они не используются по максимуму для создания полезного пользовательского опыта. Новые дизайнеры могут ознакомиться с любым из перечисленных ниже паттернов проектирования, чтобы изучить передовой опыт и принять обоснованные дизайн-решения в своих проектах.
Но сначала давайте разберемся с основами дизайн-систем…
Что такое дизайн-системы?
Дизайна-система — это набор стандартов, используемых для управления дизайном в масштабе и уменьшения избыточности путем создания общего языка и визуальной согласованности на разных уровнях.
Какова общая структура дизайн-системы?
Обычно дизайн-системы делятся на шесть элементов:
- Обзор: Здесь упоминаются обновления в виде журналов, принципы, лежащие в основе структуры дизайн-системы, и общие ценности.
- Основы: Охватывают основные компоненты, такие как цвет, типографика, иконография, изображения, звук, движение и многое другое.
- Компоненты: библиотека повторно используемых компонентов интерфейса с набором правил или рекомендаций, как и когда их следует использовать.
- Паттерны дизайна: Паттерны– это передовые методы организации компонентов, решающих проблемы пользователей.
- Контент:рекомендации по голосу и тону сообщений включают в себя список слов и то, как их следует или не следует использовать.
- Руководство по бренду: это руководство включает в себя ценности бренда, индивидуальность бренда и демонстрацию параметров его использования.
Чему можно научиться у дизайн-систем?
Хотя дизайн-системы следуют общим передовым методам UI-дизайна, они имеют ценный набор пользовательских паттернов, таких как типографика, цвет, формы, баннеры, основы документации и т. д. Новичок в дизайн-системах может учиться с самого начала.
Зачем компании создают дизайн-системы?
Дизайн-системы создаются, чтобы получить единый источник правды для всей команды разработчиков, дизайнеров и продакт-менеджеров. Кроме того, она позволяет им сохранять последовательность и единообразие в своей работе, при этом все остаются на одной волне.
Дизайн-системы помогают получить максимальную отдачу от команды. В конце концов, команда получит…
- Более быстрый процесс проектирования
- Лучшее сотрудничество между отделами
- Более высокое качество продукции
- Четкие рекомендации бренда
Поскольку дизайн-система представляет собой коллекцию многократно используемых компонентов, построенную на основе правил использования, она не эквивалентна руководству по стилю или библиотеке паттернов.
Как внедряются дизайн-системы?
Разработчики кодят дизайн-системы как повторно используемые компоненты или библиотеки, чтобы им не приходилось тратить время на многократный кодинг одних и тех же фрагментов. Точно так же дизайнеры используют библиотеку стандартных элементов интерфейса для быстрого создания веб- или мобильных экранов. Наконец, копирайтеры и маркетологи должны следовать тону бренда и шаблонам/руководствам при написании текстов или новостных рассылок для клиентов.
Авторитетные дизайн-системы
К ним относятся Material Design и Human Interface Guidelines. Во многих отношениях они определили внешний вид дизайн-систем, когда цифровые мобильные операционные системы впервые появились на смартфонах. Благодаря им дизайнеры узнали много полезных методов проектирования, и они до сих пор остаются золотым стандартом дизайн-систем.
1. Material Design от Google
Material Design 3.0 и 2.0 от Google — это единая дизайн-система, которая сочетает в себе теорию, ресурсы и инструменты для создания цифрового опыта на Android-смартфонах.
2. Human Interface Guidelines от Apple
Позволяет получить подробную информацию и ресурсы интерфейса для проектирования отличных приложений, которые легко интегрируются в платформы Apple. Human Interface Guidelines познакомят вас с основными структурными компонентами приложения, такими как архитектура, возможности системы, визуальный дизайн, иконки и многое другое.
Известные системы дизайна
3. Дизайн-система от Atlassian
Создавайте потрясающие корпоративные решения, используя комплексный язык дизайна Atlassian и стратегически спланированные компоненты. Его особенность заключается в том, что каждый раздел включает образец кода, который разработчики могут изучить и проанализировать.
4. Дизайн-система Pajamas от GitLab
GitLab — это проект с открытым исходным кодом, управляемый сообществом, в котором участвуют более 3000 человек. GitLab считает, что внося свой вклад, потребители становятся участниками, и скорость прогресса значительно ускоряется.
5. Дизайна-система Photon от Mozilla Firefox
Photon — это язык дизайна Firefox, который позволяет создавать современный, простой и привлекательный опыт на всех платформах, от мобильных и десктопных до телевизоров.
6. Паттерны Mailchimp
Библиотека паттернов MailChimp является результатом перехода компании на более гибкое, элегантное и удобное программное обеспечение.
7. Единая система дизайна HUDL
Сочетание дизайна и кодинга создали систему, объединяющую продукты Hudl.
8. Thumbtack Thumbprint
Thumbprint — это живая система, которая использует консолидацию, стандартизацию и документацию для оптимизации проектирования и разработки.
9. Rizzo Style от Lonely Planet
Rizzo был создан с упором на снижение сложности и повышение возможности повторного использования.
10. Язык дизайна Carbon от IBM
Carbon — это система разработки продуктов и опыта IBM с открытым исходным кодом. Рабочий код, инструменты и ресурсы проектирования, принципы пользовательского интерфейса и процветающее сообщество участников составляют систему, построенную на языке дизайна IBM.
11. Stacks от Stack Overflow
Stacks предоставляет вам все необходимое для последовательного и согласованного взаимодействия со Stack Overflow, включая продукт и электронную почту.
12. Пользовательский интерфейс Audi
Целью интерфейса Audi является разработка разнообразных решений и хорошо сбалансированного общесистемного пользовательского опыта, от приложения до автомобиля.
13. Global Experience Language (GEL) от BBC
Общий фреймворк дизайна BBC, GEL, позволяет нам создавать согласованный и приятный пользовательский опыт во всех цифровых сервисах.
14. Дизайн-система Canvas от HubSpot
Эта коллекция иллюстрирует компоненты дизайн-системы Hubspot, от цветов и типографики до функций на основе React, и инструментов визуализации данных.
15. Ant Design от Ant Finances
Для лучшего пользовательского опыта корпоративных приложений была создана дизайн-система со значениями определенности, осмысленности, роста и естественности.
16. Polaris от Shopify
Дизайна-система Polaris помогает всем продавцам Shopify сотрудничать, чтобы создать выдающийся опыт.
17. Дизайн-система Grommet от Hewlett Packard
Grommet предоставляет поддержку, компоненты и ресурсы для проектирования, необходимые для воплощения ваших идей в жизнь.
18. Styleguide от Marvel
Это руководство по стилю предназначено для использования в качестве централизованного репозитория компонентов интерфейса, руководств по бренду, активов бренда, фрагментов кода, руководств для разработчиков и многого другого.
19. Garden от Zendesk
Garden — это выбранная компанией коллекция элементов интерфейса. Zendesk обычно «выращивает» компоненты интерфейса для продуктов Zen в «саду».
20. Дизайн-система Lightning от Salesforce
Дизайн-система Lightning позволяет создавать успешные бизнес-процессы и настраиваемые приложения с использованием собственных паттернов и лучших практик Salesforce.
Хорошо проработанные дизайн-системы
Достойны упоминания
Надеюсь, что приведенные выше примеры дизайн-систем натолкнут вас на размышления. Пишите в комментариях, если знаете интересные примеры, которые можно добавить в этот список.
