< Back to Web Design notes

Design Systems

A book on organizing, making, and maintaining design systems like style guides


Chapter 1 - Design Systems

Design patterns are recurring, reusable solutions used to solve design problems. * Most are things we’re already very familiar with, often just not in terms of how its a design pattern. They’re based on mental models so people understand them naturally. * These can be simple problems like displaying lots of content in small areas (tabs), showing several different actions (dropdown buttons), show remaining steps in a process (progress bar), and many more. * Patterns themselves aren’t unique - a product’s uniqueness comes from how they’re applied and interact with one another.

Common Design Patterns at UI Patterns

Design patterns matter since they help groups of people follow a consistent, creative direction together. * Patterns must be clearly explained and shared * Allows less focus on patterns themselves and more on user experience * Having a shared design language helps designers have similar mental models for the product. Decide all this early on, both on the words and what they mean! - Inconsistent design language among a team = more chances of patterns being misused

> “An effective design language bridges the gap between the system image and the (assumed) user model.”

Pattern Libraries are a popular way today to document designs and language * Ideally it’s a living PL that has the patterns, their live code, descriptions, and use case information. * Remember that Pattern Libraries are not Design Systems! It helps maintain design systems, but they can’t fix bad design thinking. It also doesn’t guarantee widespread use or shared language. - Pattern Libraries are only as good and creative as the design behind them.

> “When a pattern library is used to support a solid design language foundation, it becomes a powerful design and collaboration tool. Until then, it’s a collection of modules on a web page.”

Design System success = how well the different parts work together to achieve their goal. * All patterns are part of your larger design system. None exist in isolation, and work well with other patterns when they need to. * It makes identifying and solving problems easier. Avoid situations where things are confusing and hard to correct.

Steps for making an effective Design System: 1. Define the product’s Purpose and Values. This will affect all future decisions. 2. Define grounding Design Principles. Do you want speedy, efficient interactions? Casual, enjoyable reading? What will the experience be like to best support the purpose and values? 3. Find Needed Encourable Behaviors and Functional Patterns. Look at specific things you want your users to do and how. Design details may change, but key behaviors won’t. 4. Decide on Branding and Perceptual Patterns. Decide what emotions you want to invoke, and tranlsate those to aesthetic choices.

During all the above steps, make decisions on and document the shared design language.