Design TipsFeaturedUX Design

What is a Design System?

Design systems is a design guide that benefits software, communications, people, and businesses.

What is a Design SystemLeading tech companies in recent years have shared their design rules and conventions to the world, and one well-known example is Google’s Material Design. Just like Material Design, there are Yelp’s Styleguide, Apple’s Human Interface Guidelines, and more. Even the U.S. government has its own set of rules called the U.S. Web Design System. And all of these are individually called design systems.

What is a Design System?

Design systems are essentially collections of rules, constraints, and principles, implemented in design and code. These 3 attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single page applications.

  • Rule: must have a visual cue or text to indicate CTA
  • Constraint: can only have 3 unique types — primary, secondary, and default.
  • Principle: should be used for specific user interaction

Let’s use a button as an example:

Buttons with distinct colors, text, and function.

The buttons have colors and text, fulfilling rule and constraint principles. The second button “Submit Form”, along with “Delete File” and “Notify Team” have all 3 attributes because it explicitly indicates a specific user action. A design system contains more complex components that fulfill these 3 principles that make up the application.

Are Design Systems Synonymous to Style Guides?

No, style guides focus mainly on, you guessed it, style. They include colors, fonts, logos, and brand attributes. They are heavily utilized by design and marketing teams because style guides contain the brand which is the first communicated. Design system is more than just visual presentation; it focuses on the ecosystem.

Are They Like Pattern Libraries?

No, pattern libraries are repositories of reusable components and interactions. Think of buttons, modals, and page layouts. They usually go hand in hand with style guide, because pattern libraries rely on consistent form and look.

Then What About Front-End Frameworks?

A front-end framework can be a design system, but not vice versa. Frameworks are more developer-friendly, providing technical instructions for developers, which can be discouraging for non-technical people.

With the rise of component-based JavaScript frameworks like Vue and React, design systems are focused on component design as well. But, some of these frameworks lack the tone, voice, and messaging.

View Design Systems Like Ecosystems

A design system is an amalgamation of style, components, and voice. MailChimp, an email campaign platform has a comprehensive styleguide, but also has a separate guide that focuses on voice and tone called, Voice and Tone. The purpose of Voice and Tone is to show human empathy, be mindful of human limitations (ie. disabilities), and provide an overall experience for usage. MailChimp uses these rules to set a uniform voice and throughout its platform and services.

Here’s an example from MailChimp:

What is a Design SystemA Disability Rule from MailChimp’s Voice and Tone

So Why is There a Rise in Design Systems Now?

The concept of design systems has been around for quite some time, i.e., 1975 NASA Graphics Standards Manual. However, only recently have some companies given attention to design systems as they realized their designs weren’t scaling as quickly as their businesses. With demand for good user experience, internal teams acknowledge this and build software with clean, consistent, and thoughtful designs through human-centered and systemic approaches.

What is a Design SystemNASA Graphics Standards Manual

As mentioned earlier, a design system is more than a static style guide. It’s a living specimen that evolves as the company matures and/or customer needs change. Lonely Planet’s style guide is an example of a living design system. The team at Lonely Planet is consciously aware of the value in user experience because “stale” designs can have detrimental effects to their business.

How Can Design Systems Benefit Me and My Company?

Design systems provide consistent, robust design patterns that can benefit the internal teams. Work productivity increases; collaboration becomes easier.

For designers, they can break down the user interface into small parts rather than the webpage as one entity. This component-based mindset allows them to easily define and change components. For developers, they can easily build these components which are easy to maintain the scoped styles.

Having a design system has beneficial effects to internal teams more than they’re credited for. It increases communication and understanding between disciplines, especially designers and developers. Ian Feather, a former engineer at Lonely Planet, sees it as a “collaboration tool bridging design and development teams” which can enhance work productivity.

Aside from current teams, design systems provide a better on-boarding experience for new hires. They serve as resources for new designers and developers to become familiar and locate patterns for their usage.

Are There Official Standards for Design Systems?

No, there are no official standards for design systems to abide by as not all companies have the same problems. For example, Lonely Planet heavily rely on imagery and design elements to draw their audience. They created icons that are suited for a travel destination website.

What is a Design SystemLonely Planet’s Destination Icons

Salesforce’s Lightning Design System contains design patterns, components, and guidelines, but doesn’t contain JavaScript code, allowing teams to use any front-end development framework of their choice. Google’s Material Design includes interactive motion guidance as it emphasizes on natural motion and smooth animation for a “delightful” experience. And my personal favorite, IBM’s Carbon Design System. Not only does Carbon entail patterns and guidelines, but also has a dynamic sandbox to customize components.

Okay, So How Do You Create a Design System?

So how do you create a design system for your company? First, gather your designers, developers, and SMEs. Next, do an inventory of all the colors, fonts, and components you have throughout the system.

————————————–

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.