# Design systems

## Chapter 1 - Design Systems

* Design system - Interconnected **patterns** and shared **practices** put together to make a digital product.
  * **Patterns** are repeating elements put together to make pages and interfaces. These could be buttons, text, icons, colors, and any specific, measurable element of a page.
    * **Funtional Patterns** are for core functions needed in the site (nouns and verbs)
      * _Example: a product display pattern on an e-commerce site_
    * **Perceptual Patterns** shape how the product is received (adjectives)
      * _Examples: typography, color choices, etc_
  * **Practices** are how patterns are made, shared, and used.
  *   **Patterns are the what, practices are the how.**

      > “The purpose of the product shapes the design patterns it adopts.”
  * Purposes could be tracking lots of info, thoughtful reading, entertaining, hooking them into scrolling down for long periods of time, or whatever.

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.

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.**

## Resources

* [Design Systems](https://www.smashingmagazine.com/printed-books/design-systems/)
