Pattern Libraries
1. Introduction — background and project aim
Designing and developing big websites can be challenging and time consuming most of the time, therefore most of the user interface designers and web site developers who are working for big companies or design studios have adopted the practice to create pattern libraries and user style guides to speed their workflow.
The pattern libraries are mainly used by developers for building and implementing websites. They are similar to the user style guides for designers with the only difference that the pattern libraries can be time consuming to develop than the UI style guides.
The pattern libraries consist of different elements that are used multiple times throughout the different screens of the website design such as buttons, social media icons, footer, navigation etc. Each one of the elements in the pattern libraries usually consists small documentation or a paragraph on how the element should be used and a snipped of the code that was used to create this element. By creating a pattern library for example in a company, it makes it a lot easier to be applied by new people who would like to use the code.
The aims and objectives for this project will be to implement a pattern library which consist 6 different UI elements.
· The pattern library should be designed and implemented following the best practices in the design industry.
·The components should be tested before implementing them in the pattern library
· The pattern library should be uploaded and made public on GitHub, so it can be accessible for who like to use it.
2. Research and Analysis
Best practices in creating a pattern library
Before starting the development of a new website, it is important to create the pattern library or the user style guide first. The developers most of the time don’t star with developing pattern libraries because they are often time consuming, they usually dive straight into the implementation phase of the website because most of the time they must follow deadlines. A few years back design tools such as Sketch App and Adobe Photoshop started to develop more functions which can be used by developers in the creation of UI style guides and pattern libraries. In 2012 the Photoshop product manager Stephen Nielson announced and demonstrated the function which enables the designers to export CSS for text and shape styling and group of elements for example buttons. The Sketch app provides a similar function where the designers can export CSS and SVG code. The designers should consider these options next time when they start to develop pattern libraries or user style guides.
Discussed by Brad Frost in his blog there is a framework each pattern library should contain to be successful and understandable for everyone. It should include a title and description on what is it about and how it can be used and its purpose. Each of the design elements should be able to showcase its usability responsiveness, interaction, motion, true color and performance.
Code snipped of HTML, CSS and Java Script should be provided next to each UI element, so the users can copy the code and use it freely in their website.
Another important thing for creating pattern library mentioned by Rebecca Sorensen is to keep the design of the library consistent throughout the different design screens. She mentions that the libraries elements should be designed in a way that are easy to update and should be spread on different pages in order to be easily updated by the different developers without affecting the other pages.
Existing open-source pattern libraries
There are many open sourced pattern libraries which can be found on the internet one of the most popular website for different pattern libraries and UI style guides is the Styleguides.io which provides a vast selection of different pattern libraries from which the users can browse and select a library based on their needs.
This section will look into the most popular ones which are used by the developers every day.
Bootstrap
According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Karol K. mentions this benefit in his blog that after the users get the license they are free to use the bootstrap framework in developing their website and even sell them to clients.
The documentation of the bootstrap is well structured with the navigation menu on the left side of the page which is a common structure used to present the pattern libraries. The navigation consists of 8 sections which provides everything that the developer needs for building the structure of their website.
Mailchimp
Mail chimp is living pattern library, unlike the Bootstrap which is a UI framework. It does not provide any guidance on how your website should be build, it provides just the elements and the documentation for them which makes it super easy to use and provides freedom for the users.
Foundation
One of the benefits mentioned by Laurence Bradford for using foundation over Bootstrap is the ability for the users to easily customize their websites. Creating unique websites is important and valued by clients. The documentation layout of the library is structured in the same way such as the Bootstrap and the Polaris.
On the Internet there are many pattern libraries and frameworks that the developers can chose from based on their needs and goals. It can be seen that most of the pattern libraries follow a certain trend to present their information with the sidebar navigation.
The pattern library for this project is not going to use the side bar navigation because of the small number of elements that will include. If the pattern library grow with the time it may be considered a side navigation similar to the sites reviewed above.
3. Specification — outline of project design needs, features and functions.
The pattern library designed for this project will consist 6 different components.The list below will present the requirements and the specifications that have to be completed so the project is successful.
- Implementing the components for the pattern library which includes: a Navigation bar, Header element, six different button types, jumbotron (call to action), footer and a component of my choice.
- The design of the pattern library web pages should be responsive and working on desktop and tablet.
- The pattern library should be available on GitHub and be accessible to everyone. It should include a READ ME file which will describe the context of the pattern library and display all the components.
- All components of the pattern library should be supported with documentation and a snipped of code.
- The pattern library will be tested on different screen sizes and browsers to ensure the responsiveness and the compatibility of the design.
4. Test Plan process
The testing was conducted after the design of the pattern library was completed. The test plan included tests on different devices and different browsers. Testing the code was important factor before the pattern library was made public on the GitHub repository.
Browsers on which the library was tested:
· Google Chrome
· Opera
· Internet Explorer
The responsiveness of the library was tested in the inspect mode in Google Chrome which enabled me to test it for a number of design screen sizes.
The HTML and CSS code was tested using the WC3 validator service to ensure the syntax of the code was without any errors.
5.Design, Planning, Process methods, Experimentation & Implementation
Documentation Design Process & Planning
For the creation of the pattern library I chose to develop it on Cloud9 because it was the perfect tool for the design needs and the implementation of the design. Cloud9 provides different coding languages and style libraries. It was perfect for the design because it has included version control function which enabled me to update my project straight to my GitHub repository. Each component was uploaded multiple times throughout the implementation of the library to save the progress this can be seen from the commits on the project. Saving my successful work enabled me to implement new features without the fear of loosing my progress.
For the design of the pattern library I decided that there was no need to create a side navigation due to the fact that I only had 6 components.
For inspiration and design ideas I decided to look through the Styleguides.io web site to see how the other developers and designers create their libraries. I’ve selected some components that would fit in my library and decided to implement them in codepen.com to try to create something new this will be discussed in the section below.
Experimentation
Experimentation in code pen was made on navigation, buttons and the header components which were then implemented in the pattern library of the project.
Documentation of construction of pattern library.
The pattern library was constructed in Cloud9 as mentioned above. Each component follows the same design structure layout throughout the design pages of the library. Each page has a heading at the top which states what component can be seen on this page. Small description paragraphs are presented at the top of each element to inform the users on how the elements can be used in the web.
The code snippets of the HTML and CSS which can be used by the user to creates the elements can be found below each of the components.
To display the snippets of code in the web browser I had to use tool called Freeformater to transfer the html brackets and make it readable for the users in the browser. To display the code in the browser I used the pre tag and the code tag which enabled me to style them as grey boxes which made the code more readable.
The final thing before uploading the pattern library was to tidy up the code in the documents, so they can be readable when people access them on GitHub. I’ve used the tidy HTML and CSS function provided in code pen.
Conclusion
In conclusion it can be said that the design of the pattern library was success because it managed to complete all of the aims and objectives of the project.
The pattern library managed to present its documentation based on the current trends in the web industry. The design was made super simple to enable all of the users understand how to use it.
GitHub Link:
Link to the pattern library
Link to medium blog post:
https://medium.com/@bojidarerovski/pattern-libraries-cab3431b8f44
