Highlights

A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are how we choose to create, capture, share and use those patterns, particularly when working in a team.

The idea of design patterns was introduced by the architect Christopher Alexander in his seminal books, The Timeless Way of Building and A Pattern Language. One question that runs through the books is why some places feel so alive and great to be in, while others feel dull and lifeless. According to Alexander, the way places and buildings make us feel is not due to subjective emotions merely. It’s a result of certain tangible and specific patterns. Even ordinary people can learn and use them to create humane architecture.

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem. (– Christopher Alexander)

What makes a product distinct from its competitors is not the novelty of patterns it uses, but how those patterns are executed and applied, and how they interconnect to achieve a design purpose.

Sometimes, effective and interesting designs are based on intuition, and we struggle to articulate exactly how and why they work.

Functional patterns are represented as concrete modules of the interface, such as a button, a header, a form element, a menu. Perceptual patterns are descriptive styles that express and communicate the personality of the product visually, such as color and typography, iconography, shapes and animations.

In her book How to Make Sense of Any Mess, Abby Covert suggests that a shared language should be established before you think about interfaces, by discussing, vetting and documenting our language decisions.

The effectiveness of a design system can be measured by how well its different parts work together to help achieve the purpose of the product.

In The Timeless Way of Building, Christopher Alexander introduced the idea of a “pattern language” as a way to create buildings that feel alive and a pleasure to be in. At the core of his book is the observation that many great buildings (Chartres, the Alhambra, Brunelleschi’s Dome) weren’t created by one master architect working laboriously at the drawing board. They were built by groups of people who all had a deep, shared knowledge of the design patterns that were capable of bringing those buildings to life.

…groups of people can conceive their larger public buildings, on the ground, by following a common pattern language, almost as if they had a single mind. (– Christopher Alexander)

Design what’s right, not what’s most consistent. The best utility of the page is a priority. We’ll modify the page to make it work. Dogmatic consistency and established patterns are not what should drive design decisions. (– Michael McWatters)

In short, more modular is not always better. The extent of modularity should depend on what you’re trying to achieve.