Design Systems

Your constantly-updated definition of Design Systems and collection of topical content and literature

What are Design Systems?

A design system is a library of reusable components and guidelines that people within a company can combine into interfaces and interactions. What goes into a design system and how it is implemented can vary quite a bit from company to company, depending on the size and maturity of the design practice and the needs of the product team. 

At their core, design systems provide consistent styling and interaction guidelines for teams. For example, a design system might have:

  • standard elements, like input boxes, dropdown lists, and menu structures, for use in interfaces.

  • a list of approved brand colors and fonts, along with guidance for when to use them.

  • standard buttons and other interactive affordances.

  • interaction guidelines, like whether to use a slide out side panel or to support expanding pinching to resize images.

  • a flexible grid system so that screens are laid out consistently, including things like styling of cards or content separators.

  • rules about the placement of certain objects – for example, always keeping the log in/log out and profile icons in the top-right corner of the desktop.

  • lists of icons and what they mean.

  • content guidelines that specify how and when to use content – for example, whether all menu items should be verbs or nouns or whether the company refers to the user in the first or second person.

  • rules about when to use icons and when to use text as labels.

  • visual guidelines for where certain types of call-to-action buttons should be.

  • rules about whether to use things like auto-save vs explicit save/cancel buttons.

There are many other guidelines that a design system might have. Google’s Material Design is an example of a fairly consistent design system with lots of different types of elements to it and quite a bit of guidance on when and how to use each element. 

Screenshot of Google's Material Design

Google’s Material Design is an excellent reference for what a comprehensive design looks like and the advantages it offers.
© Google, Fair-Use

Design systems can also be created for tools that don’t have a visual element to them, such as voice-controlled systems. They would, of course, have a different set of features that were more focused on things like content and behavior, but they can be just as useful. 

The most important thing to know about design systems is that the most effective ones continue to grow and change as the needs of a product or suite of products changes. Also, design systems are only effective when their use is mandated. 

Ideally, the different elements of a design system are actually pieces of code that developers can drop into interfaces in order to build a feature quicker or prototype faster. Other times, they’re simply design elements in a prototyping tool that designers can reuse. 

Advantages of Design Systems

Design systems, when properly implemented, speed up the design process quite a bit. They also make it so that designers and the rest of the product team can focus more on the flow and logic of a new feature or screen rather than the visual design. 

It’s not that the visual design isn’t important! It can be. But design systems mean that we don’t have to design each individual element on each screen by hand from scratch. It also means that, when we do come up with a new interface element, it can be shared by the entire design team efficiently. 

If used properly, design systems encourage more consistency in our interfaces. Call-to-action buttons are always styled the same way and put in the same place on different screens, so users don’t have to hunt around for things. Menus work consistently, so users don’t get lost. On mobile, the same gestures work the same way from screen to screen.  

Illustration of a designer looking at seven different Save button styles, and saying: We don’t need six of these!

Design systems can help you achieve consistency in your designs, helping you avoid headaches down the road, when you need to reuse styles, or update a specific one.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Learn More about Design Systems

You can learn more about design systems and other methods and techniques used by agile teams here: https://www.interaction-design.org/courses/ux-management-strategy-and-tactics

The Inside Design Blog offers a comprehensive guide to Design Systems:
https://www.invisionapp.com/inside-design/guide-to-design-systems/

Explore Google’s Material Design to see the full potential of Design Systems:
https://material.io/

See more examples of Design Systems here:
https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6?gi=94f3c15a3eef

Literature on Design Systems

Here’s the entire UX literature on Design Systems by the Interaction Design Foundation, collated in one place:

Learn more about Design Systems

Take a deep dive into Design Systems with our course Agile Methods for UX Design .

Agile, in one form or another, has taken over the software development world and is poised to move into almost every other industry. The problem is that a lot of teams and organizations that call themselves “agile” don’t seem to have much in common with each other. This can be extremely confusing to a new team member, especially if you’ve previously worked on an “agile” team that had an entirely different definition of “agility”!

Since the release of the Agile Manifesto in 2001, agile methodologies have become almost unrecognizable in many organizations, even as they have become wildly popular. 

To understand the real-world challenges and best practices to work under the constraints of agile teams, we spoke with hundreds of professionals with experience working in agile environments. This research led us to create Agile Methods for UX Design.

In this course, we aim to show you what true agility is and how closely agile methodologies can map to design. You will learn both the theory and the real-world implementation of agile, its different flavors, and how you can work with different versions of agile teams.

You will learn about the key principles of agile, examples of teams that perform all the agile “rituals” but aren’t actually agile, and examples of teams that skip the rituals but actually embody the spirit.

You’ll learn about agile-specific techniques for research and design, such as designing smaller things, practicing continuous discovery, refactoring designs, and iterating.

You will also walk away with practical advice for working better with your team and improving processes at your company so that you can get some of the benefits of real agility.

This course is aimed at people who already know how to design or research (or who want to work with designers and researchers) but who want to learn how to operate better within a specific environment. There are lots of tools designers use within an agile environment that are no different from tools they’d use anywhere else, and we won’t be covering how to use those tools generally, but we will talk about how agile deliverables can differ from those you’d find in a more traditional UX team. 

Your course instructor is product management and user experience design expert, Laura Klein. Laura is the author of Build Better Products and UX for Lean Startups and the co-host of the podcast What is Wrong with UX?

With over 20 years of experience in tech, Laura specializes in helping companies innovate responsibly and improve their product development process, and she especially enjoys working with lean startups and agile development teams.

In this course, you will also hear from industry experts Teresa Torres (Product Discovery Coach at Product Talk), Janna Bastow (CEO and Co-founder of ProdPad) and Adam Thomas (product management strategist and consultant).

All Literature

Please check the value and try again.