Design Systems (Smashing eBooks)

1. Design systems are interconnected patterns and shared practices that serve a digital product's purpose

A design system is a set of interconnected patterns and shared practices coherently organized to serve the purposes of a digital product.

Patterns and practices. Design systems consist of two key elements: patterns and practices. Patterns are the repeating elements that make up an interface, such as user flows, interactions, buttons, text fields, icons, colors, and typography. Practices refer to how teams create, capture, share and use those patterns when working together.

Purpose-driven design. The ultimate goal of a design system is to help achieve the purpose of the digital product it serves. For example, FutureLearn's purpose is to "inspire lifelong learning in everyone, anywhere." This purpose should inform all design decisions, from high-level principles down to the smallest interface elements. An effective design system combines cost-effectiveness in the design process with efficiency and satisfaction in the user experience, all in relation to the product's purpose.

Interconnected elements. Design patterns don't exist in isolation - they form an interconnected language that shapes the entire user experience. This language combines functional patterns (tangible interface elements), perceptual patterns (aesthetic qualities), and other types specific to the product's domain and platform. The connections between patterns are just as important as the individual elements themselves in creating a cohesive and meaningful interface.

2. Effective design principles provide practical guidance and have a clear point of view

Good design principles don't try to be everything for everyone. They have a voice and actively encourage a designer to take a perspective.

Qualities of effective principles. Design principles should be authentic, practical, opinionated, and memorable. Generic statements like "Make it simple" are less helpful than specific, actionable advice. For example, "No needless parts. Every design element must have a purpose and contribute to the purpose of a larger element it is part of" provides clear guidance for designers.

Balancing priorities. Good principles help teams work out priorities and balance conflicting factors. For instance, Salesforce Lightning Design System principles are ranked: "Clarity. Efficiency. Consistency. Beauty." This communicates that clarity should always come first, while beauty shouldn't be promoted over efficiency or consistency.

Evolving principles. Design principles aren't set in stone - they should evolve with the product and be regularly tested and refined. Making principles part of everyday design conversations and critiques helps ensure they remain relevant and effective. Teams should continuously evaluate if their principles are helping the design process and iterate on them if not.

3. Functional patterns enable or encourage specific user behaviors

Functional patterns are the tangible building blocks of the interface. Their purpose is to enable or encourage certain user behaviors.

Behavior-driven design. When defining functional patterns, start by identifying key user behaviors you want to support. For example, on a recipe website, core behaviors might include selecting ingredients, choosing a recipe, and following steps within an allocated time. The functional patterns you design (like recipe cards or step-by-step instructions) should directly enable these behaviors.

Purpose and structure. Each functional pattern should have a clear purpose that relates to user behavior. Documenting this purpose helps prevent duplication and misuse as the product grows. Additionally, mapping out a pattern's content structure (core elements, hierarchy, and groupings) can help determine if patterns should be unified or kept separate.

Evolution and consistency. While the execution and presentation of functional patterns may change over time, their core purpose tied to user behaviors often remains stable. Being conscious of a pattern's purpose can help teams understand how the system works and prevent fragmentation as it evolves. Regular interface inventories and pattern audits are essential to maintain consistency and identify areas for improvement.

4. Perceptual patterns shape how a product feels and is perceived

Perceptual patterns are always present, even if they're not purposefully designed. Even a purely functional tool has an aesthetic.

Beyond visual style. Perceptual patterns include elements like color, typography, spacing, animations, and tone of voice. These patterns work together to create the overall aesthetic and emotional impact of a product. Even products with similar functionality can feel distinctly different due to their unique combinations of perceptual patterns.

Brand expression. Effective perceptual patterns become powerful product differentiators by expressing the brand through the interface. They help make a product memorable and shape how users perceive its quality, reliability, and character. For example, Spotify's warm and personal feel is created through a combination of imagery styles, color ratios, subtle interactions, and typography choices.

Systematic approach. To influence perception reliably and at scale, teams need to be aware of the patterns that create it. This involves:

• Identifying signature patterns that are most distinct and memorable
• Auditing existing styles and grouping them by purpose
• Defining clear patterns of usage and guiding principles
• Specifying building blocks (like color palettes or animation timing scales)
• Balancing consistency with creative expression to avoid generic designs

5. A shared language is crucial for cohesive design systems and team collaboration

Without a shared language, a group of people can't create effectively together — each person will have a different mental model of what they're trying to achieve.

Collaborative naming. Naming patterns collaboratively helps teams understand their purpose better and creates a shared vocabulary. Effective names are often metaphorical, have personality, and communicate the pattern's purpose. For example, FutureLearn uses names like "Whisperbox" for a subtle promotional element and "Boss" for the main call-to-action button.

