The Whats, Hows, And Whys in Design Systems

If you follow the design world, you’ve probably heard of design systems. Some designers are delighted with the new trend; others are somehow skeptical. “I’ll have to learn something again,” they complain. But the design systems are worth it.

Why are design systems so important? To understand this, consider a typical scenario: you need a new interface for a product. To start the design, you collect requirements, talk to your team, brainstorm, and finally, everyone sits down to design.

But wait, which type of fonts should you choose? What color should you use to create the right mood for your design? If you choose blue, then the sensations will not be the same as red. Have you decided on the tonality of the overall site? What about the components themselves: have you matched the sizes of the cards and their elements? There are many details to consider when you design your product. This is one of the challenges that design systems solve. They speed up the design process and provide teams with many additional benefits. Design systems have already been considered from all sides: you can find many articles, posts, reports, and other materials. Despite this, everyone who comes across this term has many questions. In this article, we tried to answer in detail the main questions:

• What is a design system?
• What is this for?
• What is the difference between a design system and a style guide?

A design system is a structure that keeps all design tools and processes in order. It’s more than just colors, fonts, images, layouts, and style guides. A design system is a philosophy and language that guides designers to help them create products in a more meaningful way.

Irish web designer and writer Jeremy Keith describes the design system as follows:

“… It includes template libraries, style guides, and other objects. But don’t be fooled: even the most complete set of templates will never become a design system for you because the system is not the components themselves but what connects them. These rules and constraints dictate how these patterns work together and when and where appropriate to use each. “

This is how the Gapsy Studio design system looks like:

The design system is a combination of three entities:

• Visual language is what you see
• The framework is a visual language library
• Guidelines are the rules of how everything should look and how to apply these rules

A design system integrates styles, components, behavior patterns and forms the visual language of the brand. The system is used when the brand also has an application, a personal account, an online store, and different teams are working on them in addition to the site. System components may differ depending on the case, but most often, these are guidelines, UI-kit, patterns, documentation for front-end developers, and even a dedicated team of designers.

The design system is created after completing work on the project and provides the basis for creating new website design pages. This will help front-end developers and designers develop a new product visualization and reduce testing time at the next stage of work. Creating a design system will require effort and time, but in the future, it will be possible to create new website pages in a single form much faster than using only the UI kit.

Guidelines and Brand Books – Guides describe the use of a company logo, typography, and color. This is the basis for any design system.

Style guides (style guides) – Similar to guidelines, describe the visual style (like guidelines) and include editorial policies covering text style and message sentiment.

Key differences between the design system and the style guide and UI Kit:

• UI-kit and guideline are products, and the design system is a methodology;
• UI-kit is assembled after the completion of the project design;
• A design system is created when at least one project is completed, and there is data for analysis;
• If you have few pages and content, you can limit yourself to the UI-kit, and in other cases, you should register the behavior of elements and project rules in the guideline;
• When working with several projects under one brand design, you will need your design system to unify and simplify work in the future.

Read more about a Style Guide And Why Do You Need It in one of our latest articles.

To understand how product design works, you need to sort everything out. The design system helps in this – a library of grids, fonts, and various UI elements.

Unfortunately, not all companies have such a “brand book” for interface design to create it. You need to systematize a large amount of information. Fortunately, many companies and services that already have it are generously making it public. We invite you to take a look.

The Design Systems For Figma website publishes the design systems examples of global companies and services: Uber, Atlassian, Apple, Slack, Figma, etc. Plus, they can be loaded directly into Figma to explore all the components. The case when you can find out in detail where the legs of your favorite product grow from. Let’s take a look at a couple of cool company system designs that are familiar to each of us:

1) Uber design system example

Iconography, illustration, composition, movement, photography, logo, color, tone of voice, and typography are the nine main elements that the Uber design system includes. Their design system is flexible and easy to use and therefore maintains brand consistency.

Still not sure that branding is essential for your business? We can dispel these doubts by our article What Is Branding and Why It Matters.

In addition to these nine elements, the Uber design system also has such a concept as Base Web. It is an open-source UI component library focused on the basics such as typography, color, grid, iconography, buttons, lists, and controls. All of this helps designers to easily customize the product in a variety of ways by overriding styles.

2) Audi design system

The Audi design system provides the user interface and UX principles and components with expandable code snippets. The design system is a unique element on each component page that demonstrates every correct and incorrect implementation.

In addition, the Audi design system offers instructions for user interface animations that can guide users through the process, improve orientation or provide feedback.

3) Microsoft fluent design system

In 2017, Microsoft introduced the Fluent design system. They presented user experience frameworks and user interface components with standard code, a consistent design approach, and a consistent set of interactions.

The new design thinking is based on five basic principles:

• shine
• depth
• traffic
• materialism
• scalability.

Microsoft has developed a new generation of design with the future development of the company’s products in virtual and augmented reality. Inspired by the physical world, Fluent helps you create experiences that feel as natural as possible.

4) Apple design system

Apple’s design system is precise and exciting. Designers can watch videos and tutorials on creating intuitive, forward-looking solutions and finding the latest technology to optimize iPhone applications. This includes creating the perfect push announcement and design for a global audience.

The designer can get lost in Apple’s inspiring designs with hundreds of hours of video in his collection. Apple is committed to developing products for global audiences and offers marketing and availability advice that will vary across international markets.

5) Trello design system example

Trello’s design system is called Nachos. Nachos serve as a delicious resource with all the ingredients you need to create a successful design, such as their favorite snack. Yes, the whole system is based on food toys.

Trello’s vision for design is that everything should be done step by step, just like their product. The design for Trello is all about simplicity, interaction, and fun. They seek to empower their users by ensuring that they receive information in an accessible form to be comprehensible at first sight.

Design systems are a logical development for the entire web. They greatly simplify the work on large products, update them faster, release new projects in the brand ecosystem, and make the user experience smoother. After creating a design system, it is crucial to figure out how to implement it in its practice.

We hope everyone has learned something valuable from the article. Suppose you are looking for a company that can make you a quality design system that will provide a functional interface for your product in the long run. In that case, we offer you our professional designers’ services. We know exactly what you need because we keep up with fashion design trends and constantly learn new things. Convince yourself of our professionalism by our projects at Dribbble and Behance and look at our services and what we can provide you in your work.