Style guides, pattern libraries and design systems

Published in

Bootcamp

4 min readAug 26, 2020

The worst thing that can happen to a project is to have a particular element appearing in different ways and forms without a laid down rule. This will certainly make such project another failed one. The problem of inconsistency can only be tackled using style guides, pattern libraries and design system.

Style Guides

The best way to achieve project uniformity is by creating design documentation, or style guides.

A style guide is a set of standards, principles and rules which helps to improve the digital presence of a product. It is a document that a UX designer creates to document a growing and ever-evolving set of design guidelines that arise from the design process.

In creating a style guide, UX designers are basically documenting their own thought process as they design a Web site, application, or system. Therefore, the goal of creating a style guide is to document your own design decisions.

Components of style guides:

A style guide can have

Grid system, Layout, Color, Typography, Iconography, Logos, Imagery

The benefits of using a style guide

Truthfully, style guide is useful for the following functions:

Code standardization. Style guides help create a consistent HTML, CSS, and JavaScript code so front-end developers can follow the same standards designers do.

Shared vocabulary. When all your team members have one document they can refer to, the work really becomes collaborative.

Consistency. A unified visual experience is one of the main qualities of brand identity that help you create a trustful relationship with your audience.

Onboarding. New designers can be involved in making design decisions from the very first day and don’t have to constantly bug older employees.

Pattern libraries

A pattern is a reusable solution to a problem that often occurs in UX and interaction design. A pattern is reliable because it has worked over and over again.

A Pattern Library will integrate functional components and their usage.

Some common pattern category includes;

Navigation: Think about menus, breadcrumbs, footers, pagination and tags
Selection: Choosing the best use of buttons, checkboxes, lists and toggles.
Search, Filtering and Sorting: This category gets to the heart of easily finding information that’s needed and hiding what’s not.
Messaging and Notifications: Alerts, pop-ups and progress bars all fall into this category.
Data: Whether it’s a big data set or a small one, displaying data efficiently matters.
Social: How can people connect, share message or interact?

Application of one of these subcategories results into a pattern. It could range from how to display an error message to how to arrange a menu with lots of complex sub-categories.

Design system

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It evolves constantly with the product, the tools and the new technologies.

There could be one kind of Design System per team or product. To define our one, it’s important to ask ourselves the right questions:

How many people will use this system?
What is their profile and are they mature enough on the subject?
How many products must we align? On how many platforms? How many different technologies (Angular, React, others…)?
What degree of consistency do we want across our products?

All these answers will help us to define the most appropriate kind of Design System.

A design system can be strict or loose. It is strict if it has a comprehensive and detailed documentation and will be fully synchronized between design and development. I is loose if it has more space for experimentation. The System is here to provide a framework for the teams while preserving some freedom. Designers and developers are free to use it or not, regarding their particular needs for their product.