Facebook Pixel
Searching...
English
EnglishEnglish
EspañolSpanish
简体中文Chinese
FrançaisFrench
DeutschGerman
日本語Japanese
PortuguêsPortuguese
ItalianoItalian
한국어Korean
РусскийRussian
NederlandsDutch
العربيةArabic
PolskiPolish
हिन्दीHindi
Tiếng ViệtVietnamese
SvenskaSwedish
ΕλληνικάGreek
TürkçeTurkish
ไทยThai
ČeštinaCzech
RomânăRomanian
MagyarHungarian
УкраїнськаUkrainian
Bahasa IndonesiaIndonesian
DanskDanish
SuomiFinnish
БългарскиBulgarian
עבריתHebrew
NorskNorwegian
HrvatskiCroatian
CatalàCatalan
SlovenčinaSlovak
LietuviųLithuanian
SlovenščinaSlovenian
СрпскиSerbian
EestiEstonian
LatviešuLatvian
فارسیPersian
മലയാളംMalayalam
தமிழ்Tamil
اردوUrdu
Design Systems Handbook

Design Systems Handbook

by DesignBetter.co 2019
3.95
100+ ratings
Listen
Listen to Summary

Key Takeaways

1. Design Systems Unite Teams Around a Visual Language

A design system unites product teams around a common visual language.

Common visual language. A design system's primary value lies in creating a shared visual language for product teams. This reduces design debt, accelerates the design process, and builds bridges between teams working together to bring products to life. It ensures consistency and efficiency in design and development efforts.

Bespoke design limitations. Traditional, tailor-made design solutions don't scale well. They are slow, inconsistent, and increasingly difficult to maintain over time. Design systems address this by making design reusable, enabling teams to build better products faster.

Engineering operationalization. For over 50 years, engineers have operationalized their work through reusable code. Design systems allow design to realize its full potential and join them, creating a more efficient and scalable process.

2. Design Systems Scale Design and Manage Debt

Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible.

Scaling design. Design systems help scale design by providing a shared source of truth for product teams. This is especially important as design teams grow and become embedded in various parts of a company. It ensures consistent UIs across platforms and empowers teams to iterate quickly.

Managing design debt. Design debt consists of non-reusable and inconsistent styles and conventions. Design systems keep design and code overhead low, allowing applications to grow and evolve without accumulating excessive debt.

Benefits of consistency. Standardized components create a more predictable and easy-to-understand application. This allows designers to focus less on style and more on developing a better user experience. It also enables faster prototyping and iteration.

3. Standards and Components are the Heart of Design Systems

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Standards definition. Standards define the "why" behind the design of a system, removing subjectivity and ambiguity. They encompass both design and development, standardizing naming conventions, accessibility requirements, and file structure.

Visual language. Visual language is a core part of design standards, defining the purpose and style of color, shape, type, icons, space, and motion. This ensures a brand-aligned and consistent user experience.

Components definition. Components are reusable code portions that serve as building blocks for an application's interface. They range in complexity, with simpler components like buttons offering greater flexibility and reusability.

4. Team Models Impact Design System Success

The team model that brings people together is as important as the team creating your design system.

Team composition. An effective design system team includes designers, front-end developers, accessibility experts, content strategists, researchers, performance experts, product managers, and leaders. Strong leaders in each area can drive decisions forward.

Team models. There are three popular team models:

  • Solitary: An "overlord" rules the design system.
  • Centralized: A single team maintains the design system full-time.
  • Federated: Team members from across the company collaborate on the system.

Hybrid approach. Many teams use a combination of centralized and federated models. A core team works with contributors from various product and feature areas to evolve the design system. The right model depends on the organization's goals and needs.

5. Visual Language is the Foundation of a UI Library

Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience.

Visual inventory. Creating a visual inventory involves cataloging visual attributes like spacing, color, and typography. This helps create a codified visual language. It also involves creating an inventory of UI elements like buttons, cards, and modals to create a UI library of components.

Visual design language elements:

  • Colors
  • Typography
  • Spacing
  • Images
  • Visual form
  • Motion
  • Sound

Visual design language importance. These elements form the foundation of a design system's visual design language, influencing the user experience and brand identity.

6. Design Tokens Abstract Design Properties

Design tokens are the “subatomic” foundation of a design system implementation.

Design tokens definition. Design tokens are name-value pairs stored as data to abstract design properties. They store colors, spacing, sizing, animation durations, and more, distributing them across various platforms.

Consistency and management. With values stored in one place, design tokens make it easier to achieve consistency and reduce the burden of managing a design system.

Example: SPACING_MEDIUM: 1rem. Design tokens provide a centralized way to manage and update design properties, ensuring consistency across different platforms and applications.

7. Accessibility Must Be Built into Design Systems

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.

Accessibility importance. Accessibility (a11y) ensures sites are usable by as many people as possible, regardless of how they access the web. It improves the experience for everyone, enhances SEO, and is increasingly important from a legal standpoint.

Enforcing accessibility. Accessibility best practices should be enforced in the design system code. This includes testing color usage against established guidelines, building components to be keyboard and screen reader accessible by default, and including code standards for common a11y practices.

