Skip To Content
Web Design

Design Systems

Chapter 1 - Design Systems #

Design patterns are recurring, reusable solutions used to solve design problems.

Design patterns matter since they help groups of people follow a consistent, creative direction together.

“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

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

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