By Applaudo Studios

2021-11-15

Tags

Design

Let’s talk about Design Systems and why we need them

Learn more about Design Systems and how to create one.

Have you ever asked yourself when is the right moment to start creating and using Design Systems for your projects? If that’s the case, then this blog is for you.

But before we start, we need to fully understand what a Design System is.

What is a Design System?

A Design System is a unique source created with different elements, based on the term and definition of Atomic Design, that allow you and your teammates to design and develop digital products in the easiest way possible. This group of elements is a set of reusable parts, composed of a Style Guide, Master Components, Code Conventions, and Guidelines that have the purpose to facilitate the work of the team. In other terms, it allows the product team to speed up their workflow, their delivering and iterating process, their quality maintenance, and the functionality for the product itself.

Now that we know what a Design System is, let’s take a look at the best cases where you can design, develop and implement one for your products.

A big digital product

It isn’t the same to have a simple web page, a simple landing page, or a simple hero page as having a complete platform that requires lots of features.

Airbnb and their amazing app

Initially, you can create and use a simple style guide or pattern library in your projects to achieve consistency; however, if you need to design a complex platform, you will need to evaluate what kind of features it will include, since those may require different needs.

Now that we have cleared that out,, we can start focusing on creating the Design System, which will need to be created on both, the design and the development side. The creation of these elements will make it easier for both parts to create new screens by implementing styles, components, and guidelines to the mix.

Scalable project or product

There are some fantastical cases where the stakeholders of the project know exactly what they want for the future of their project or product, but getting to have the first version of it, might not be as promising as they might think, and that’s exactly when having a design system might bring joy to the whole process.

The case of Uber and its evolution

People tend to think that a roadmap is only needed for the first release of the project. However, it is most needed when things are already on track because of the many different pivots that a project might take. It’s because of this reason that the implementation of a design system will come in handy for faster iterations and quality changes that will improve the process.

The inevitable implementation of new features and improvements are for sure easier to handle if you have an integrated design system, even if these tasks are made by other people. Design systems should make handoff easier among teams that are required for different needs because the start point is already there and it could be used for endless possibilities by giving it consistency and quality.

One company, different products

Have you ever noticed that there are lots of tech companies that release many products that have no consistency at all?

Well, if they do need a design system for their products, so do you for your own!

Google Workspace and their different products

There are indeed many examples of how to use and create a proper design system; and the ones I’m about to mention, are not an exception.

First, we have “Material Design”, made by Google

This was the first design system to be used and implemented by a company. It launched alongside Android OS and was specifically made for it, until later on when Google started implementing it into all of their products for the sake of consistency and high-quality mockups.

Secondly, we have “Human Interface Guidelines”, created by Apple.

This is an amazing design system that shows us how to create consistency on many platforms because of its use case and documentation for all their devices.

Last, but not least, we have the “Atlassian Design System”, created by Atlassian themselves.

This exact design system might not be at the top of the mind of everyone, but it certainly is a great example of how to document excess information that includes master components, patterns, and continuity among different products.

Having said that, I now want to share some tips with you that I have personally learned over my time at Applaudo on how and when to implement a design system in a project.

First things first!

The very first step is to get to know the project by asking questions to your stakeholders, the product owner, the product manager, or anyone invested in the project. This allows you to know the exact requirements for the initial scope and which paths to follow to fulfill the project’s needs.

This exact “first thing to do” was the first step into my path on how or when to create a design system.

Let’s start with Design… Thinking?

You may think the use of a design thinking process might be unnecessary for a design system, but what if I tell you, that is exactly what’s needed for its creation?

Just in case you are familiar with the design thinking process, you might encounter that it consists of an iterative process that allows us to truly understand what the user needs, what their problems might be, what their possible solutions are, how is going to be prototyped, and how it is going to be tested.

Defining styles for the product

This step is when the magic happens, and I would like to explain it to you with a little anecdote.

When I was fully aware of the main goal for the product on the first project that I worked on, I knew I was able to start defining the foundations of it and these foundations include the following:

  • Defining colors and shades.
  • Defining typography and its scale.
  • Creating your icon library, or simply using an existing one.
  • Defining object elevation.
  • Defining the correct grid on different screens.

Designing components

Once you have defined all the foundations mentioned before, it is essential to start creating all the master components that will eventually bring the product to life.

If I’m being honest with you, this step is never-ending, and you might be asking why.

The answer to that question is that you need to be aware that a digital product is ever-evolving and ever-changing, so the components inside of a design system need to be scalable in terms of how it may change throughout its life.

Now, in terms of creating these components, you need to take into account the following:

  • Defining the right categories of the components
  • Establishing all states of each component.
  • Defining the right naming convention for each component, based on categories.

Establishing a pattern library

Now, having the foundations that are the styles that you will use for the components, and with the components already designed, it’s time to define how is going to work some functions and structures in all your product or products. In this case, a Pattern Library is the best way to establish how your team has to use all the elements from your Design System. A ‘pattern library’, as the name suggests, is a library of user interface (UI) patterns that designers and design teams use to build digital products. To start to define this, here are some tips that you can follow to make it easier:

  • Research the existing UI Patterns to know what kind of patterns are aligned to your product
  • Consider all the patterns that your product could require and list them as many as possible as many of them as possible
  • Use the components that you already create to optimize time when you start to design the patterns library

Creating a documentation

Here’s where the Design System starts to get a clear form to everyone that will use it. Once you have defined the foundations and the essential components, you need to start documenting all of that. How to start? Well, these are the steps that I used the first time that I create a design system in a project.

Clapp, Applaudo’s Design System
  • Look for a platform to document all the information. You could use existing platforms such as Notion or Zeroheight that will save you some time. But if needed, you can also build a custom website for your design system.
  • Create an overview, so everyone understands and knows how to use it.
  • Write a description for every foundation element and every component
  • Establish the guidelines to use all the styles and components.
  • Make an easier definition of the guidelines using Do’s and Dont’s comparatives.
  • Show use cases for the elements on layouts. This will make it easier to know how to use the components for designers or developers.

Well, I hope that this will be helpful for you!

Do you want to learn more about design systems? I recommend you to check our Design System – Clapp and get inspired 😉

Don’t forget to follow us on Instagram as @applaudostudios and @applaudodesign

Disclaimer: All rights belong to the respective owners of the images and resources used.

About the author

César Retana

César is a UI Designer at Applaudo Studios almost 1 year and 7 months. He has a bachelor degree in Graphic Design, but loves design digital products that makes easier the tasks of people. He plays guitar, love books and is a coffeeholic. Follow him on Instagram as @ui.cesar


Share
Current Time

slv

Calle La Reforma, C.C Plaza San Benito, local 1-3 San Salvador, SLV

Current Time

tx

C701 Brazos Street. Suite #1600 Austin, TX 78701, US

Current Time

nc

128 S Tryon St, 21st Floor Charlotte, NC 28202

Current Time

CHL

Cerro Colorado 5030, of. 309 Las Condes, Santiago de Chile, CHL