Communicating Design Patterns

An Introduction to Design Systems

If you’ve been reading much in the design world lately, you probably know that design systems are all the rage. If you’re not a designer but curious about what everyone is talking about, welcome! 👋 This is for you too. 😃 I thought it would be helpful to share what design systems are, why they’re useful, and a few tips for effective systems. But before we can talk about systems, we need to talk about patterns.

Design Patterns

Because of this larger context, many designers have opted to use the term “design patterns” to describe the way design influences how a user experiences an application. Well-designed patterns often employ nuanced and nearly-imperceptible details to create consistency and uniformity. In fact, if you have excellent design patterns, your users will likely not notice them at all. The buzzword for this “intuitive design.”

Communication Breakdown

team communication diagram

The problem becomes compounded as your team grows. You’ve probably seen a similar diagram before. I like this visual for describing how the complexity of team communication grows with size. A small team of three to four people has at most six lines of communication, a fairly manageable number. But as your team grows to five people you nearly double that effort with ten lines of communication. Add two more people and the problem increases to twenty-one lines for only seven people. Depending on where you work, that might sound like a large team, but when you start adding project managers, designers, developers, and QA, you can reach that number easily. Communication quickly becomes a complex issue, and keeping everyone on the same page requires constant effort. There are a lot of opportunities for any one person to be out of sync or miss an important detail. This is where design systems are valuable.

Design Systems

Wait, Don’t You Mean Style Guide?

While design systems are certainly concerned with communicating its guiding rules and principles, they also involve the implementation of that system. Depending on how the system is structured, this might be a component library, or it could be a collection of CSS style sheets. Either way, it provides a mechanism to implement the principles of the design system. If you’d like to see some good examples, UX Pin has a list here.

Intent & Implementation

Again, the goal is communication. We want our system to provide enough support to bridge the complexities of communicating design intentions to everyone on the team. If our system is doing its job well, it should be enabling designers and developers to effectively translate design principles into our application(s).

What Makes a Good Design System?

Consistency Is Baked-In

Make Mistakes Difficult

Encourage Collaboration Between Designers & Developers

Thanks For Reading!

You can find me on Twitter and GitHub. If you enjoyed this, you should also subscribe to my newsletter!

design systems @workday