Accessibility benefits. Accessible practices improve usability for everyone by making it easier to view, interact with, and navigate a site. It also improves form completion rates and reduces user mistakes.

8. Documentation is Key to Design System Adoption

As design systems peers say, “If it’s not documented, it doesn’t exist.”

Documentation importance. Up-to-date documentation is crucial for design system adoption. It helps promote new patterns, reduce the need to write new code, and makes implementation easy with code examples and guidelines.

Avoiding outdated documentation. Outdated documentation can lead people down the wrong path and cause frustration. Investing time in developing practices that help keep documentation updated is essential.

Documentation practices. Document styles as they are added. Find opportunities to check documentation accuracy, such as before and after onboarding sessions. Add tests that check documentation when patterns are added and updated, and make it easy for people to report inaccuracies.

9. Vision and Principles Align Teams

A vision statement moves everyone toward a common destination.

Vision statement. A vision statement is a reusable statement that gives context to work and helps teams stay on track. It declares what a team, product, or company is attempting to achieve and why it's worth achieving.

Design principles. Design principles act as a reusable standard for designers to measure their work. They replace subjective ideals with a shared understanding of what design must do for users.

Alignment benefits. A system of principles can provide answers to questions like how to define good design, what's essential, and when something is ready to ship. This creates alignment, enabling design teams to scale.

10. Process and Voice Enhance Consistency

It is only in the repetition of the craft that he or she masters the art.

Repeatable process. Providing a clearly defined process for how user experience problems are approached and solved builds alignment within product teams. This consistency helps remove friction and build velocity.

Writing guidelines. Great writing is an essential part of great design. Writing guidelines promote good communication, credibility, and consistency, no matter who's writing content.

Voice and tone. Every writing guide should cover both voice and tone. Voice generally stays the same, while tone shifts according to the situation. Both are essential for effective communication.

11. Design Systems Can Transcend Company Walls

I find it exciting to see design systems empower design teams to scale and consistently produce solid products, but I know we’re only scratching the surface of our potential.

Shared standards. Design systems can transcend the walls of a single company to exist as shared standards and customizable tooling. This can accelerate development and eliminate the need to start systems from scratch.

Open source community. With help from the open source community, design systems can evolve into adaptive, intelligent systems that are context-aware and compose themselves.

Future potential. The future of design systems involves creating adaptive, intelligent systems that are context-aware and compose themselves, reducing workload and unlocking AI-powered design.

Last updated:

Review Summary

3.95 out of 5
Average of 100+ ratings from Goodreads and Amazon.

Design Systems Handbook receives mostly positive reviews, with readers praising its comprehensive coverage of design system creation and maintenance. Reviewers appreciate the practical approach, emphasis on collaboration, and valuable resources provided. Some criticize the book's structure, noting it feels more like a collection of articles than a cohesive narrative. Others mention its focus on web design rather than product design. Despite these critiques, many readers recommend it as an essential read for designers and developers, particularly those new to design systems.

Your rating:

About the Author

The author of Design Systems Handbook is DesignBetter.co, a platform dedicated to providing educational resources for designers and developers. DesignBetter.co focuses on creating content that helps professionals improve their skills and stay up-to-date with industry trends. Their approach involves drawing insights from successful companies and practitioners, as evidenced by the references to AirBnb, Shopify, and Invision in the book. The platform is known for offering free, accessible content, including ebooks like Design Systems Handbook. Their work aims to bridge the gap between design and development, fostering a more collaborative and efficient approach to creating digital products.

Download EPUB

To read this Design Systems Handbook summary on your e-reader device or app, download the free EPUB. The .epub digital book format is ideal for reading ebooks on phones, tablets, and e-readers.
Download EPUB
File size: 3.01 MB     Pages: 10
0:00
-0:00
1x
Dan
Andrew
Michelle
Lauren
Select Speed
1.0×
+
200 words per minute
Create a free account to unlock:
Requests: Request new book summaries
Bookmarks: Save your favorite books
History: Revisit books later
Recommendations: Get personalized suggestions
Ratings: Rate books & see your ratings
Try Full Access for 7 Days
Listen, bookmark, and more
Compare Features Free Pro
📖 Read Summaries
All summaries are free to read in 40 languages
🎧 Listen to Summaries
Listen to unlimited summaries in 40 languages
❤️ Unlimited Bookmarks
Free users are limited to 10
📜 Unlimited History
Free users are limited to 10
Risk-Free Timeline
Today: Get Instant Access
Listen to full summaries of 73,530 books. That's 12,000+ hours of audio!
Day 4: Trial Reminder
We'll send you a notification that your trial is ending soon.
Day 7: Your subscription begins
You'll be charged on Mar 22,
cancel anytime before.
Consume 2.8x More Books
2.8x more books Listening Reading
Our users love us
100,000+ readers
"...I can 10x the number of books I can read..."
"...exceptionally accurate, engaging, and beautifully presented..."
"...better than any amazon review when I'm making a book-buying decision..."
Save 62%
Yearly
$119.88 $44.99/year
$3.75/mo
Monthly
$9.99/mo
Try Free & Unlock
7 days free, then $44.99/year. Cancel anytime.
Settings
Appearance
Black Friday Sale 🎉
$20 off Lifetime Access
$79.99 $59.99
Upgrade Now →