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:
Define the product's Purpose and Values. This will affect all future decisions.
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?
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.
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
Last updated
Was this helpful?