Pattern Library
https://medium.com/@joshhoward10/pattern-library-8734a4a45dc0
Below shows the pattern library on github.
https://joshhoward10.github.io/patternlibrary/
Introduction
This assignment shows the processes and tools required to create a pattern library for a website.
A pattern library/style guide is something that is being used more and more for websites and applications. The reason they are used is to guide a designer how each element of a given website should be for example nav bar should be at the top of the screen and the logo should be on the left with the navigation links beside it. An example of this is shown below.
Sky is a good example of a pattern library they have an in-depth guide of all the main elements of their website to make sure the design is consistent throughout for ease of use.
Aim
The aim of the project is to learn what pattern libraries are and how they should be created using the current methods. Another aim is to create a pattern library with 6 components.
Objectives
- Discover the correct methods to create a pattern library
- Experiment creating different components
- Create 6 components and implement them into pattern library
- Test the pattern library to find out what is good and bad about it
Research and Analysis
In large businesses pattern libraries are a massive benefit because if there are multiple teams of developers that are in different parts of the premises need guidelines to reference without the need to find who created a certain element. Some of the companies use this are Sky, IBM, Google and Apple, Below show examples of how each companies pattern library looks.
IBM
IBM have a large and in depth pattern library called Carbon Design System it covers all of the components needed to create their website. Each component has an example of how it looks with the HTML, CSS and JavaScript needed to create the element.
Also in the guidelines IBM offer a design kit for Sketch that enables a designer to design a webpage with all of the elements needed without the need to design each element again. Instead of designing each element all is required is to find the given element and copy it into the page. This is good as it helps to save time when creating a new page as it is just a matter of dragging and dropping.
Methods and Design Process
When doing this project the first thing to do was to research into what a pattern library is and what are the current ways they can be created. This is a massive part of the project as it helps to understand how it can be implemented effectively and why it is important to use them in this present time.
The next thing to do was to plan what components are going to be created and how it is going to be displayed on the webpage. This is another important part of the project as if this isn’t done correctly there can be confusion of what is required and things can be missed out.
Once the plan has been created it was now time to experiment, design and implement the pattern library. Firstly the experimentation part was more about trying different techniques that can be used to create a pattern. Secondly in the design section each component needed to be designed so that it can be decided how it should look in the implementation stage. Lastly in the implementation stage this is where it will show how the pattern library was created and what tools were used.
The last thing to do in this project was to reflect on what has been learnt about how pattern libraries can be used and how it went creating the pattern library. Also it will evaluate the results recieved during the testing part of the project.
To complete the project in a timely manner a time plan was created which is based on 65 hours which was set in the criteria. Below shows the time plan set out in the amount of hours each stage will take.
- Research of what a pattern library is 15 hours
- Analysis of available pattern libraries and how they can be created 15 hours
- Plan of what is required for the pattern library and what components will be created 5 hours
- Design of how the components will look 5 hours
- Implementation of the components and adding them into the library 15 hours
- Evaluation of survey results 5 hours
- Blog write up 5 hours
Specification
Aim
The aim of the project is to create 6 pattern library elements that can be used by multiple developers in the future if they need to update the website without having to redesign each element. The elements that will be created are:
- Navigation Bar
- Carousel Header
- 6 Different buttons
- Jumbotron
- Footer
- Form
The idea is to design the elements and then implement them into a pattern library website with an easy way to navigate and read each element clearly.
Test Plan and Process
In order to find out the good and bad points of the pattern library that has been created a survey has been created using Typeform (https://www.typeform.com), this will be sent to testers with a link to the pattern library. Typeform is a powerful online survey creation tool that enables you to design and launch it quickly, once it has been created the only thing that is needed to do is to share the link with anyone you wish to test it. Typeform even puts all the results into an easy to read layout that gives statistics such as percentages of each answer that was selected and says what each subject has answered. Below shows the questions that will be asked.
Experimentation and Implementation
The first component that was created is a simple navigation with each nav link highlighting in green when the cursor is hovering over it. This was easy to create because for the html a simple unordered list is created and then in the css the links are floated left so they display to the left and a hover of green on the links.
Conclusion
A survey was created to find out what was good and what was bad about the pattern library to enable future development and experimentation to increase knowledge, below shows the results.
The main issues that was noticed in the results is that there wasnt any descriptions of what each element is which stops developers from know where to implement a component. Also the other issue was that none of the CSS or JavaScript that was used is displayed on the screen which means a developer will not know fully how to create each component to the same standard as in the pattern library, this can also cause multiple issues when using a component.
Overall the project went really smoothly every stage was completed in the timeframe that was given to a high standard. It has been found that pattern libraries are being used more and more in large businesses to enable all developers to create a website without needing to redesign all elements every time they want to change things as it is already there to just copy and paste. This helps companies to complete projects quicker and more efficiently to take it to lauhcn in a shorter time.
