Instead of thinking in terms of static pages, teams are starting to approach design in a more systematic way. This book talks about how to make an effective design system that helps generate coherent user experiences, inspires teams to contribute to them, and get better with time. Here are my notes:
Design patterns are any repeating, reusable part of the interface (eg button, typography). A design system is a set of connected patterns and shared practices for a digital product.
The domain influences functional patterns, such as data fields and charts vs videos and discussion threads. Product brand influences perceptual patterns, like tone of voice and typography (differentiate products within the same space). Platform conventions also shape patterns (eg iOS vs Android).
Most design patterns are established and familiar since new patterns require users to learn and adopt them first. Products are distinct because of the way patterns are applied, not because the patterns themselves are new.
One of the main goals of design systems is to get a group of people to follow a creative direction consistently. When you are approaching design with a system in mind, you can affect the design in more profound ways (changing across the entire system instead of one place at a time).
A pattern library is a tool to collect and share design patterns and principles for how to use them. Often these live in a document or wiki, but a better practice is to have a living library that contains the patterns as well as live code used to build them. Be aware that just having this living library won't guarantee that people use the components properly. Communication around the interpretation is key. Rigidity is a function of the design system behind it, not the library itself.
Effective design principles are:
- Authentic and genuine (eg think of "timeless, not cutting edge" compared to "simple, useful, enjoyable")
- Practical and actionable (eg "only one number 1 priority" vs "make it simple") - pair with an example of a specific part of your interface
- Have a point of view (help designers work out priority and balance when there are conflicting factors to consider - eg "direction over choice")
- Relatable and memorable (optimal number is between 3-5 for memory)
When defining design principles, start with the larger purpose of the product, look for shared themes among team members, focus on the right audience (the people directly involved with creating the product), test and evolve your princples (eg as part of design critiques).
Functional patterns enable certain user behaviours. Articulating the purpose of patterns early can help prevent duplication as the product grows.
Techniques for defining functional patterns:
- Create a pattern map by mapping core modules to sections of a user journey
- Conduct an interface inventory by grouping components in categories (eg navigation, buttons, lists, etc)
- View patterns as actions (eg "promote a course" vs "course banner")
- Sketch a pattern's content structure
- Place similar patterns on a scale (eg visual loudness)
- Treat content as a hypothesis
Understand how patterns link to the behaviours they were designed for (their purpose) since this will determine structure, content, and presentation.
Perceptual patterns are the aesthetic properties, like tone of voice, typography, colour palette, iconography, etc that help express brand image and differentiate products within the same domain. Perceptual patterns create visual coherence and connect parts across a system. Explore perceptual patterns using mood boards, style tiles, and element collages (each method distinguished by their relative fidelity). Expect to iterate and evolve styles as they're integrated into the product.
If a design only prioritizes perfect consistency, it can become rigid and generic. Leverage "signature moments" to add depth and meaning to an experience. Try small-scale experiments to see if elements work well before integrating changes into other areas of the interface. Be conscious of new requirements that demand custom patterns and one-off tweaks since they can dilute the brand.
Creating cohesive design systems requires a shared language and a shared approach to naming patterns. Names should be focused, memorable, and embody the purpose of the modules they represent. Instead of focusing on presentational attributes (eg circle with a dot), look for metaphors from other industries like architecture or publishing. Good names communicate purpose - if you're struggling to come up with a name, maybe the purpose isn't clear. Get a diversity of perspectives when naming patterns (eg content, development, design, research). Make design patterns visible (eg putting up posters on a wall) and refer to objects by their names. Take new employees through the story of how the guidelines were created so they can understand how decisions have been made. Have regular design system catch-ups to keep everyone on the same page as the system evolves. Keep a glossary of the terms you use (this can be an easily accessible pattern library).
Design systems can be characterized along three attributes: rules (strict/loose), parts (modular/integrated), and organization (centralized/distributed).
- Stricter systems provide precise and predictable outcomes, but sometimes result in making UX compromises for the sake of consistency. Allow for opportunities outside the systems such as creative experiments and side projects to understand and challenge the rules. To have a looser system, the team needs to be aligned on a product's purpose and the design approach.
- In modular systems the parts are interchangeable and can be assembled in various ways to meet user goals. A modular approach is agile because multiple teams can design and build in parallel, is cost effective because modules are reused, and is easy to maintain. On the other hand, integrated designs can be more specific to particular content, context, or art direction and are actually quicker to build as one-offs because you don't have to spend time making them reusable. The degree of modularization can change over time.
- Rules and patterns can be managed primarily by one group of people, which helps with ownership and focus, but sometimes results in a bottleneck. Alternatively, in a distributed model, everyone who uses the system is also responsible for maintaining and evolving it. A distributed model is more agile and resilient, but work can sometimes slow down without someone in charge.
Get support for a design system from senior management by demonstrating the time saved on designing and building modules, time saved on making site-wide changes, faster product launch, and brand/visual consistency. Start by agreeing on goals and objectives, make progress transparent (eg blog posts), and plan tasks with the most benefit upfront (eg quickly document patterns through screenshots and go back to add the living code after).
Systemize functional patterns by starting with a purpose-directed inventory. The goal is to define the most essential design patterns, not account for all visual inconsistencies. This process should happen after the foundational UX work is complete (research, content strategy, information architecture, and design direction). Identify key behaviours, group existing elements by purpose (at the same level of granularity), and define patterns (when to merge and when to keep separate - look at content structure).
Systemize perceptual patterns by looking beyond style properties (like colour values and text sizes), and focus on having a consistent meaning throughout the interface. Identify signature patterns by having team members write down the most memorable elements that make your product feel a certain way. Itemize styles, such as colour, interactive states, animations, typography, etc. For each style, start with the purpose, collect and group existing elements, define patterns and building blocks, and agree on the guiding principles. Document examples using screenshots to show how the style is used. Be aware of how decisions in favour of consistency can alter the overall aesthetic of the site and go back to signature patterns to help find the right balance. Test colour contrast for accessibility. Consider using a base value and providing several incremental steps - for colour or animations (eg how fast something animates).
When building a pattern library, focus on the content rather than which tool you use to document it. Think about the structure in terms of components and styles (functional and perceptual patterns). Document functional patterns with name, purpose (be concise), example (visual and code), and variants (show how they differ). Consider documenting related patterns to show alternatives for when the pattern is not quite what someone is looking for. When documenting perceptual patterns, show how the properties are used and how they work together. Agree on how new patterns will be added to the system. A template for pattern submissions can be useful if contributions come from all over the organization. Agree on the role of the design systems team (curator vs producer) and ensure the systems team are seen as partners rather than police.
Design systems free our time and energy to solve bigger and more meaningful problems.