Design System
(An Overview of Style Guides and Pattern Libraries)
As newbies to Product Designing, we often tend to confuse Design Systems, Style Guides and Pattern Libraries with each other. This is expected as they all relate to each other. They, however, are not the same. We’d start by defining them to understand what they are about and help you tell the difference between them all.
Design System:
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
The Design System, however, unlike the Style Guide and Pattern Library, is not a deliverable but a set of deliverables. This means that it combines all the artefacts of both Style Guides, Pattern Libraries and other subclasses that make it up.
Style Guide:
This is a subclass of the Design System. It gathers and defines all elements of a brand’s visual style, including its typography, colour, illustrations and icons.
Pattern Library:
This is also a subclass of the Design System. It defines the UI components of your design and how they should behave. It also contains the visual elements of your product as composed components.
To better understand each of these terms, how they work and how to apply them in developing a product, it is best to understand them in terms of the questions they answer.
HOW AND WHERE?
Style guide answers the questions of how elements in the product should look, where this look should be applied and in what certain way it should look.
From the most visible visual element in the image above, which is the Typography, we can see that this style guide contains how the product's text should look, including its Font Family (Lato) and Styles (Regular, Italic and Bold). It also shows how it should look when each font variant is applied. Questions of how all of the visual elements (Grid system, layouts, colour pallets, typography, iconography, imagery and photography) will look at the product, where these visual elements should apply, and in what way should be the basis of the rules the Style Guide sets for the product's visual style. Style Guides serve the functions of
- Providing consistency
- Shared vocabulary within the team
- Onboarding; and
- Code Standardization
It is important to note that Style Guides are different from Brand Guides. Here’s a link to an article that differentiates them properly.
WHAT AND HOW?
Pattern Library answers the questions of what the UI components of the product are, how they should be, and how they should behave. Unlike the Style Guide, which deals with the visual elements and how they should look and behave, Pattern Library defines what they are and dictates how they should behave in the design. Simply put, a pattern library is a collection of design components that appear multiple times on a product.
Pattern Library contains reusable components of a product like forms, cards, navigations and literally any components that will be used repeatedly in the product.
We can see now that while the Style Guide shows off the aesthetics of a product, a Pattern Library is composed of the reusable components in the product being built. Moving on to the Design System now.
OVERVIEW OF THE DESIGN SYSTEM:
Beyond being just an umbrella where the Style Guide and Pattern Library are housed, a Design System also consists of the team's values and what they want to communicate. Building a Design System entails defining how many people will use the system, their profile and if they are well-versed in understanding the product. The team should also know how many products to align, on what platforms, and using what technologies.
Design System as a Single Source of Truth:
A Single Source of Truth (SSOT) allows the whole company to access changes and updates. On top of that, it creates a common language between stakeholders, contributing to better communication. It allows for a peer-to-peer review system that can help get teams on board the Design System. By reviewing their colleagues’ work, teams increase their Design System awareness. It helps designers understand if the Design System can scale to their needs or if it needs improvement.
Design systems are an integral part of a team as it closes the gap between the designers and UI engineers who work on multiple products and often re-create or duplicate work done by other teams. It satiates the need for scale, clarity, efficiency, and consistency in Design. A lack of clear direction can bring inconsistencies and misunderstandings in the design, often resulting in a ripple effect that affects the User Experience. Implementing a Design System is not an action but a process. It requires first starting with the basics, the team working hand in hand collaboratively and working on a Design System that will be updated in real-time with their product.
Like a living organism, the Design System evolves as an integral part of the company. It adapts to the ever-changing, fast development cycles of product development and scales efficiently if built with care. It becomes of huge importance for companies to weigh benefits and challenges, to understand the return on investment of implementing their own Design System.-Joao Araujo
