Design Systems, Pattern Libraries and Style Guides

Style Guides, Pattern Libraries, Design Systems, what are they? How can both designers and developers of interfaces benefit from them?

Introduction

Style Guides, Pattern Libraries, Design Systems, what are they? Where do the lines blur? And how can both designers and developers of interfaces benefit from them?

It is first important to understand the concepts of each system before taking a deeper look into methodologies and approaches to interface design and development which have birthed such systems.

To gain an insight into the differences, research is to be carried out into the different definitions with an experiment of building a Pattern Library for a new site ‘Expelled Skateboarding’.

The final product is accessible via —
https://pl.expelledskate.co.uk/index.html

The latest version of the repository is accessible via — https://github.com/Jack-NoFace/Expelled-Pattern-Library

Research

Style Guides, Pattern Libraries, Design Systems

As outlined by Jan Toman, style guides, pattern libraries and design systems, although may hold similar perceptions from designers and developers they exist as their own entities. Not only do they exist as their own entities but style guides and component libraries may co-exist together to form complete and coherent design systems for a product.

All of these entities are built with one objective in mind, empowering teams working on a product. No matter if designer or developer, the living documentation that style guides, pattern libraries / component libraries, and design systems provide should provide rules that encourage a consistent product for users.

Style Guides

As outlined by Jan Toman, style guides often include rules that relate to a brand or product which are applicable globally to all areas of design and development. These include –

Colour
Icons
Margins
Padding
Typography
Grids

Pattern Libraries

Often influenced by a style guide, a pattern library (also known as a component library) will usually include HTML snippets or living documentation for website engineer components. Pattern libraries have a focus on interface design, and would not include rules that apply globally to print or other mediums, which Style guides often cater for.

Pattern libraries often include –

Buttons
Images
Hero Elements
Sliders
Galleries
Navigation
Articles

Design Systems

Design systems are where style guides and pattern libraries meet to create a holistic approach to how interface design and development is influenced. Design systems often take existing concepts or rules and extend on them, with rules and connections relating to –

Animation and motion design
Accessibility
Content Principles
Information Architecture

Amy Thibodeau, a Senior UX Lead at Shopify encapsulates what design systems can do for a product or company with a great quote -

“Design systems are one kind of tool that people look to in order to solve problems that are fundamentally about failures in collaboration and alignment.” — Amy Thibodeau

Atomic Design

Brad Frost first coined the term ‘Atomic Design’ in 2013, Atomic design is the concept that pattern libraries and in turn design systems are made up of small elements and are progressively used and grouped together to form increasingly larger concepts such as molecules and organisms, before being used to construct templates, and finally pages from those templates.

Atomic Design is not a foreign concept to those in interface design and development as prior to atomic design, there existed Modular Design and Component Design, which are now sough-ought approaches when designing and developing components as seen with the rise in popularity of BEM (Block, Element, Modifier) methodology.

Anna Debenham touches on component-based design using different terminology to that of Brad, but with the same concepts and conclusions, in the book “A Pocket Guide — Front-end Style Guides” with the following quote-

…modules and components — building blocks that can be slotted together to form a site. Splitting things up in this way means making a template is as simple as dropping in the patterns in the right order. Separating the modules from the layout helps make a site more ﬂexible and maintainable in the future.

There has also been traction in standardised front-end frameworks such as Bootstrap, which was originally released on August 19, 2011; 6 years ago. Brad goes on to discuss the downsides of using such frameworks in a presentation at An Event Apart which have been paraphrased into the following points -

Lookalike Issues
Potential for bloat
Might not achieve all you need
Difficulties implementing into existing products
Adopting others naming conventions and workflow

Dave Rupert discusses how he envisions deliverables should look for clients as “Tiny Bootstraps, For Every Client”. Implying that Bootstrap has successfully captured what should be a standard for design systems of a product, but that we should be creating bespoke design systems for every project.

Design Process Method

Atoms

Atoms are at the foundation level of design and development concepts. They influence all areas of a website and should be heavily considered before constructing.

They often include but are not limited to -

Colours
Typography
Form Components
Tone of Voice
Brand Strategy
Brand Guidelines and Rules

When referring to development, not only do the atoms need to be considered in their default states, but also in hover, focus and active pseudo states.

These are often targeted through the use of CSS and should be considered as some users interacting with the atoms may use a keyboard for navigation.

Molecules

Alone an input field is pointless, add a button, and you’ve got a way to submit information. Molecules are where atoms have been combined to create more complex components such as a forms, image galleries and more!

Building on from that concept, headings, paragraphs and buttons put together can create a call to action (CTA) components for a website, great for your usual marketing clients that want to drive action to a site.

As molecules are comprised of several atoms, it is important not only to consider the states of the atoms but also the states of the molecules.

What will the CTA look like when you submit content, or if insufficient data has been supplied?

Organisms

Organisms are where molecules have been combined to create more complex components such as a header or a footer for a site.

Perhaps a header is made up of a navigation molecule with an image and horizontal list, this combined with another search molecule which has an input field and list of results?

Again, this is where components of the site become larger concepts. There are more variables and states to consider, although most would have been considered in the atom and molecule stage of the component lifecycle.

What do the navigation links look like on hover?

How are search results presented in the header when there are 20+ items?

Templates

The final part of the building block life-cycle is the templates. These are essentially shells of web pages, free of specific content that shows how organisms, when combined, can create complete page layouts.

These templates are great to conceptualise what the finished product will look like before content has been created for the components.

Pages

