Pattern Library

Medium: https://medium.com/@kissko86/pattern-library-d19bd59ad5e1

Pattern Library: https://m-kiss86.github.io/Pattern-Library/

Introduction

Nowadays, many designers and developers trying to establish common jargon between different teams, resulting in more collaborative and improved workflow. This approach is known as building UI design systems.

In this project brief, we will be talking about pattern libraries, what they are, what are the benefits and why should we use them. In addition, we will discuss one of the methodology called “Atomic Design”, which is a principle to build scalable design systems. Also, we will be building pattern library with 6 components using selected tools to evaluate its benefits in practice.

Aims & Objectives

The aim of this project is to investigate the current trends for creating pattern libraries and analyzing what approaches are the most appropriate to build robust design systems.

In this context, following are the objectives for the project which must be delivered by 19th of May:

1. Design 6 components for the pattern library by creating low fidelity wireframes and selection of typography, iconography and colors.

2. Create pattern library including 6 components (navigation bar, footer, jumbotron, carousel, 6 buttons and custom component which is cards). This will be done using Pattern Lab framework.

3. Produce detailed documentation including technical aspects such as choice of programming languages and providing explanation on structure and use of pattern library.

Research

Pattern Library

The pattern library is essentially a collection of components, which tries to solve common design cues and describes how these components look like, what they do and how they are coded. These components can be described as reusable building blocks that are used repetitively across the website. The benefits of this concept are consistency in design, less time spent on reinventing the wheel as well as efficient maintenance.

Atomic Design

Atomic design is one of the methodology for pattern libraries and provides a solutions to build robust design systems. The basic principle of this design is binding small and simple parts into more complex units. Brad Frost breaks the complex interfaces into five levels of atomic design which are:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages
Atomic Design Concept by Brad Frost

Atoms normally represent very simple components such as buttons, links, heading or paragraph. Molecules are more complex blocks that binds the atoms to form components such as forms or navigation bars and organisms then group these atoms and molecules to form even bigger components such as footer, header etc.

Example of Atomic Design principle

It is important to say that these levels of atomic design are specified to provide a better understanding of the atomic design concept, however they can be modified and adjusted to suit project and design needs of the team. Alla Kholmatova also discusses how their team adapted the atomic design methodology, however organisms were removed as the team has struggled to identify when molecules become organisms and how complex they should be.

Why do we need pattern library?

Consistency
It can be argued that one of the benefits of having pattern library is that they increase consistency of the websites. In many cases, the problem with websites design starting to emerge over longer period as they grow in size and complexity and at many occasions leads to inconsistency. The picture below shows the differences in user interfaces across the website that belongs to a single company.

Inconsistent User Interface across different parts of the website

As it can be seen, by switching between different parts of the corporation websites, the design cues has changed, navigation bar has moved, buttons, typography and colors has changed. This can cause lots of confusion for the user that might find it difficult to navigate across the site. Pattern library allows to solve these issues by quick and easy implementation of already existing design patterns.

Reusability
This benefit also directly relates to the problem above. The issue with many development companies is that they always reinvent the wheel which often leads to increased costs, decreased productivity and wasting resources. Having a pattern library allows for sharing and reusability of these elements and keeping the costs down. The process of building websites by using these design principles can dramatically increase the development process.

Approach

Paul Boag emphasize the importance of implementing the pattern library in the very early stages of the project. The purpose of the pattern library is to provide an aid during the development in terms of workflow, speed and efficiency as well as to provide base for creating consistent and unified parts of the website.

A typical pattern library should normally provide information such as title and description of the component, snippets of code and the actual output. However, it is important to consider what piece of information is needed for the given component and how it would improve and benefit the workflow.

Pattern Libraries and Tools

There is a vast number of existing pattern libraries and tools available, therefore we will have a look on some of them. One of the very useful tools is a Pattern Lab developed by Brad Frost and Dave Olsen and it is based on atomic design principles. This tool is great for fast prototyping and sharing the components within the team as well as the clients. Pattern Lab provides a support for Mustache templates with HTML markup which is extremely useful for code reusability and reducing the number of repetitive tasks.

Pattern Lab for efficient components reusability with Mustache template and JSON data

Mailchimp is an email marketing service and they have built their own pattern library. The reason for creating their own pattern library was to increase the consistency and efficiency during the development process by implementing uniform and reusable components from the single source document.

Mailchimp Pattern Library

Methodology

The approach for development of the pattern library is that the expectations and planing must be clearly defined prior implementation phase. Also, due to a relatively small size of the project, waterfall methodology was considered as the most appropriate approach.

Traditional Approach

The aim of the research was to identify the best practices for developing pattern library as well as to asses any tools available that would help during the development process. Planning stage of the project will discuss what components will be delivered and what tools and methods will be applied. This will be summarized in the specification section of the project. Design phase will include sketches and design prototypes for the pattern library components which will include selection of colors and typography to achieve consistent design. Implementation phase will consists of coding and producing pattern library documentation as well as the final work will be published on GitHub. The pattern library will be tested on all browsers to prevent any accessibility issues.

