Ключевые идеи
1. Дизайн-системы объединяют команды вокруг единого визуального языка
Дизайн-система объединяет продуктовые команды вокруг общего визуального языка.
Общий визуальный язык. Главная ценность дизайн-системы — создание единого визуального языка для команд, работающих над продуктом. Это снижает «долг» в дизайне, ускоряет процесс и строит мосты между командами, которые вместе воплощают продукт в жизнь. Такой подход гарантирует согласованность и эффективность в дизайне и разработке.
Ограничения индивидуального дизайна. Традиционные, сделанные на заказ решения плохо масштабируются. Они медленные, непоследовательные и со временем всё сложнее поддерживаются. Дизайн-системы решают эту проблему, делая дизайн переиспользуемым и позволяя создавать лучшие продукты быстрее.
Инженерная операционализация. Более 50 лет инженеры оптимизируют свою работу через переиспользуемый код. Дизайн-системы дают дизайну возможность раскрыть весь потенциал и присоединиться к этому процессу, создавая более эффективный и масштабируемый рабочий процесс.
2. Дизайн-системы масштабируют дизайн и управляют долгом
Дизайн-системы позволяют командам создавать лучшие продукты быстрее, делая дизайн переиспользуемым — а переиспользуемость делает масштабирование возможным.
Масштабирование дизайна. Дизайн-системы помогают масштабировать дизайн, предоставляя общую «истину» для продуктовых команд. Это особенно важно, когда дизайн-команды растут и интегрируются в разные части компании. Они обеспечивают единообразие интерфейсов на всех платформах и дают возможность быстро вносить изменения.
Управление долгом в дизайне. Долг в дизайне — это непереиспользуемые и непоследовательные стили и соглашения. Дизайн-системы снижают нагрузку на дизайн и код, позволяя приложениям расти и развиваться без накопления чрезмерного долга.
Преимущества согласованности. Стандартизированные компоненты создают более предсказуемое и понятное приложение. Это позволяет дизайнерам меньше думать о стиле и больше сосредоточиться на улучшении пользовательского опыта. Кроме того, ускоряется прототипирование и итерации.
3. Стандарты и компоненты — сердце дизайн-систем
Дизайн-система — это набор переиспользуемых компонентов, управляемых чёткими стандартами, которые можно собирать вместе для создания множества приложений.
Определение стандартов. Стандарты объясняют «почему» дизайна системы, устраняя субъективность и неоднозначность. Они охватывают как дизайн, так и разработку, стандартизируя наименования, требования к доступности и структуру файлов.
Визуальный язык. Визуальный язык — ключевая часть стандартов дизайна, определяющая назначение и стиль цвета, формы, типографики, иконок, пространства и анимации. Это обеспечивает согласованность с брендом и единый пользовательский опыт.
Определение компонентов. Компоненты — это переиспользуемые части кода, которые служат строительными блоками интерфейса приложения. Они бывают разной сложности: простые кнопки дают большую гибкость и переиспользуемость.
4. Модель команды влияет на успех дизайн-системы
Модель команды, которая объединяет людей, так же важна, как и команда, создающая дизайн-систему.
Состав команды. Эффективная команда дизайн-системы включает дизайнеров, фронтенд-разработчиков, экспертов по доступности, контент-стратегов, исследователей, специалистов по производительности, продуктовых менеджеров и лидеров. Сильные лидеры в каждой области двигают решения вперёд.
Модели команд. Существуют три популярных модели:
- Одиночная: «Властелин» управляет дизайн-системой.
- Централизованная: одна команда поддерживает дизайн-систему на постоянной основе.
- Федеративная: участники из разных отделов компании совместно работают над системой.
Гибридный подход. Многие команды используют сочетание централизованной и федеративной моделей. Основная команда сотрудничает с участниками из разных продуктовых и функциональных областей для развития дизайн-системы. Выбор модели зависит от целей и потребностей организации.
5. Визуальный язык — основа библиотеки UI
Понимание не только того, что, но и почему в дизайне системы — ключ к созданию исключительного пользовательского опыта.
Визуальный инвентарь. Создание визуального инвентаря включает каталогизацию визуальных атрибутов: отступов, цвета, типографики. Это помогает сформировать кодифицированный визуальный язык. Также создаётся инвентарь UI-элементов — кнопок, карточек, модальных окон — для формирования библиотеки компонентов.
Элементы визуального языка:
- Цвета
- Типографика
- Отступы
- Изображения
- Визуальная форма
- Анимация
- Звук
Значение визуального языка. Эти элементы составляют фундамент визуального языка дизайн-системы, влияя на пользовательский опыт и идентичность бренда.
6. Дизайн-токены абстрагируют свойства дизайна
Дизайн-токены — это «субатомная» основа реализации дизайн-системы.
Определение дизайн-токенов. Дизайн-токены — это пары имя-значение, хранящиеся как данные для абстрагирования свойств дизайна. Они содержат цвета, отступы, размеры, длительности анимаций и многое другое, распространяя эти значения по разным платформам.
Согласованность и управление. Хранение значений в одном месте облегчает достижение согласованности и снижает нагрузку на управление дизайн-системой.
Пример: SPACING_MEDIUM: 1rem. Дизайн-токены обеспечивают централизованное управление и обновление свойств дизайна, гарантируя единообразие на разных платформах и приложениях.
7. Доступность должна быть встроена в дизайн-системы
Веб изначально создан для всех людей, независимо от их оборудования, программного обеспечения, языка, культуры, местоположения или физических и ментальных возможностей.
Важность доступности. Доступность (a11y) гарантирует, что сайты удобны для максимально широкого круга пользователей, независимо от способа доступа к интернету. Это улучшает опыт для всех, повышает SEO и становится всё более важным с юридической точки зрения.
Обеспечение доступности. Лучшие практики доступности должны быть встроены в код дизайн-системы. Это включает проверку использования цвета по установленным стандартам, создание компонентов, доступных с клавиатуры и для экранных читалок по умолчанию, а также стандарты кода для распространённых практик a11y.
Преимущества доступности. Доступные решения улучшают удобство для всех, облегчая просмотр, взаимодействие и навигацию по сайту. Это повышает процент заполнения форм и снижает количество ошибок пользователей.
8. Документация — ключ к принятию дизайн-системы
Как говорят специалисты по дизайн-системам: «Если это не задокументировано, значит, этого не существует».
Важность документации. Актуальная документация жизненно необходима для успешного внедрения дизайн-системы. Она помогает продвигать новые паттерны, снижает необходимость писать новый код и облегчает внедрение с помощью примеров и рекомендаций.
Избежание устаревшей документации. Устаревшая документация может сбить с пути и вызвать разочарование. Важно вкладывать время в практики, которые помогают поддерживать документацию в актуальном состоянии.
Практики документации. Документируйте стили по мере их добавления. Ищите возможности проверить точность документации, например, до и после вводных сессий. Добавляйте тесты, проверяющие документацию при добавлении и обновлении паттернов, и делайте так, чтобы пользователи могли легко сообщать об ошибках.
9. Видение и принципы объединяют команды
Видение направляет всех к общей цели.
Заявление о видении. Видение — это повторяемое утверждение, которое даёт контекст работе и помогает командам не сбиваться с курса. Оно объявляет, чего команда, продукт или компания стремятся достичь и почему это важно.
Принципы дизайна. Принципы дизайна служат стандартом для оценки работы дизайнеров. Они заменяют субъективные идеалы общим пониманием того, что дизайн должен делать для пользователей.
Преимущества согласованности. Система принципов отвечает на вопросы: что такое хороший дизайн, что важно, когда продукт готов к выпуску. Это создаёт согласованность и позволяет масштабировать дизайн-команды.
10. Процесс и голос усиливают согласованность
Только в повторении мастерство превращается в искусство.
Повторяемый процесс. Чётко определённый процесс решения задач пользовательского опыта создаёт согласованность в продуктовых командах. Это снижает трения и ускоряет работу.
Руководства по написанию. Отличный текст — неотъемлемая часть отличного дизайна. Руководства по написанию способствуют хорошей коммуникации, доверию и единообразию, независимо от автора контента.
Голос и тон. Каждое руководство по написанию должно охватывать голос и тон. Голос обычно остаётся постоянным, а тон меняется в зависимости от ситуации. Оба элемента важны для эффективного общения.
11. Дизайн-системы могут выходить за пределы компании
Меня вдохновляет, как дизайн-системы помогают командам масштабироваться и стабильно создавать качественные продукты, но я понимаю, что мы только начинаем раскрывать наш потенциал.
Общие стандарты. Дизайн-системы могут выходить за стены одной компании, становясь общими стандартами и настраиваемыми инструментами. Это ускоряет разработку и избавляет от необходимости начинать всё с нуля.
Сообщество с открытым исходным кодом. Благодаря поддержке сообщества с открытым исходным кодом дизайн-системы могут эволюционировать в адаптивные, интеллектуальные системы, которые понимают контекст и самостоятельно собираются.
Будущий потенциал. Будущее дизайн-систем — в создании адаптивных, интеллектуальных систем, осознающих контекст и способных к самосборке, что снижает нагрузку и открывает возможности дизайна с поддержкой ИИ.
Обзор отзывов
Руководство по дизайн-системам заслужило в основном положительные отзывы. Читатели отмечают его всесторонний подход к созданию и поддержке дизайн-систем. Особенно ценится практическая направленность, акцент на командное взаимодействие и полезные ресурсы, которые авторы щедро предоставляют. Некоторые критикуют структуру книги, считая, что она больше похожа на сборник статей, чем на цельное повествование. Другие указывают на то, что основное внимание уделено веб-дизайну, а не дизайну продуктов в целом. Несмотря на эти замечания, многие рекомендуют книгу как обязательное чтение для дизайнеров и разработчиков, особенно для тех, кто только начинает знакомиться с дизайн-системами.
Читают также
Частые вопросы
1. What is the main focus of "Design Systems Handbook" by DesignBetter.co?
- Comprehensive guide to design systems: The book provides a step-by-step approach to understanding, creating, and scaling design systems within organizations.
- Bridges design and development: It emphasizes the importance of uniting product teams around a common visual language and reusable components.
- Addresses scalability and consistency: The handbook tackles the challenges of maintaining consistency, reducing design debt, and enabling rapid product development.
- Practical and strategic advice: It offers actionable insights, real-world examples, and frameworks for building, implementing, and evolving design systems.
2. Why should I read "Design Systems Handbook" by DesignBetter.co?
- Solve scaling challenges: The book addresses the growing pains of scaling design across teams and platforms, making it essential for organizations facing rapid growth.
- Improve product quality: It demonstrates how design systems lead to more consistent, accessible, and user-friendly products.
- Reduce design and technical debt: Readers learn strategies to minimize redundant work and maintain a sustainable codebase.
- Gain buy-in and collaboration: The handbook provides guidance on securing organizational support and fostering cross-functional teamwork.
3. What are the key takeaways from "Design Systems Handbook"?
- Design systems enable scale: Reusability and standardization are crucial for scaling design efficiently across products and teams.
- Collaboration is essential: Successful design systems require input from designers, developers, accessibility experts, and leadership.
- Documentation and process matter: Up-to-date documentation and clear processes are vital for adoption and long-term success.
- Design systems are living products: They require ongoing maintenance, iteration, and adaptation to evolving needs.
4. How does "Design Systems Handbook" define a design system?
- Collection of reusable components: A design system is a set of modular, reusable UI components guided by clear standards.
- Unified visual language: It includes a codified visual language—color, typography, spacing, icons, and more—that ensures brand consistency.
- Governed by standards: Standards cover naming conventions, accessibility, file structure, and usage guidelines to remove ambiguity.
- Foundation for scalability: The system is designed to be assembled in various ways to build any number of applications efficiently.
5. What are the main benefits of implementing a design system according to "Design Systems Handbook"?
- Accelerates product development: Teams can prototype, iterate, and launch features faster by reusing established components.
- Ensures consistency and quality: Standardized components and visual language create a cohesive user experience across platforms.
- Reduces design and technical debt: By minimizing redundant styles and code, maintenance becomes easier and more sustainable.
- Improves accessibility and usability: Accessibility can be built into components, ensuring compliance and better experiences for all users.
6. What are the core components and concepts of a design system as described in "Design Systems Handbook"?
- Visual design language: Includes color palettes, typography, spacing, imagery, iconography, motion, and sound.
- Design tokens: Abstract values (like colors, spacing, and sizes) stored as data for consistency and cross-platform use.
- Component library: A catalog of UI elements (buttons, forms, cards, etc.) with documentation, code, and usage guidelines.
- Standards and documentation: Clear rules and best practices for naming, accessibility, and implementation.
7. How does "Design Systems Handbook" recommend building and maintaining a design system?
- Start with the right team: Involve designers, developers, accessibility experts, content strategists, researchers, and leadership.
- Choose an effective team model: Options include solitary, centralized, federated, or hybrid models, depending on organizational needs.
- Conduct audits and inventories: Assess existing visual styles and UI components to identify inconsistencies and redundancies.
- Automate and test: Use tools for linting, documentation, and automated testing to ensure consistency, accessibility, and robustness.
8. What are the best practices for rolling out and encouraging adoption of a design system, according to "Design Systems Handbook"?
- Pilot projects and sandboxes: Test the system with real or imaginary products to demonstrate value and gather feedback.
- Comprehensive documentation: Keep documentation up-to-date, accessible, and easy to navigate for all team members.
- Incremental vs. large-scale rollout: Choose between launching the system all at once or introducing it in stages, based on resources and organizational culture.
- Foster collaboration and feedback: Involve users, contributors, and stakeholders through workshops, onboarding, and open communication channels.
9. How does "Design Systems Handbook" address common myths and challenges about design systems?
- Myth: Too limiting: The book explains that design systems can evolve and accommodate new solutions, reducing debt rather than stifling creativity.
- Myth: Loss of creativity: It argues that systems free designers to focus on user experience rather than repetitive styling tasks.
- Myth: One and done: Design systems are living products that require ongoing maintenance and iteration.
- Challenges: The handbook covers issues like keeping documentation current, handling breaking changes, and avoiding performance degradation.
10. What advanced concepts does "Design Systems Handbook" introduce for expanding and future-proofing design systems?
- Vision and principles: Establishing a North Star and design principles to align teams and guide decision-making.
- Process and voice/tone: Standardizing workflows and communication to ensure consistency beyond UI components.
- Design tokens and theming: Using tokens for cross-platform consistency and supporting multiple brands or themes.
- AI and intelligent systems: Envisioning adaptive, context-aware systems that leverage open standards and machine learning for future scalability.
11. What are some of the most impactful quotes from "Design Systems Handbook" and what do they mean?
- “It wasn’t hard to get them to follow the guidelines, it was hard to get them to agree on the guidelines.” — Lori Kaplan, Atlassian: Highlights the importance of consensus and collaboration in establishing standards.
- “A design system is living, meaning it will require ongoing maintenance and improvements as needs arise.”: Emphasizes that design systems are not static and must evolve with products and teams.
- “The key in making great and growable systems is much more to design how its modules communicate rather than what their internal properties and behaviors should be.” — Alan Kay: Stresses the importance of interfaces and communication between components for scalability.
- “Disagreements happened less and less because we were now aligned.” — Steven Fabre, InVision: Shows the power of shared principles and language in reducing friction and improving team efficiency.
12. What resources and further reading does "Design Systems Handbook" by DesignBetter.co recommend for deepening knowledge?
- Public design systems and style guides: Examples include Airbnb, Atlassian, BBC Gel, Buzzfeed Solid, GitHub Primer, Google Material, IBM Carbon, Salesforce Lightning, Shopify Polaris, and more.
- Articles and books: Recommendations cover topics like design principles, accessibility, performance, and the future of design systems.
- Tools and frameworks: The book lists tools for documentation, testing, and building design systems, such as Storybook, Pattern Lab, Fractal, and React Styleguidist.
- Community and inspiration: Resources like StyleGuides.io, Awesome Design Systems on GitHub, and DesignGuidelines.co offer curated lists and community support.
