Design Systems — Chapter 1, Design Systems Summary

By Alla Kholmatova

Design Systems

A design system is a set of interconnected patterns and shared practices coherently organised 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 purpose of the product shapes the design patterns it adopts.

The ethos of a product (or the brand, depending on your definition of a brand) also forms patterns which together shape how a product is perceived. Without perceptual patterns you wouldn’t feel that much difference between products from within the same domain, which have similar functionality.

Hipchat and Slack have similar purposes and functionality, yet they feel quite different, largely due to how brand is expressed throughout their interfaces.

Design Patterns

A pattern is a recurring, reusable solution that can be applied to solve a design problem.

“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, A Pattern Language”

Design patterns can intrigue and encourage, make tasks e asier, create a sense of achievement or an illusion of control.

Most of the design patterns are established and familiar. They make use of people’s mental models and allow design to be understood intuitively.

Entirely new patterns require users to learn and adopt them first — they are relatively rare.

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. A set of interconnected patterns forms the design language of your product’s interface.

Sometimes, effective and interesting designs are based on intuition, and we struggle to articulate exactly how and why they work. Designers and developers might know it instinctively, but intuition is not always reliable or scalable.

One of the main goals of a design system is “extending creative direction.” If you need to get a group of people to follow a creative direction consistently, reliably and coherently, patterns need to be articulated and shared.

When you articulate your design language it becomes actionable and reproducible. You start approaching design with a system in mind. Instead of discussing how to tweak an item to make it stand out more, you can have a suite of promotional patterns, each one targeted to achieve a different level of visual prominence.

Articulating your language allows you to gain more control over the system. When the design language is shared knowledge, you can stop focusing on the patterns themselves and instead focus more on the user.

Two types of design patterns: functional and perceptual.

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.

Shared Language

Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product.

Without a shared language, a group of people can’t create effectively together — each person will have a different mental model of what they’re trying to achieve.

Having a shared language would mean that we have the same approach to naming interface elements and defining design patterns, or that the same names are used in design files and front-end architecture.

If the user has a mental model of the interaction that doesn’t fit with the syst em image provided by the design team, then the user will be continually challenged by unexpected behavior from the system.

An effective design language bridges the gap between the system image and the (assumed) user model.

As your language becomes richer and more complex, you need an efficient way to capture and share it. On today’s web, a pattern library is one of the key examples of good practice in supporting a design system.

Pattern Libraries and Their Limitations

A design system consists not only of patterns, but also techniques and practices for creating, capturing, sharing and evolving those patterns.

A pattern library doesn’t guarantee a more cohesive and consistent design. It might help to correct small inconsistencies or make a codebase more robust, but a tool alone will have very little impact on the user experience. No pattern l ibrary will fix bad design. Patterns can still be badly designed, misused or combined in ways that don’t work as a whole.

A living pattern library is associated with better collaboration. Yet you might end up in a situation where only a small group of people uses it, or there might be too many disconnected patterns as a result of a lack of communication between the teams.

On the other hand, pattern libraries are sometimes blamed for stifling creativity, leading to generic looking websites. But again, a pattern library reflects the design system behind it.

If your system is fundamentally rigid and restricting, the pattern library can reveal and emphasize the rigidity. If it allows plenty of creative experimentation, a good pattern library can make the experimentation easier.

What Makes an Effective Design System

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.

A design system can be considered effective when it combines cost-effectiveness in the design process, and efficiency and satisfaction of the user experience in relation to the product’s purpose.

Shared Purpose

The most important qualities systems have is how they’re connected and organized: subsystems are aggregated into larger systems, which in turn form part of something larger.

The most important qualities systems have is how they’re connected and organized: subsystems are aggregated into larger systems, which in turn form part of something larger. No system exist in isolation.

In highly effective systems, we see that subsystems are connected and aligned toward a shared purpose: a design approach is mirrored in the front-end architecture; design patterns follow the guiding principles; the pattern language is applied consistently in design, code and the pattern library.

We see harmon y in the way those systems function: their workflow is more efficient, and the user experiences they generate feel more meaningful and coherent.

Design Principles

To make sure the purpose of the product is expressed clearly through everything we do, we would need to establish a few grounding principles and values. What is important is that the people involved in the creation of the product agree on those values and commit to them.

This principle will be expressed not only through design patterns, but the performance of the site, its tone of voice, and even how the team operates.

Shared Language

Alongside this process we will be making language decisions by choosing to refer to concepts in certain ways.

At first, the patterns and language choices will be shared informally. But as our team and the product grow, so will the language. Eventually we’ll need a more structured way to capture, share, and organize our design vocab ularies.

Useful Resources

• UI-Patterns.com
• Recognition over recall design pattern
• Researching Design Systems
• Using Visual Loudness for Better Wayfinding | Viget
• Grid System | Mailchimp
• A New Graphic Identity for the Whitney
• We Don’t Sell Saddles Here

Design Systems — Chapter 1, Design Systems Summary was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.