Finally the fun part, pages are where we dump our content into our rigid, well-thought-out templates. This will often involve including a homepage, about page, contact page, blog archive page and single blog page.

If all steps beforehand have been executed correctly, then there shouldn’t be any problems when importing data into the templates. Although there are some exceptions for if your images require a plugin or CMS to crop and resize, or if you have a client that wants to include a 5-page document on their about page.

Specification and Planning

Alex Pate, the curator of an extensive directory of design systems, mentions that before setting out on the construction of a design system, style guide or pattern library, .

As Expelled Skateboarding’s website will look to not only define the components used, but also the tone of voice and design characteristics such as typography and colours, it is thought that Expelled Skateboarding would benefit from a blend of a Pattern Library, Style Guide and Design System.

The importance of the tone of voice of a product, vision and principles are best summarised in a guide to design systems published by InVision -

Just as design is far more than the sum of its parts, your design system can serve as far more than a components-only guide. Vision, principles, process, and voice and tone expand your design system into additional areas where reusability can also increase speed and efficiency. — (Suarez et al)

Minimum Viable Pattern Library Elements

To ensure the minimum sought components for the website are documented, a list of five elements have been drafted -

Buttons
Footer
Header Element
Jumbotron
Navigation Bar

It is also required that each of the included components are to have supporting notes that provide reasoning for design choices and examples of where a component may be used.

Trust in the design system and the decisions behind it are important to encourage consistency. When consumers of the system can explain the “why” behind decisions, they’re much more likely to be an advocate for consistency. — (Skistimas)

During the construction of components, it is important to build following Brad Frost’s atomic design principles, breaking each stage into the life-cycle stages of atoms to molecules, etc.

Audrey Hacq dives deeply into atomic design and how she adopts flexible and generic approaches to components, looking at components from an abstract perspective, mute of specific content.

Buttons

Nathan Curtis, Founder of UX firm Eight Shapes, argues that as they represented at minimum three attributes including but limited to colour, typography and iconography.

Buttons, when executed correctly, are simple, versatile and enable power to users of a website. Often different states of buttons are overlooked in the initial design of a website; this can be solved with the use of a pattern library which creates an interactive view of the different button states and use cases for each state.

Tyler Sticka discusses six possible button states in a thought-provoking post –

Default
Focus
Expanded/Toggled/Selected
Disabled
Hover
Active

Footer

Footers are found on almost every page of a website, as it is a consistent part of a web product, a footer will need to be defined with content and links.

Header Element

Header elements are important to all users; often they hold important navigation items, logos, profile information and actions. A header element is essential for a design system.

Jumbotron

Sites often display updates or contain a call to action; a Jumbotron is a flexible component that accommodates both of the mentioned needs, and many more.

A jumbotron which includes text and a button or link will be created in the Expelled Design System.

Navigation Bar

A navigation bar is often found on blog pages as an aside, it’s important to offer links to related to content or post archives for those who visit your site.

A simple navigation bar is a minimum requirement for the Expelled Design System.

Implementation

Choice in pattern library framework

Although Fabricator is a new shelved project on Github, it is still one of the quickest and efficient frameworks for building pattern libraries and design systems. As I have previous experience with Fabricator, I chose it for this article as I am able to explain the framework and how it works.

Flexible, with consistent block features such as nesting, when used correctly the framework can build a rigid and easy to use system.

Fabricator also provides users with examples, notes and code snippets that allow both designers and developers to pick up components and contribute to the system as it evolves.

Setting Up Fabricator

Fabricator is dependant on Node, so you will need to have the latest compatible version of Node for your operating system.

Once node is installed, you are then able to use Yeoman to generate a Fabricator project to your machine.

Commands to create a new instance of Fabricator

When spinning up a new instance of fabricator with Yeoman you will be asked for project information such as the title of the project, description, etc. Once complete you will then need to start the Fabricator processes.

Command to begin Fabricator on your local machine

You should find your default web browser will then open a new tab with the address https://localhost:3000, this is your local environment of your Fabricator project.

To get started you may want to update the brand colours found in the design system to those of the project you are working on. You can do this by accessing the toolkit.yml file in Project > src > data > toolkit.yml.

You will find that updating the code in the yml file and saving the yml file will cause your web browser to refresh your localhost tab. Your new colours will be reflected in the homepage of your Fabricator project.

Adding patterns and components to your design system is as simple as adding new material files to src > materials and then a folder of your choice. I have structured my folders similar to how Brad Frost groups patterns (Atoms, Molecules, etc.).

What is a material file?

A material is a .html file that can contain YAML front-matter and handlebars markup.

On the left is an example of a heading material file in HTML. To the right is how Fabricator renders the material file in-browser. Saving material files auto-refreshes Fabricator. Having material files automatically refresh and update the design system allows for components to be rapidly designed and developed.

Alternative Framework to Fabricator

Patternlab is a framework that I have started to build pattern libraries with, the framework is flexible with a range of different languages available to build in, such as twig, PHP, mustache and more.

Patternlab is a credible tool and is endorsed by one of the pioneers of design systems, Brad Frost.

Not only is Patternlab a more credible tool, but it is a maintained project with contributors updating package dependencies and performance of the system weekly, making it the more popular choice.

Getting started with Patternlab requires a more in-depth understanding of processing tools such as Grunt, Gulp, Webpack, and languages such as twig, mustache, etc.

Due to the higher entry to level and my personal limited understanding of Patternlab, I have opted not to recommend this tool to newcomers of design systems, unless you are confident in your intermediate development skills.