Specifications

The requirement for the pattern library is designing 6 semantic components which include six buttons, navigation bar, jumbotron, carousel, footer and cards.

Tools

Pattern Lab framework will be used to build pattern library with the above components using atomic design principles. Mustache edition is used and provides a mustache template alongside with the html markup. Pattern lab has also built-in PHP server, therefore PHP 5.4+ must be installed.

GitHub repository is created to host the code for the pattern library and GitHub Pages is available to view the final version of the library.

Tools for building Pattern Library

The pattern library consists of the title of the component, mustache and html code snippets and design of the component. Because this pattern library utilizes atomic design principles, components also provides description and links to the lower levels blocks.

Links to lower level building blocks

Atomic design breaks components into five main levels, but because the pattern library consists of six basic components, only three levels will be included which are atoms, molecules and organisms.

Design

Moqups tool was used for high fidelity design of the pattern library components.

Buttons Components
Navigation bar Component
Jumbotron Component
Carousel Component
Footer Component
Cards Design

Fonts and Colors

Fonts and Colors for the components

Iconography

Font Awesome was used for the SVG icons within the project. These scalable icons are very easy to include in the html code and its properties such as color or size can be customized using CSS.

Documentation

Setup

Firstly, because we are using a framework to built our pattern library, it is important to talk about the initial setup and structure for our development workflow. Pattern lab utilizes gulp.js which is a task-runner that helps us to compile our folders from development environment into distribution folders automatically. The folder structure for the framework can be seen below. Source folder represents our development environment from where everything is compiled into the public one. It is important to say, that only public folder which includes all the pattern library assets needs to be deployed to the server.

Folders marked yellow: Source (Development), Public (Deployment) — Gulp.js helps to automate tasks such as compiling files

Once the framework is setup, we can start creating our patterns. As we talked about it earlier, these patterns are level blocks such as “atoms”. For the purpose of this project we have created three patterns which are “atoms”, ”molecules” and “organisms”. These patterns are added by creating folders in the “source>_patterns”.

Components with Mustache

We are going to start creating atoms first. These will include buttons, links, headings, texts, icons and images. All of these components will be used throughout the pattern library. One of the requirements for our components was to create 6 buttons. Mustache template allows us to create these buttons very efficiently. Firstly we create a “buttons” folder in the “atoms” folder and than we have to create “button.mustache” file. This file contains a mustache template with placeholders for our buttons.

Mustache template for the buttons

The placeholders are then populated with JSON data using key and value pair. The figure below shows the JSON file as well as the final output. This is a very powerful feature that helps to deliver extensible and more maintainable components.

Generating Buttons with JSON data.

The same principle applies to creating other atoms such as links, headings or text. Now, we can use these atoms to build more specific components (molecules) such as navigation. To create navigation, we will use the “link atom” and combine it with other element such as list. Under the “molecules” folder we will create “navigation“ folder where we add two files - ”navigation.mustache” and “navigation.json”. To access or link to the “atom” from other component, mustache provides a shorthand syntax. For example, to access the “link” from the following path “/atoms/links/link.mustache” , we can simply write “{{> atoms-link}}”. Another powerful feature is that if we want to add more than one link into navigation, we can use mustache “for each loop” in the format “{{#list}} {{> atoms-link}} {{/list}}”. The data will be again populated from the “.json” file, but this time using an array of links for our for each loop. Following organisms can be built by including molecules, then templates are built from organism where eventually we can build entire pages. This is the basic idea behind atomic design and pattern lab to build complex interface from the lowest level elements.

Creating Molecule from lower level atoms

Slick Carousel

One of the requirement was to create a carousel component. This is a great addition to the UI as it allows to have more than one piece of content within the same designated space on the web page. The carousel is created by following the same principle as from the example above where we specify the placeholder for our slider and include are content (atoms) which are images in this case. I have used “Slick”, which is a fully responsive jQuery carousel plugin. Once the plugin and jQuery library is included in the project, we need to specify on which element we want to run our carousel. This plugin is also very flexible as it allows us to specify additional parameters that changes the look and behavior of the carousel.

Slick Carousel Plugin in Pattern Lab

Conclusion

The importance of creating design systems is undeniable in terms of increasing productivity, consistency and maintainability. Pattern Lab is definitely a very robust framework for building and maintaining atomic designs as the building blocks can be easily reusable within other components instead of reinventing the parts over and over again. However, when building pattern library, instead of just focusing on the structure and levels of the components, we should be mainly focusing on how the pattern library can be used effectively and how it will benefit our organisation.

It is clear that pattern libraries can mainly benefit larger teams working on the same project from different departments. By adopting this approach they can easily reference to a single source document to fully understand what is the team building and how are they building it. To conclude, it is important not to think about pattern library just as a documentation, but rather as an ongoing and scalable process.

Pattern Library: https://m-kiss86.github.io/Pattern-Library/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.