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. 

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.  

Learn More about Design Systems

You can learn more about design systems and other methods and techniques used by agile teams here.

The Inside Design Blog offers a comprehensive guide to Design Systems.

Explore Google’s Material Design to see the full potential of Design Systems.

See more examples of Design Systems here.