Open Source

Do You Need a Design System?

Everyone has heard of DNA. It exists within the cells of almost every living organism and — continue reading
August 22, 2018

Everyone has heard of DNA. It exists within the cells of almost every living organism and contains the instructions that an organism needs to develop, live and reproduce. It’s the guidebook to all of our genetic information. And it’s also a great way to explain the concept of a design system. In this post, we’ll discuss the advantages of design systems and the best method to both create them and keep them up to date.

Here is why design systems are so important. There’s something called design debt. It’s when concepts you’ve designed begin to decay, just like real-world objects. Seems silly but as designs evolve and new parts are added, the stability of the design weakens. Eventually, you’ll have to pay your debt and redesign your project with all new elements included. Fortunately, design systems help identify inconsistencies before too much debt is created.

Let’s go back to DNA. A design system can be seen as the ‘DNA’ of any design project, ranging from web-platforms to physical products and even services. It gives meaning to each design element and makes sure that all elements work together to create value for businesses and users. And helps avoid design debt. Sounds pretty awesome to me.

What is a design system?

A design system is the result of your (and your team’s) efforts to make a design consistent, meaningful, and impactful. According to this definition, the terms floating around the internet nowadays, such as  ‘component library’, ‘style guide’ and ‘design language, can all be considered design systems because they share the same purpose: keeping the design consistent.

What does a design system consist of? Actually, the answer varies according to different design systems. There are, however, a few guidelines that need to be followed to make a design system useful. These guidelines can be found on two different levels: macro and micro levels.

Macro-level guidelines

On a macro level, a design system needs to show the goals that the design aims to achieve, how it plans to achieve this goal, which rules need to be followed – just like a guiding star.

To create this guideline, the following three aspects should be considered:

  • Business aspect: which business goals should be achieved and which rules need to be followed to achieve them? This aspect is especially important for commercial products, platforms, and services. Take e-commerce websites as an example; their goal is to generate more leads and sales, and the rules that need to be followed involve conversion rate, SEO performance, and brand strategy.
  • User aspect: what are the users’ pain points and how they can be solved? A great design solves users’ pain points and has those in mind at all times. For example, sales agents always need to look up customer information and place orders very quickly repetitively every day. A design guideline that we created for this included these goals:
    • Agents should click as little as possible
    • Agents should be able to perform tasks completely mouse free
  • Design aspect: what are the basic principles that ensure a good user experience? There are basic guidelines that designs should follow to increase design quality. One of the most discussed design guidelines is ‘usability’, which is defined as the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.

The macro goals and guidelines of the Canvas Design System

 

Micro-level defined elements

On a macro level, guidelines show the direction that each design needs to follow. On a micro level, the guidelines are translated into reusable design elements, each of which comes with instructions about what they are and how they can be used.

In an atomic design, design elements can exist on different levels, but no matter which level they belong to, the following information should be provided:

  • Name: a clear and logical name is important for communicating between team members. If possible, the same name should be also used in coding. And when working with clients, make sure they are familiar with these names too.
  • Meaning: a clear description of the visual and functional role of this component. These meanings decide when an element should be used.
  • Specifications: specifies the details of each element, such as the hex code of a color or the behavior of a button.
  • Do and don’ts: list the common mistakes, so it won’t be misused.
  • Example: an example that provides a direct impression of how this element can be used.

Specification of ‘cards’ in a material design system

How to create a design system

Creating a design system takes time and there is no standard procedure for it. That doesn’t mean it will be difficult! It pays off in the long run. There are the two steps below that can help get you started:

Create a mind map

Are we really using the skills we learned in school? Yes! Since each design system can include multiple guidelines for different aspects of the project (as we mentioned above), it’s useful to organize them in a mind map for a clear overview of how the system works for everyone involved.

It’s important to involve relevant stakeholders in the creation of this mind map. For example, does the customer success team understand how the design helps their customers? What about the marketing team? And the developers? They can also ensure that the system is representative of the project. Later on, this map will be used as the reference to judge and communicate all the design results.

Guideline mind map example for a design system

Create an element inventory

It doesn’t matter if you are creating a design system for a brand new design or an existing design, it is useful to create an overview of all the elements that are used. Each element can be as small as a font type and as big as a complete webpage.

Later, each element can be tagged by different level of complexity as specified in atomic design principle, as well as the functions it provides. This makes all the elements more structured and easier to find and reuse.

 

Elements on different complexity level in the atomic design system

This exercise is not only useful as an overview of design elements. It will also help us see when we are using too many elements and can help us identify and remove the replicated elements that have the same functionality.

This element inventory can be created and maintained using design tools such as the Sketch App. If you have a reusable element inventory, it will make designing new features and collaborating with designers much easier. You can read more about this concept in another blog of ours.

How to maintain a design system

Maintaining a design system is as challenging and important as creating one. Below are three tips that are useful for maintaining a design system.

1. Review the design system constantly

Design systems are never set in stone. We always need to review the design systems with new insights from continuous designing and testing. Make sure that you review the system after

2. Maintain the design system, not the entire design

Maintaining the design system is different from maintaining the design of all features. The end product should always reflect the most recent state of the design. So there is always one single source of truth. This also forces us to perfect the product rather than just the design files. We need to make sure the design system is updated, so when a new feature is designed, the most updated system is used to create it.

3. Make changes systematically

When something is designed systematically, it should be changed systematically too. Otherwise, the system will begin to disappear and the design would slowly evolve into chaos. Therefore it is always wise to consider the wider impact of any change to the system and work to defend the design system actively.

Stay consistent

Design systems are the DNA of any designed product or service. And the advantages are clear. They ensure that your design stays consistent everywhere and over time.

When you create your design system, keep in mind: review the design system constantly, maintain the design system (not just the design), and make changes systematically. Need some more inspiration? You can find many design system examples here.

“Styles come and go. Good design is a language, not a style.” –Massimo Vignelli

Contribute to Open Social or Drupal

Feeling creative? Contribute to Open Social and/or Drupal! A good starting point for contributing to Open Social is the Open Social Documentation Guide. If you want a starting point for helping Drupal to grow you can find many different ways on the ‘ways to get involved’-page on Drupal.

In Open Social we are working on our design system constantly.  How is your design system going? Let us know below in the comment section.

In this article we discuss

Related articles