Design System
A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product
– Alla Kholmatova, Design Systems
Starting with Why?
Definitely the first guess would be - reusability. Of course, a design system enables reusability but it is just one of the outcomes. But more than that an effective design system makes the user perceive the product as one system which drives the user to solve one purpose.
In an effective design system, subsystems are more connected and express a shared purpose. There is consistency in design, code, and the pattern library in terms of language & functions. Users can feel harmony in how systems function and generate meaningful & coherent experiences.
How do we establish a Design System?
The following set the foundation of any design system.
-
Purpose
The one single objective of the product that matters the most. Everything in the system should be optimized towards that shared purpose. -
Principles
Teams choose how to achieve the product’s purpose through the design system. You make trade-offs all the time, these design principles help you to make better trade-offs to fulfill the purpose of the product. Principles should not be vague, it should be actionable.
Examples -
Vague:Make it clear
Practical: “Only one no. 1 priority”
Vague:Make it simple
Practical: “Make it unbreakable”
Vague:Make it useful
Practical: “Start with the needs” -
Patterns
There are two types of patterns - functional & perceptual. A functional pattern is a tangible building block of a user interface. The functional pattern enables or encourages a certain user behavior. Second - is perceptual patterns - these help to express brand image. Products feel different even if they are of the same domain and have similar offerings. Perceptual patterns help to express the brand character. There can be a signature pattern like Medium’s clapping button or Twitter’s like interaction animation unique to the brand.
Patterns can be described in a pattern library & exist in a living documentation.
(Note - User behavior is constant, patterns evolve. Pattern execution is guided by principles)
Medium’s signature pattern -
-
Shared Language
Patterns are just a dictionary! To have a successful design system implemented, people in the team should be able to communicate in a shared language. What’s in the name - Everything!
Example - Just having a name like primary button, secondary button may not have a strong impact. You can be playful - loud button, whisper button, ghost button. You can have more relatable terms and make them memorable to the team so that it can be put to practice. Good names communicate the purpose!
This is more of a team exercise.
(A loudness guide illustrated in Using Visual Loudness for Better Wayfinding | Viget])
