Pattern Libraries
Pattern Library Link: https://molliebourne.github.io/index.html
GitHub Link: https://github.com/MollieBourne/MollieBourne.github.io
Introduction:
Pattern libraries have become a largely important part of design and development in the recent times though they have been around for a long time. The importance of these have been largely growing in recent times, keeping a design consistence all of the way through is the difference in making a website effective or having a none user friendly site.
By having a pattern library, it means that it takes less time building features and pages and making sure each is consistent if there is more than one designer or developer on a single project and helps to understand the benefits of having tried and tested components ready to go for each project. While the initial period of designing and developing a pattern library can take time, the benefits that come from this save time and can help improve a projects code base.
Aim and Purpose:
The purpose of this design brief, is to design and implement a pattern library that has a collection of at least 6 components, this should follow the industries best practices, and standards, this will ensure that the pattern library will be to a high-end standard and the end product is delivered with good and appropriate documentation.
Research And Analysis:
Many companies struggle to keep designs consistent, and the easiest way to correct and solve this issue to design and create a pattern library of each project, Paul Boag, stresses this is the solution for every project, as the main purpose of a pattern library is to create a consistent design across any website, with the ease to maintain, and develop.
Although not many people know what a pattern library is and they are often mistaken for a style guide, but are they not the same thing?
A style guide is an artefact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. — Nathan Curtis
This is a very common question, a the most simple answer in No they aren’t the same thing, because they serve very different purposes, a style guide tends to document a brand and is commonly used for design elements, whereas a pattern library is made up of created UI elements and components, these could be a range of things like buttons, headers, footers, navigation and more, these often conform to the Atomic Design Principles, created by Brad Frost.
Pattern libraries need to be kept up to date, and not to be an afterthought, websites should be a reflection on the pattern library, encasing all of the components needed, for the site and current build, and not just an after thought.
Best practises within using a pattern library would be ensuring that they become a solid part of the design and development phase. Building a website from component level makes the build come together quicker and more efficiently, if done within a tested and solid foundation.
But to make these Pattern libraries and components effective each needs to be accompanied with a title and description, to give the user the right infomation and help. This helps to understand what the component does and what it would be used for.
The best approach for creating a pattern library is to have a clear and concise layout, a description for each component, with all of the elements, code and features needed, looking in to existing pattern libraries, will help to determine a good design and layout as well as some best practices and ideas.
Existing Pattern Libraries
There are many different types of pattern libraries, in different styles and formats but many of these exist on the site StyleGuides.io. This is a website that has many of hundreds of contributors who show case a large variation of pattern libraries, for a variation of different brands and sites.
Anna Debenham, is just one leading contributors to pattern libraries and their design and use, finding reference and information through her blog posts, books and articles came in very useful. This lead me to find the 3 most interesting pattern libraries and analysis them, these can be found below.
Polaris Pattern Library:
Polaris is one of Shopify’s latest creations, it the biggest design system created to help build engaging and defined experiences across all Shopify planforms, it is the most recent and up to date Polaris library using react JS, so users can upgrade their experiences and explore the newest possibilities for apps and projects. This pattern library sets a high bar to all others as it is very well developed and defined with lots are articles and news circulating, on how inspiring this could be for companies to do the same thing, pushing a new and more exciting trend and development.
Polaris has documentation for everything needed when designing either new or maintaining those interfaces already created for Shopify, it’s a large repository that meets all of the needs and know how to create content, visual and components easily and effectively.
The navigation throughout the Polaris site, is completed throughout sidebar navigation, this seems to be a common trend found within researching pattern libraries and it allows the user to have quick and effective navigation tools to find what they need. They are able to shift through components quickly and effectively while being in the same interface, by having navigational properties like this it enables a hierarchy to be added to the components with sub sections under each this works well and helps create a good user interface within the pattern library. This can be seen in the image below.
MailChimp Pattern Library:
MailChimp is a well-designed pattern library with good examples, will defined, components and attributes, this is the pattern library for an online mailing system that is used by millions of people daily. This means by having a pattern library; things can be kept consistent, and well developed. This pattern library follows a similar structure to most pattern libraries which includes good clear navigation to each and every component with clear, definition of what the component should do and here it should be used, and it also show cases what each component and element should look like
Carbon Design System — IBM:
The Carbon design System created by IBM is for creating unified UI throughout a series of components and elements and guidelines created to build IBM cloud products, like many other pattern libraries sidebar navigation is also used, for site navigation for ease of use, this is again a common theme.
The Carbon Design System, is created in a way in which the Atomic Design structure is followed, unlike most pattern libraries, there are views for CodePen, a facts and questions section and BEM is so the code has a list of modifiers this pattern library is up to date with the most recent technologies, feature and functions. This allows the user to adapt the content to their needs this can be achieved by changing small bits of code as instructed.
Although the design of this pattern library follows a similar structure seen in many others, there are many extras as well, like extra navigation and with code that can be copied easily and effectively so that team members / clients can access this easily themselves.
Conclusions
Although there are a large variety of different pattern libraries and design systems existing, they all show case differently although there are common elements and trends that occur across all, for instance sidebar navigation, this creates a navigation that is easily accessible and scalable, because where each project is different large or small this pattern library needs to fit all.
Methods, Design Processes & Best Practises
A mixture between both the waterfall and agile Sprint methodologies have been followed for this project, in an ideal setting an Agile methodology would have been set up and used throughout due to the Sprints working well, for feedback and testing. Due to other commitments and time constraints, the waterfall methodology and design process has really taken over, this allowed each step to be completed before the next is undertaken and moving on to the next phase. This was then taken at a disadvantage when it came to the testing and feedback phase because an agile methodology would circle back around, and a waterfall method doesn’t allow this to happen, due to its constraints. The image here shows this.
Specification:
A pattern library containing a minimum of at least 6 components needs to be design and implemented for this project and a specification has been created in the form of the list below, to show what is required to for fill the requirements of the brief, with the best design practices and standards.
1. To design a well-structured pattern library that is easy to use and can be implemented with a good range of testing for various browser types, for a desktop application.
2. A minimum of 6 components need to be designed and implemented, and include; a Navigation Bar, 6 Button Types, a Call to Action/ Jumbotron, Footer, and a component of choice, a Pagination Bar.
3. All Documentation needs to be in-depth and appropriate to exist alongside each component inside the pattern library, this will include a usage and brief description of each.
4. To ensure that all of the HTML has been correctly formatted and written and conforms to W3S standards, with comments and indicators used throughout, it will need to be validated, this will show a solid understanding and validation.
5. Browser testing and performance checking are essential to this project as the code may be used by others, making sure that it works to a high standard.
Test Plan:
A test plan is needed for once the design and development of the pattern library has been created this is very important because it will help ensure the specification is met and completed. This test plan will involve browser testing, code validation, and user testing gaining feedback. All of these findings will be analysised making sure that the project was a success in the conclusions section.
Browser Testing: Browser testing will ensure that the pattern library behaves as it needs to and is expected on for all users on a variation of different browser platforms, the following will be tested; Google Chrome, Safari, Firefox and (Internet Explore) Edge.
Validation: After the development and implementation has been completed, the code files will be run through a HTML, and CSS validator. This will help to make sure that there are no errors and all the HTML files conform to the latest and highest web standards and making sure the code runs smoothly and correctly without errors and issues.
Feedback:Gaining feedback through user testing on the final design and implementation of the pattern library, will help to understand whether the project was a success or not, and whether the pattern library was implemented and designed well. This feedback will be collected through a survey asking detailed questions about the design interface and functionality, 5 people will be asked to complete this.
Planning, Design, Experimentation & Implementation
Planning Low Fidelity: An important part of the design process was to be-able to play around, experiment and develop design layouts before nailing down and committing to a final design, finding out what would work well and what influences had been taken from the research and analysis. First designs tend to be the ones that stick and get used but these aren’t always right or the best approach; experimenting with design layouts and exploring different options through the use of sketches, can prove to be more effective and informative, as can getting feedback on these designs. Below can be found a variation of different sketches and low fidelity wireframes that can be chosen from and developed further into medium fidelity wireframes and plans.
Planning Medium Fidelity: By creating medium fidelity wireframes and plans through the use of Sketch3 it puts the design and sketch in to perspective and allows for a more accurate version of the plan, this helps to find issues before they develop in to bigger problems later on and follow through the design process. By creating medium fidelity wireframes, it is also the quickest way of testing out the site maps for larger scaled projects, these can be found below, these will be followed for the implementation of the pattern library.
Design: Each design was planned out in the planning and then these were made using HTML, CSS, And JS where needed these were create within the text editor brackets and then, images, were downloaded from unsplashed, icons were made in Boeheim Coding Sketch 3, and these where all developed to create the design of the 6 components. As can be seen below in the components Section.
Component Design: The designs of the components that have been created for the pattern library can be found below, the additional 6thcomponent has been created to help bulk out the pattern library and make it feel more realistic, this additional component was a pagination bar.
6 Components:
Navigation:
6-Buttons:
Header/ Carousel:
Footer with Social Media:
Call To Action/ Jumbrotron:
Pagination:
Now after the design phase was completed, after designing and developing the 6 components for the pattern library, it was time to start developing and implementing the pattern library as a whole.
Implementation: From this point forward implementing the pattern library was the next step I experimented with different navigation options, on code pen, as seen in examples, after deciding on how the navigation was going to be designed it was then all about implementing the pattern library this was done for a desktop version and can be found on both the GitHub Repo and the Links provided at the top of this post.
The Pattern library was implemented using sematic mark up and this was done so that each section could be commented and define well, making it easy to find and keeping each section clear.
All sections were defined and styled and then the content was filter in, after adding each component it was time to insert the code for each so that the users would be able to use it this was harder as the could needed to be changed slightly go be viewed on a page this was done with the help of an online tool called “Free Formatter” this allowed the characters needed to be escaped and formatted to be viewed this was then copied in to the content page.
Overall after the development phase was finished, the pattern library looked really good, after getting the basic structure nailed down and the content added, the rest of the pages and styling came together quickly and efficiently.
All of the code was added and push to a GitHub repo so that I could be accesses these links are at the top of the page with this a ReadMe was created.
Creating a Readme: A ReadMe was created for the Github Repo so users can navigate around this easily as seen below.
Validation: After finishing the development and implementation of the pattern library it was then important to make sure that the sites, code and the components code was validated to make sure there were no issues or validation errors, making sure the standards were met that were originally set. The W3 HTML Validator was used to ensure this. This can be seen in the screen shots below.
Browser Testing: After making sure there were no validation issues the next step was to make sure that there were no accessibility issues for the users by testing the pattern library out on a variation of different browsers, as stated previously, below in the screen shots provided it can be seen that the pattern library was tested on a variation of well used browsers, this shows the pattern library working as expected on Google Chrome, Safari, Firefox, and (Internet Explorer) Edge. Although all were check you can see Chrome and Safari in these videos.
Feedback: Gaining feedback was a largely important part of this project like in any project, because feedback allows the project analysised to see if it worked well, was successful, and whether it was designed and implemented well.
A short questionnaire was created on “Google Forms” to ask 5 users about their thoughts and experiences when they interacted with the pattern library, these questions were as followed;
The responses to the feedback can be found below.
The responses and feedback gathered from the users showed that they though the design for the interface was clean, simple and effective, ensuring it was easy to navigate and follow through, this was important because having easy navigation in a pattern library is crucial, when using this pattern library more components will largely be developed, and designed, so ensuring that the users, clients, designers and developers can find these easily is vastly important and essential. The feedback and responses also stated that the components were clearly defined and easy to access the Code needed.
There were a few comments left for improvements and future developments, that would improve and expand the pattern library, although 3 said nothing for improvements 2 did say that either large or extra views of each components, and in some case more usage details, these are all things that don’t impact the site and pattern library now but could be improved on in the future, these would also be explained on the ReadMe file on GitHub as well, in more detail.
Overall I think the feedback was good and shows the project was a success, and I am happy with this feedback.
Conclusion
Overall the project has gone to plan and worked well, the aim was to create design and implement a working pattern library and this has been achieved, this was done through following the waterfall methodology through as the design process, each step was completed before the next phase started and this worked really well. To make sure that the project was a success, a list of success was created from the specification, showing that the project was a success.
-Does the pattern library work on a web browsers tested: YES
-Does it look professional: YES
-Are there 6 different components: YES
-Does each component have a; Preview, code needed and usage and description: YES
-If there sufficient documentation throughout the pattern library: YES
-Is all of the code validated: YES
Showing that the project is a success and that a pattern library is typically used by and for the use of developers working on website projects, this has help further the understanding and developments of why they are used, to help keep things consistent, very much like a style guide in a designer’s point of view. This has help understand that when building a website there are specific building blocks which are build up by many different components, and these are the basic features and elements a site needs, created in different components.
Overall the process went smoothly, and the project ran well, the project goal has been completed which was to create a pattern library to a high standard, and everything went well and the project was completed on time, the project has been successful, this can be seen from both feedback / user testing and the list of success from above. If there was more time for this project both improvements would have been made and making the site responsive would have been the next step. However by focusing on a desktop version, the pattern library is clean, simple easy to navigate and is more polished.
