An Intro to Design Systems

Ricardo
By Ricardo Thompson
Ds article

How would you like to speed up your teams design and development time? What about also adding more brand consistency within your web product ? A design system can bring new levels of consistency and scalability to both product and web design.

A design system can make adding new features and implementing product changes easier and more fluent, all while helping better maintain your company’s overall brand and messaging.

What is a design system?

Design systems are flexible in that almost every company defines them slightly different based on the way they use and integrate them. At its core a design system sets guidelines that your designers and engineers must adhere to, leading to more consistent implementation across a plethora of applications.

The term design system has been around for a bit now. In fact, a lot of people in the industry report that they already have some level of a design system in place, albeit some more intricate than others. We love this simple visual by Nate Baldwin:

A Style Guide is it’s own entity, which overlaps the CSS framework, design principles, design assets, and documentation.
"A Style Guide is it’s own entity, which overlaps the CSS framework, design principles, design assets, and documentation." - Nate Balwdin

In his short article he goes on to describe design systems as a culmination of people, processes, and shared assets that work together in an iterative cycle in order to unify products, negotiate and align cross-team communication, and increase efficiencies in building products from design to implementation.

I like to highlight the part where he says “an iterative cycle”, as it should be known Design Systems are a work in progress and should be constantly reevaluated and updated accordingly. In fact you could go a step further and say that they should never be “done”.

You may have also noticed that it’s called Design System but they extend far past just the design team. We recommend getting all of your teams involved in this process, and the earlier on in the process you can, the better.

Making a case for a design system

We suggest first getting your organization on board with the idea of investing in one. You can start by auditing your companies current product/website and what practices they currently have in place. This will give you a foundation as to which areas can be improved upon and most benefit from a design system. You can leverage this, presenting it as estimates of hours wasted on redundant tasks, and how you current workflow would benefit from more continuity.

As referenced in the image above it is important to know that design systems are composed of things your company may already have in place, things like pattern libraries, UI kits or style guides. However it is so much more and these are simply components of a design system. A good design system goes beyond this providing guidance to create smoother user experiences. It helps designers and engineers understand not just the “how” to make it, but also provide the “why” behind the design.

There are countless benefits to investing in and building a design system for your business. Some of the short takeaways are:

Consistency
Having a set approach will help create better user experiences for your customers while making work easier for your team. We feel the larger achievement of this is that it also helps build better brand recognition.

Reduce Dependencies
A good design system can help remove work isolation. Do you find that a single person often is tied up in or to a specific part of you process? Does this at times become a bottle neck for work flows? With a set approach to designing and its execution, your teams can collaborate and be in sync from start to finish.

More Robust Execution
Design systems can increase the speed and scalability of design. With a way to handle redundant tasks and procedures set, your team can now move from those redundancies to focusing more on the actual problems they originally set out to solve.

What’s included

There are no standard lists of what to include in a design system. In fact your Design System is just that- yours. There are however some common elements that the most effective design systems tend to feature.

Design principles

These are the standards upon which your system will be built and will help guide your team in the decision making process. A good recent read was Defining Design System Principles. In the article Ross says principles are catchy, memorable, and specific sentiments that unify the product experience under varying circumstances.

UI Kit / Component Library

Pic 1a // UI Kit:  Sample UI kit containing some of most common UI components. Pic 1b // UI Kit:  Sample UI kit containing some of most common UI components.
Pic 1 // UI Kit:  Sample UI kit containing some of most common UI components.



A UI kit or component library is a collection of user interface components like buttons, menu bars, modals, cards, and more. Having these assets documented and in one place allows teams to create consistent, user friendly designs at a rapid pace.

Pic 2a // Managing typography: Chances are you already have some form of a type scale in place from existing materials within your organization. Things like headlines and body copy should have a standardized scale for continuity. Take this time to polish these scales further by reevaluating sizing or leaning on proven methods like using the golden ratio. Pic 2 // Managing typography: Chances are you already have some form of a type scale in place from existing materials within your organization. Things like headlines and body copy should have a standardized scale for continuity. Take this time to polish these scales further by reevaluating sizing or leaning on proven methods like using the golden ratio.
Pic 2 // Managing typography: Chances are you already have some form of a type scale in place from existing materials within your organization. Things like headlines and body copy should have a standardized scale for continuity. Take this time to polish these scales further by reevaluating sizing or leaning on proven methods like using the golden ratio.

Pattern Libraries


A design pattern library or a central repository of approved and commonly used patterns within your organization. In regard to design a pattern library is the set of components upon which your site is built. If you haven’t dealt with pattern libraries much you might enjoy this write up by Jessica Skewes.

Pic 3 // Pattern Library:  You now have all the assets in place that will allow you start to build patterns. Be sure to utilize consistent design that reflects the brand properly. You’ve already outlined the colors, typography, and other design elements in previous steps, so rely on those to build your interfaces and solve problems.
Pic 3 // Pattern Library:  You now have all the assets in place that will allow you start to build patterns. Be sure to utilize consistent design that reflects the brand properly. You’ve already outlined the colors, typography, and other design elements in previous steps, so rely on those to build your interfaces and solve problems.

Process Guidelines
Process guidelines help designers interpret design principles as they execute them. While accessibility elements and guidelines help teams create designs that are more accessible to all users. This all comes back to principles you’ve previously defined but keep in mind we all should be striving for better [accessibility standards a set by the WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/).

This sets your systems foundation and is where the design patterns, guidelines and components start to take shape. You need to establish everything from what tools you will use, all the way down to the technical ecosystem.

Side note//
In addition to the visual components, the real unsung hero of design systems is the documentation. Your organization needs to decide how you want to document all of this information and we suggest you do so in a straight forward manner. Find a way to neatly separate and categorize topics, grouping things together in a way that makes sense and so that information doesn’t get buried or lost.

The main objective here is a clear and concise compilation of all this information. Try to avoid cleaver, catchy or even trendy non-sense. Stick to what works and more importantly can be easily understood.

Here’s what a few expert design systems look like:

Conclusion

This is a huge topic and one that we feel is best broken up in to smaller more digestible chunks of information. As we head into the new year, we have a series of these posts planned all around this topic. We’ll be taking a deeper dive into things like how to start a design system, codifying you work, and creating tokens over the next few articles.

Speaking of, it’s important to know that building a design system can be quite extensive. Often times it’s we find it’s just a few individuals that are excited about its possibilities and that are leading the push to implement it. With that there comes the frustration of finding the time and budget to build it and more importantly getting others to adopt and use it properly.

You may also consider adopting or adapting an existing design system to save time on your pass at a design system. For now, digest the material and start small. Remembering that these systems are ever evolving and are meant to scale. You got this!

Learn More:

Have a project we can help with?
Let's Talk

Get Started Today