This is a problem that happens a lot, and not just to websites. Software applications and mobile apps also need to be made cohesive and visually appealing, no matter how much they expand or change.

Doing this can be a challenge. That's where design systems come into play. Design systems are a framework for making sure that whole projects are built, expanded, and maintained within a single visual framework.

Design systems essentially make a language of design elements for your project. Hence they are sometimes called design languages, and the terms are roughly interchangeable.

Here's what we'll cover:

• Why you should use design systems
• Drawbacks of design systems
• Parts of a design system
• Implementing a design system

Why you should use design systems

There are lots of good reasons to use a design system for your project.

Design systems help you work faster at scale. When your project gets really big, you can turn to your existing protocols and resources to come up with ideas that will fit seamlessly with your existing work.

This, in turn, shifts focus to larger, higher impact problems. Once you have the look and feel down for the project as a whole, you don't need to place as much attention on crafting each individual UI element uniquely. Instead, you can be concerned with making sure that each piece matches the broader system, and that they fit together cohesively.

Design systems create a unified language between teams. On a large project, there will be many different types of contributors at work. The people who design the fonts will be different from the people who design the loading animations and from the people who write the copy. By having a set of already chosen guidelines, you can ensure that all of these creatives will understand the broader vision of the project, and be able to talk about it in high level terms.

By relying on a design system, you can more easily create visual consistency. The pattern library of a design system contains pre-arranged collections of UI elements that are made to work and look great together, so that you can simply pull them into your project without having to worry about visual consistency.

Design systems help you make sure your project is usable and accessible. Guidelines for accessibility are complicated and change all the time, so it helps to have premade assets that are easy to update.

Finally, design systems help onboard new designers and contributors. People who are new to the team need to get up to speed with the overall look, feel, and direction of the project. A good way to start is to hand them a set of guidelines, components, and UI patterns for them to look at and study.

Design systems and accessibility

Globally, about 1 billion people have one or more disabilities. Like anyone else, they use the internet, but they often need support. Websites and apps should be made with common disability needs in mind, such as impaired vision or motor difficulties. This is good not just for users, but also for businesses- Google boosts websites that have strong accessibility ratings.

Making your project accessible can be a challenge. There are tons of accessibility guidelines that need to be taken into account, and they go into minute detail about individual UI elements.

That's where design systems can help. By creating a design repository first, with accessibility in mind from the beginning, you can ensure that your finished product will be easy to use for everyone. Plus, making changes to address new accessibility standards will be easier.

Drawbacks of design systems

Everything in life has drawbacks- even for a framework as useful as design systems.

Design systems are necessarily time and resource intensive. It takes a lot of effort to build out the system you want. For large projects, this time is usually made back by the overall time savings created by using a design system. But if you are working on a small project that you know will remain small forever, it might not be worth the effort to make a design system.

Another drawback is that design systems might require a dedicated team. Somebody needs to create, maintain, and expand the relevant documentation over time. If you are a solopreneur, it might not make sense.

Ultimately, it's up to you to decide whether a design system is right for your project. But for anything complicated or long-term, it's almost always a good idea to have at least a simple system.

The two parts of a design system

It's easy to think that a design system is just a bunch of guidelines, rules, icons, UI elements, and more. But that's just half of the equation. A design system really comprises two parts:

• The design repository
• The people who manage it
  

You can't have one without the other. This is because design is never static- although a good design repository will serve as an anchor for your whole project, it needs to be constantly updated and maintained, too. And a lot of the information it relies on will live in the heads of the people that work on it.

What's in a design repository?

A design repository includes all the materials that go into a design system, whether they be physical or digital. This may look different from project to project, but will typically at least contain the following three elements:

• Style guide
• Component library
• Pattern library
  

A style guide is like a general handbook for understanding the brand's style and how it should be implemented. It will include information like colors, fonts, voice, and vocabulary. This general purpose information is relevant to practically anybody working on the project- everyone from coders to copywriters to artists.

A component library is a collection of individual components that UI designers can use in the project. These are pieces that have been carefully crafted and coordinated so that they match the style guide. Each of these pieces will have several pieces of data attributed to it, such as:

• Name
• Description
• Attributes
• Code snippets
  

The pattern library is a collection, not of individual UI components, but of collections of UI groupings or layouts that go together. For example, a pattern for a page header might include a title, a breadcrumb, and primary and secondary buttons. Having a good pattern library helps keep the project cohesive as a whole.

The importance of the design team

The design team is responsible for building, maintaining, and expanding the design repository, in addition to using that repository to help build your app or website. A typical design team may have several members, including:

• Interaction designers
• Visual designers
• Software developers
  

No matter how great your design repository is, it can do nothing if there is nobody who can use it. Your design team is necessary for housing the subtle, intangible understanding of how the design system works in their own heads.

Implementing a design system

There are three ways to implement a design system for your project:

Adopting an existing system outright. There are tons of free and open source design systems available on the internet. If your project is simple and doesn't need much originality, you can simply plug one of these right in. Some famous open source design systems include:

• Material Design, first launched in 2014, is an open-source design system from Google. It offers features such as grid-based layouts, responsible animations, padding, and depth effects.
• Fluent UI is the design system that Microsoft uses for Windows. It can also be applied to Mac, Android, iOS, and more.
  

Adapting an existing system for your own needs. If you can't find a design system that works for you, you can choose one that's close and then add or change whatever else you need.

Creating your own from scratch. This is, of course, the most labor and resource intensive approach. It also has a higher chance of failure. But if it works, you can have your very own, proprietary, custom built design system made to fit your needs perfectly.

Tools for design systems

Because the resources that make up design systems are so broad and varied, the tools used to produce them are also broad and varied. They fall into a few categories:

Design Tools. Figma, Sketch, and Adobe XD are all used to create design repository elements like typography, buttons, and other UI components.

Development Tools. React, Vue, Angular, and other front-end tools are widely used to implement the workings of individual UI elements.

Version Control and Documentation Tools. Github, Storybook, zeroheight, and other tools help designers and developers coordinate while tracking changes.

Final Thoughts: Thinking long term with design systems

Design systems help you extend and maintain your work for long into the future. Although they are a significant upfront cost in time and attention, they help you to be able to easily expand your project while keeping it looking clean and consistent.

In an era where short-term thinking is the norm, this approach is an asset. Being able to quickly and accurately update your product will give you an advantage over competitors who cannot.

Many of our projects involve either building design systems or extending existing ones. This is one way that we provide value to our clients, now and in the future.

Do you have a digital product you want to bring to life? Let's talk!