Pattern Libraries, what they are, why use them.

Introduction

Pattern libraries have become increasingly popular as projects have gotten larger and larger, they offer a platform that allows multiple developers to work on the same project without having to cross reference code on a regular basis.

Pattern libraries will be explored in what they are and why they are used, plans and reasoning will be explained to create one and the execution will be displayed and explained step by step how it was completed.

https://connorbanks.github.io/patternlibrary/

Research

What is a pattern library?

A pattern library is a collection of elements created by a development team to ensure there are no inconsistencies between page design and code.

Why are they used?

Pattern libraries have become increasingly popular for front end developers to break down the interfaces they create into manageable blocks which can be reused in other areas of the site. Going beyond the aspect of just design, pattern libraries allow the developers to create a normalised codebase for the elements they have created so that one person doesn’t create it one way and another a different way, which may cause discrepancies further along in the project. (link)

Benefits to the users of a site that uses a pattern library

Pattern libraries are better for clients because they allow the website to run faster due to the use of consistent components and code and because of this, it generates a consistent user interface throughout the website allowing for better user navigation and user understanding. This leads to browser support being significantly higher as it allows each area and component to be isolated and rigorously tested across different platforms.

Benefits to the owner of a website using a pattern library

Of course when a website is built using a pattern library it gives the owner of the website a wide range of opportunities in the future. The benefits are; quicker future page builds, a method to build trust with its users because of the consistency throughout this may lead to higher conversions for the same reason, improved search engine optimization due to consistent and well structured components, and finally, it prolongs the lifespan of a website as updates and changes are easy to make.

Benefits to the designers and the develops of the website

The people that create the websites benefits from taking this approach also. Pattern libraries offer an easy work structure as code only needs to be written once, it is all centralised and accessible with good documentation rather than having to rely on one person, the whole website is generated from the brand ensuring that nothing is off putting for the user, and finally, they always know what is already included and built on the site meaning if any work has to be completed in the future, they have documentation of what already exists.

Process taken

When creating a pattern library, a process is created that is followed when designing, developing and testing the elements. The designers and the developers get together to work on it together as it has to look good and be usable by the websites audiences, but it also has to within scope of development tools and practices.

Each element goes through stages; this is to ensure quality as well as filtering through each person’s job role that would use the pattern library. The first stage is discovery & design, this is where the designers create something in Adobe Photoshop or Adobe XD, experimenting with ideas. The second stage is documentation, when the element has been designed, an explanation is written to say why the element fits within the brand guideline and how it will be used once created. The third stage is where it moves onto the developer and the elements start to be created in HTML & CSS. The final phase of the pattern library is when it’s finished and put onto a place where it is accessible to everybody who needs the information.

The names of the elements should provide the use of the function it completes instead of explaining the the visual presentation of the element, this makes it easier for other people to understand why they should be using the element.

Regarding best practices of Pattern Libraries, it’s good to start with the basics and build it from there. Instead of trying to create a pattern library for all elements on the website, create the most important elements first and make sure they are bullet proof for others to understand and use with ease.

When the elements are finished the pattern library will be displayed on a website for the team that is working on the actual website to refer to. It’s argued that this website should not just display the elements that are a part of the pattern library but it should also include best practices for the elements to actually be used when on the website. This will allow the designers and developers to gain inspiration of what can be achieved with the pattern library. (link)

Specification

The pattern library needs to consist of elements that would allow another developer working on the project to know how to style the sections so that the website has a consistent and identical presentation. The pattern library will consist of the 6 different elements that would make up the website that it supplies. These are; the navigation bar, header element, jumbotron, footer, pagination and 6 buttons in different states.

The pattern library will display all the elements that are created in their finished form, as well as the HTML & CSS markup that is used to create them. They will be displayed in an easy to understand and easy to copy format for other developers to use.

Methods/ Design Process

Research

The process of initial research consists of primary and secondary research, speaking to others about what they thought the best practices were on pattern libraries, debating on creation and maintenance methods. Also reading of websites and books to gain an insight into how professionals use pattern libraries in the industry. The research will give insight into how dynamic and well rounded pattern libraries can be in creating a consistent and well maintained website.

Design

The design process will start with hand drawn ideas, sketching out each element a number of times, in different ways so that the best could be chosen. The designs ill then be left for a couple of days and then revisited so that they could have been seen with fresh eyes, this allows a better understanding of what people would experience when they first came across the pattern library when working on the project.

The design phase will move into experimenting in Code Pen to allow to see what the elements would like look like on the website. This is so that a decision can be made on the usability of the element once created rather than just making the decision from the sketches.

Development

Once the designs of the elements are decided on, the project will go into development, this will be a straight forward part of the project as the experimentation will have happened in the previous phase. This means that the finished project will be obtained without deviating from the designs. This will speed up the process allowing the project to move onto the testing sooner.

The development of the website for the pattern library will also be developed at this stage, with a minimalistic approach to create an easy to use platform.

Testing

Testing will be executed by having a technical plan, which establishes if the components will work across browsers. This is important as stated in the research, pattern libraries tend to get used more on larger projects which give more opportunity to use it on outdated or obscure browsers. The second part of testing will be user tests, giving the pattern library to somebody who has relevant HTML & CSS knowledge and ask them to create an additional page on the website using these elements. This gains an insight into whether the pattern library is easy to understand for the target audience.

Test plan / Process

Technical Testing

Google Chrome

The pattern library when displayed in Google Chrome works the way it is intended. The pattern library was developed using Google Chrome as the test browser, which meant it is optimized.

Firefox

Firefox displayed the way the pattern library was intended to; no elements were not presented differently.

Safari

The pattern library itself does not displayed properly, the homepage, the margin at the top messes up so that it displayed at the bottom of the page. Breaking continuity. This only happens on the homepage and not on any other page.

Internet Explorer

This test was taken on an IE emulator, because who has a windows machine? The website displayed the way intended with no differences.

User Testing

5 individuals were presented with the pattern library with a list of tasks, after this they were given a questionnaire to fill out, these are the summarised results.

Questionnaire

1- Is the pattern library easy to understand? Why?

The overall message gathered was that the pattern library was easy to understand, the reason so being put down to the way it was presented. It was directly understood what piece of code corresponded with each element.

2- What did you like the most about the pattern library?

Mixed reviews for this questionnaire, some preferred the minimalist approach to the pattern library saying that it was easy to understand, easy to navigate throughout and the overall experience was good due to these reasons. The other half like the way the content was laid out for each element, clearing stating the and showing what code is used for which elements.

3- How could the pattern library be improved?

The overall answer to this question was that it couldn’t, unless some context was given to what website it belonged to, they said that the pattern library worked as a fundamental base for a website in the future. One person did remark that maybe adding a bit of colour to the pattern library might make it a bit exciting, but who wants that?

Planning, Experimentation & Implementation

Initial Designs

Finished Pattern Library

Navigation

Header Element

Buttons

Jumbotron

Footer

Pagination

Conclusion

This project allowed me to gain an in depth understanding of pattern libraries, when they are appropriate to use them and the best practices for creating one myself. In addition, this project increased my project management skills because it was executed alongside other projects meaning I had to plan my time to ensure everything was completed on time and to the highest standard possible.

If I were to complete the project again I would concentrate more on testing the elements to ensure they work across all platforms instead of just a handful. I would put this drawback of the project down to lack of access of multiple devices and platforms at the time of testing, and where I was located. If I were able to do it again, I would make use of the device lab.

Connor Banks

www.cranktech.co.uk

One clap, two clap, three clap, forty?

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