Automation, consistency, branding, and optimization. These four concepts are among the most fundamental ones for any company that wants to succeed in its field and set the pace of its market. Throughout history, we have always strived for seamlessness, and it seems that by creating Design Systems, several companies have managed to achieve that.

In an era where the digital world is growing exponentially, setting the pillars upon which your company is built and grows is of vital importance. To that end, Design Systems have been created to allow companies to create and maintain libraries that contain guidelines and repeatable components, therefore enabling them to be consistent and giving them the ability to create applications seamlessly.

Design Systems are more than a library of elements and code snippets. They are entire guidelines upon which companies are build and evolve, enabling organizations to automate the process of creating applications, products, and services

Understanding the concept of Design Systems and what they have to offer can be difficult for someone who has never heard of the term before. However, if you are a working individual -especially in the digital market- you have probably “met” with at least one Design System already.

What are Design Systems?

Design Systems are collections of reusable components that are consistent and interrelated. However, they can be assembled together in many different ways, building any number and kind of applications. All components within Design Systems can always be assembled together, however, the results might vary depending on how companies and their employees choose to assemble these components, depending on the task at hand.

Design Systems not only offer companies the ability to automate and optimize their product-building process, but set the tone, pace, and values of the entire company. To better understand Design Systems, it is important to know their three main aspects:

• Rules
• Constraints
• Principles

Design Systems are not just collections of assets and components companies can use to build applications, they are large Pattern Libraries with “pieces” that can be assembled in countless ways, bringing different results to life

The LEGO paradigm

Reading about Design Systems may lead to confusion for someone who has never heard of them before. As mentioned above, however, there is a strong chance you have already worked with a Design System, even prior to starting your career as a professional in the digital world. For example, if you have ever played with LEGO pieces, you are already familiar with a Design System that is among the most popular in the world.

LEGO was founded in Denmark in 1932 with the sole purpose of creating children’s toys. In 1958, LEGO introduced the LEGO brick to the world and changed how we perceive toys forever. At the same time, the company introduced a Design System both internally, as well as to the public.

LEGO is used as an example for many different reasons worldwide, being a company that is so innovative yet so simple in its core that its principles and rules became a Design System of its own

The LEGO Design System has the following three pillars:

• Rules – All LEGO pieces must be able to work with each other
• Constraints – LEGO pieces are fixed in size and cannot be altered
• Principles – Pieces have to be simple, durable, and offer rich variations

When a new LEGO employee starts working at the company, they first need to understand these three pillars. When they do, they will be able to be great LEGO ambassadors and develop excellent LEGO products that are consistent with the Design System of the company, and its brand.

Solving the problem of inconsistency

Another important aspect of Design Systems is their ability to offer consistency. Whether you are an employee or an employer, you might have noticed that one of the most common issues that arise in businesses is the different approaches people have when it comes to bringing forth the desired results. In the digital world, whether it is software development, design, content, or anything in between, there are countless ways to create something.

This may lead to unwanted inconsistency within a brand, making it harder and harder for companies to keep track of their applications/products/services due to the fact that they are based on different principles, rules, and logic. Design Systems enter the equation prior to that stage, to ensure that this will not happen.

Building and maintaining a Design System helps companies and employees have clear guidelines to follow, therefore empowering brand strength and consistency

Design Systems are being created by companies that wish to automate the workflow of all employees at the same time. The main rules, principles, and constraints apply to everyone within a company, while other parts of a Design System might be focused on a specific aspect, such as design or coding, depending on the needs of each time.

Choosing and managing brand colors

To better understand the different ways that a Design System is implemented in Design and Code, we will take the example of the “Color” part of a Design System.

For Design, when it comes to Color, a Design System might have the following:

• Rule: Color must pass a minimum color contrast ratio of 4:5:1
• Constraint: A specific number of colors is set in the palette
• Principle: Color should be used in a meaningful way

For Code, when it comes to Color, a Design System helps with how developers define the SAS variables. For example, having a Red Color means that Code has a set of Red Colors, which maps to “Sforeground”, “Sbackground”, and “Sborder”. In turn, each of these three SAS variables that describe the function map to styles such as “.utilities {…}”, “.Components {…}”, and “.custom-styles {…}”.

Creating Design Systems

How do you do it, you ask? Creating Design Systems is a complex process that will reward you and your company with consistency, brand empowerment, and the seamless creation of applications that have your brand’s stamp on them, no matter how different they are from each other.

There are four main steps to creating Design Systems:

Visual Audits

First and foremost, a company should conduct a visual audit of the current design of an app, website, or other product. Taking detailed notes on the CSS inventory your company is using can provide you with a set of tools that will make the creation of a Design System much easier.

Visual Design Language

With your inventory in hand, it is time to start creating the visual design language of your Design System. This consists of components that can be used to create digital products of any type. Four main categories create the visual design language of a Design System:

1. Color – Usually, your company will have 1 to 3 primary colors, along with a range of tints and shades, to provide their designers with more options
2. Typography – Fonts matter a lot in design, and it’s best if you keep it simple with 2 fonts, one for Headings and content body, and one for code (monospace font)
3. Sizing and spacing – Rhythm and balance are important for spacing and size, with a 4-based scale being recommended more and more due to its use in Android and iOS standards
4. Imagery – Set guidelines for illustrations and icons, and try to use the best image format for the situation, based on these guidelines

UI/pattern library

Now it’s time to take a look at the components of your UI. We suggest you collect all parts of your UI that are currently in production, meaning every form, modal, image, and button. Create this library and then merge and remove what you don’t need. This will declutter your UI while providing your Design System with a good “arsenal” of pre-existing tools.

Documentation

Last but not least, as we have mentioned in previous blogs, is documentation. Documentation and standards are the two things that separate a pattern library from a Design System. Make sure you have impeccable documentation that includes guidelines for everything within your Design System. That way, existing employees will have a great point of reference while starting on a new project, and new employees will be able to easily understand how your Design System works.

Tags: Automation, Brand Empowerment, Branding, Design, Design Systems