Home / Insights / March 21, 2018

Style Guides, Pattern Libraries and Design Systems

Created by jack


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 (Toman 2017), 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 (Braga 2017). 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

Atomic Design

Brad Frost first coined the term ‘Atomic Design’ in 2013 (Frost 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.

Figure 2 — What is atomic design (Frost, 2013)

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” (Debenham and Gregory 2013) 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 (Frost 2016) 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” (Rupert 2013). 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 (Pate 2016) 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. 2018)

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 2018)

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 (Hacq 2017), 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 (Curtis 2016) 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 (Sticka 2018) 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.


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.

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.

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

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 (Boag 2017) –

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

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.” (Thibodeau 2018)

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.

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.


View the Final Product


References

BOAG, P., 2017. How to create a pattern library and why you should bother [viewed 18 March 2018]. Available from:
https://boagworld.com/design/pattern-library/

BRAGA, G., 2017. Pattern library, Style guides, Design Systems. Do you need one? [viewed 18 March 2018]. Available from:
https://blog.prototypr.io/pattern-library-style-guides-design-systems-do-you-need-one-b7857af0f255

CURTIS, N., 2016. Buttons in Design Systems — EightShapes — Medium [viewed 19 March 2018]. Available from:
https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

DEBENHAM, A. and O. GREGORY, 2013. A Pocket Guide to Front-end Style Guides. Cork: BookBaby

FROST, B., 2013. Atomic Design [viewed 18 March 2018]. Available from:
http://bradfrost.com/blog/post/atomic-web-design/

FROST, B., 2013. Brad Frost — Atomic Design — beyond tellerrand 2013 [viewed 18 March 2018]. Available from:
https://vimeo.com/67476280

FROST, B., 2013. What is atomic design [image] [viewed 21 March 2018]. Available from:
http://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png

FROST, B., 2016. Atomic Design by Brad Frost — An Event Apart video [viewed 18 March 2018]. Available from:
https://vimeo.com/179245570

HACQ, A., 2017. Atomic design: how to design systems of components — UX Collective [viewed 18 March 2018]. Available
from:
https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

KHOLMATOVA, A., 2017. DESIGN SYSTEMS. [S.l.]: SMASHING MAGAZINE

PATE, A., 2016. 5 things to consider before building your living styleguide — Alex Pate — UI Engineer [viewed 19 March
2018]. Available from:
https://alexpate.uk/journal/5-things-consider-before-building-your-living-styleguide/

RUPERT, D., 2013. Responsive Deliverables [viewed 18 March 2018]. Available from:
https://daverupert.com/2013/04/responsive-deliverables/

SKISTIMAS, K., 2018. Balancing Flexibility and Consistency in Design Systems [viewed 19 March 2018]. Available from:
https://medium.com/ge-design/balancing-flexibility-and-consistency-in-design-systems-c24cd0a9da16

STICKA, T., 2018. Designing Button States [viewed 19 March 2018]. Available from:
https://cloudfour.com/thinks/designing-button-states/

SUAREZ, M. et al., 2018. Design Systems Handbook [viewed 18 March 2018]. Available from:
https://www.designbetter.co/design-systems-handbook

THIBODEAU, A., 2018. Beyond Tools: How Building A Design System Can Improve How You Work [viewed 19 March 2018]. Available
from:
https://www.smashingmagazine.com/2018/03/building-design-systems-to-improve-work

TOMAN, J., 2017. Design systems, style guides, pattern libraries. What the hell is the difference? [viewed 21 March
2018]. Available from:
https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc

TOMAN, J., 2017. Design systems, style guides, pattern libraries. What the hell is the difference? [image] [viewed 21
March 2018]. Available from:
https://cdn-images-1.medium.com/max/1600/1*meuM5iUvhxP0tM1oMe6I8A.png

Bibliography

SHESTOPALOV, S., 2017. Designing Better Design Documentation — Muzli -Design Inspiration [viewed 2 April 2018]. Available
from:
https://medium.muz.li/design-docs-6bb34589f7a9