Visibility and usage. To establish a shared language:

• Make design patterns visible (e.g., create a pattern wall)
• Consistently refer to patterns by their agreed names
• Include the design system in the onboarding process
• Organize regular design system catch-ups
• Encourage diverse collaboration across disciplines
• Maintain a glossary of terms

Cultural shift. Creating a shared language is a gradual process that requires a supportive team culture. It involves not just naming things together, but also establishing practices for vetting, discussing, and articulating language decisions as a team. This process can lead to better collaboration and a more cohesive design approach.

6. Design systems can vary in strictness, modularity, and organizational structure

The right system for you is not some else's system. Whatever works for one team might not work for another.

Strictness spectrum. Design systems can range from strict (like Airbnb's) with precise rules and processes, to loose (like TED's) allowing more context-sensitive design. Strict systems provide consistency but can become rigid, while loose systems offer flexibility but risk fragmentation.

Modularity trade-offs. Modular systems are adaptable and cost-effective but can lead to generic designs. Integrated designs are more coherent and specific but don't scale well. The degree of modularity should depend on the product's needs and goals.

Organizational models. Systems can be centralized (managed by one group) or distributed (maintained by everyone). Centralized models provide focused ownership but can become bottlenecks, while distributed models are more agile but challenging to keep cohesive.

Cultural fit. The effectiveness of a design system depends on how well it aligns with team culture and communication structures. Teams should choose an approach where they can manage the downsides effectively, rather than trying to copy another company's system directly.

7. Systematically define patterns by starting with purpose and user behaviors

Design intent can be rendered in countless ways — patterns don't have to be visual. They can be represented in physical objects (like the interior of a book store), or they can be read out by a voice.

Purpose-directed inventory. Instead of focusing solely on visual consistency, conduct an inventory based on user behaviors and the purpose of interface elements. This approach helps connect patterns with the design intent and ethos of the product.

Steps for a purpose-directed inventory:

1. Identify key behaviors for each segment of the user journey
2. Break down behaviors into specific actions
3. Group existing interface elements by the actions they support
4. Define patterns based on these groupings

Defining patterns. When defining patterns:

• Use a specificity scale to decide if elements should be merged or kept separate
• Map out content structures to understand relationships between elements
• Create variants for patterns that share a structure but need different presentations
• Choose names that reflect a pattern's purpose and guide its usage

Ongoing process. Systematizing an interface is an iterative process. Start with core patterns fundamental to the experience, then gradually expand to other areas. Regular audits and inventories help keep the system in good shape as it evolves.

8. Perceptual patterns should be defined holistically to create a cohesive aesthetic

To influence perception in a reliable and scalable way, we need to be aware of the patterns that create it.

Signature patterns. Start by identifying the most memorable and distinct elements that make your product feel a certain way. This exercise helps capture the core aesthetic and provides guidance for the entire process of defining perceptual patterns.

Systematic approach. For each perceptual pattern (color, typography, animations, etc.):

1. Define its purpose and intended feel in your product
2. Audit existing instances and group them by purpose
3. Define patterns of usage based on purpose and feel
4. Specify building blocks (e.g., color palette, type scale, animation timing)
5. Agree on guiding principles for usage

Holistic perspective. Consider how different perceptual patterns work together to create the overall aesthetic. For example, color choices affect typography readability, and animation timing influences the perception of interactivity. Balancing these elements creates a cohesive and purposeful design language.

9. Pattern libraries require multidisciplinary involvement to be truly effective

Multidisciplinary pattern libraries are more resilient and enduring. They facilitate a shared language across the organization and bring value to everyone.

Collaborative content creation. Start by documenting patterns in a simple, accessible format like Google Docs. This allows team members from different disciplines to easily contribute, review, and provide feedback. The content should include pattern names, purposes, examples, and usage guidelines.

Flexible organization. There's no one-size-fits-all approach to organizing patterns. Common methods include:

• Separating perceptual and functional patterns
• Alphabetical listing
• Hierarchical categorization (e.g., atomic design)
• Grouping by purpose or structure

Experiment with different organizational schemes and be prepared to adjust based on team feedback and usability testing.

Evolving documentation. Start with lightweight documentation of core patterns and gradually expand over time. Focus on making information easily scannable and relevant to different disciplines. Include clear examples, both visual and code-based, to demonstrate proper usage. Regularly review and update the pattern library to ensure it remains a valuable, living resource for the entire team.

Last updated: September 5, 2024