When do you start building a design system, where should you start? It can be difficult to know when the best time to start implementing a new process into your current workflow.
Plus, there are a lot of areas to consider when starting from scratch and what should be built first — in terms of style guides, pattern and component libraries, and design systems. With each floating around it can be hard to where to start. While there are benefits to building a design system there are also downsides, however, we will discuss both the good and the bad — since they each depend on what you are looking to solve with a design system.
The Difference Between Style Guides, Pattern Libraries, and Design Systems
While style guides, pattern or component libraries, and design systems on the surface may appear to be similar each has its own use and purpose, but they can also be considered as pieces of a design system. At Hounder, we have lots of experience building design systems that allow our partners to grow and to help you better understand the differences between all the options here are some brief explanations about each.
Are generally where we organize the actual styles and brand that our company uses every day, which will contain fonts, typography, icons, logo, grid layouts and spacing (margin and padding). For example, when an organization has a specific guidelines on how to place a logo, dimensions, size and/or colors to utilize then this is comprised within a style guide.
Pattern and Component Libraries
Are an organized set of related and reusable components that can contain code examples, design guidelines, and use cases for where / when to use each pattern or component. It’s better to visualize patterns as a collections of components. For example, a pattern for the homepage banner may contain headings, text, background images or video, and buttons which each on their own are seen as components.
Contain a set of semantics, syntax, accessibility, content tone, and context that provide a base for a shared design language. For example, a design system is generally where designers identify how to communicate through the use of the style guide and component library so that when they are designing new patterns or colors it all cohesively fits together.
When we think about each of these separately we can see that they each have their own distinct use cases and purpose, but collectively they each fit together to create a cohesive and what I like to think of as a shared language that can bring disparate teams (design, development, marketing) together. In the long run a design system is only a piece of the puzzle in bringing teams together since open communication and adoption are the real keys to having a successful design system.
Getting Started with Design Systems
While it might be nice to blankly say, “Everyone needs a design system.” While there are advocates on both sides of the fence when looking to build or not build a design system we should look rather at the benefits and the drawbacks to see if building a design system in your organization works. I first talk about the common drawbacks that are presented when talking about design systems and then I will discuss how a design system could benefit your organization.