Pattern Libraries

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 — http://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.

Figure 1 — Design systems, style guides, pattern libraries. What the hell is the difference? (Toman 2017)

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 flexible 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 -

  1. Lookalike Issues
  2. Potential for bloat
  3. Might not achieve all you need
  4. Difficulties implementing into existing products
  5. 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.

Figure 3 — Atoms (Frost, 2013)

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?

Figure 4 — Molecules (Frost, 2013)

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?

Figure 5 — Organisms (Frost, 2013)

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.

Figure 6 — Templates (Frost, 2013)

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.

Figure 7 — Pages (Frost, 2013)

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, it is first important to define what you actually want to achieve.

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 -

  1. Buttons
  2. Footer
  3. Header Element
  4. Jumbotron
  5. 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 buttons are the most important component in a pattern library 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

  1. Default
  2. Focus
  3. Expanded/Toggled/Selected
  4. Disabled
  5. Hover
  6. 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.

Lo-Fidelity Wireframes of Components

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 http://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.

Atoms

Colours — Brand style guides often contain a primary brand colour palette, secondary colour palette and a set of black, grey and whites to use. These colours are important for a consistent brand and are used throughout the design of a product.

Typography — Again, a property that is crucial to define for a consistent brand. Often a heading and body font will be defined at a minimum, although notes may accompany other styles or font-families that have use cases within the product or brands marketing.

Ordered List
Unordered List

Lists — Developers love to use lists, but often neglect the basic ordered and unordered list states. Both styles have been included in the pattern library to visualize any changes to ul and ol elements.

Tables — Tables are a great way to sort and manage large amounts of data in meaningful groups. Tables often include a large range of sub-elements to the table parent element. The majority of sub-elements are included in the pattern library.

Buttons with hover, active and focus states

Form Elements

Labels — Without our friendly labels, users wouldn’t know what they were interacting with. A small uppercase label adds a little magic to forms found in the Expelled Design System.

Standard label without an input

Input Fields — Ah yes, one of the most important components of a site, input fields. With a variety of inputs available with HTML5 “type” attributes and CSS pseudo-selectors the input types are often styled to follow a similar with pattern, with room to vary in style when required (disabled states, number input fields, etc.)

Input — Email
Input — Number
Input — Password
Input — Read-only
Input — Text

Buttons — Buttons as aforementioned are versatile and require consistency in their use across a website. Ever found yourself trying to download a file online and not sure which button is the right one?

Keeping the buttons consistent enables power to the users to perform actions with little thought needed.

Circle Button (with icon)
Disabled button
Favourite Button (Standard and Active)
Primary Button
Primary Button with Icon
Secondary Button

Checkbox

Radio Buttons

Radio button with current value set to “CSS”

Select Input

Molecules

A great feature of Fabricator is the ability to nest elements within one another. This is amazing when working with atoms that may be changed in the future, having to update the HTML markup for say, all primary buttons across the design system is inefficient. Simply nest the component, and when the original component is modified, it will update the other molecules, organisms, templates, and pages.

Example of how elements are nested in Fabricator

Basic Form — As shown in the example above, a basic form with content can be spun up relatively quickly with consistent, yet flexible structures.

However, one may want to update the secondary button with new markup to create a realistic form as this form repeats “Submit” for both primary and secondary buttons.

Jumbotron — Sometimes we need to grab the attention of users with a jumbotron that contains content, whether it is a CTA or a news update on a new feature for the site, Jumbotrons are flexible and work great to grab the attention of users.

Organisms

Header — For the Expelled Skateboarding site, there are two states of a header, a header for users that are visiting the site without a login and those who are already logged in.

Header (Default)
Header (Logged In)

Footer — The current footer is kept minimal with a copyright text snippet and links to social media channels with icons.

Footer

Templates & Pages

With the atoms compiled into molecules and those molecules used to create organisms, building blocks of a site, it is now time to construct page templates and page examples to be used on the Expelled site.

Below is an example of one of the pages built with a header and footer organism, followed by content made up of a heading, paragraphs and a photograph of a skateboarder.

Article Blog Post Template

Feedback

To understand a general concencous on the interpretation of the Expelled design system, a three question survey has been compiled and sent out to a small few designers to get their feedback.

The questions were as follows -

  1. Do you think you could build a simple form using the Expelled design system and no further instructions?
  2. What could the Expelled design system benefit from?
  3. Does the Expelled design system convey a consistent brand design and tone?

The Results

  1. Do you think you could build a simple form using the Expelled design system and no further instructions?

2. What could the Expelled design system benefit from?

3. Does the Expelled design system convey a consistent brand design and tone?


Conclusion

It’s been discussed what a pattern library is, how a pattern library is planned, constructed and launched, but why does anyone need a pattern library in the first place!? Paul Boag put it best in three simple points -

  1. A Pattern library ensure a consistent user interface
  2. A pattern library facilitates reusability
  3. A pattern library makes maintenance easier

With existing colours, typefaces, motion examples and mini-interactions, documentation that would otherwise be bland and riddled with misconceptions now become alive and understandable for everyone working on a project.

I believe that design systems are beneficial to all design and development projects, enabling contributions from the whole team and lowering the bar to entry for new team members.

I personally will be using design systems to outline key concepts and create consistent rules for the design and development of a product. One major benefit of having this in place is that if freelancers were to join a team on a project, they are given the tools and information they need to get up and running without causing disruption.

Don’t forget, design systems aren’t set in place to restrict designers or engineers from designing and developing components. Instead, they are there to empower teams to collaborate together in a clear and coherent way.