Pattern Library
Introduction
A pattern library represents a website tool which contains user interface components which will define the style of the new website and it will provide visual examples for each individual element along with its HTML code and CSS resource.
The use of pattern libraries represents a best practice in the development process for the reason that all the components are defining a general look and feel, while also providing constancy between pages or multiple projects. Moreover, this tool is adding reusability to the project components.
The aim of this documented report is to sustain and provide logical explanations about the creation process of a pattern library starting with planning, covering design and code implementation. The final product will be represented by a HTML/CSS website which will provide visual examples and code for the following components: Navigation bar, Header Element, Buttons (filled and empty), Call to action, Footer and a Contact widget module.
GitHub: https://github.com/podeanualex/patternlibrary
Live version: http://podeanu-alexandru.com/pattern-library
Github pages: http://alexpodeanu.me/patternlibrary
Research and analysis
What is a pattern library
Pattern libraries have been the focus of web developers and designers in the late years due to the benefits they bring within a project, with a reduced feature building time. While the initial build time for a pattern is longer than a style guide, the overall result will improve the code base.
Pattern libraries make use of static UI elements such as tabbed navigation, drowpdown menu and usual web page layouts such as grids. This results in a shifted user experience that depends on the context of content.
Pattern libraries and style guides
Compared to style guides, which highlight the visual characteristics of elements, pattern libraries focus on interaction between components within a platform and their usage inside the website. As such, a pattern library includes any elements that can be used multiple times, with visual design elements and layouts with the aim of creating a persistency across the platform. Moreover, pattern libraries include UI components like buttons, links, navigation, which will be used across the website.
Benefits of pattern libraries
There are certain benefits associated with pattern libraries, which are not offered by other tools such as style guides. While style guides take care of the branding side of the platform, pattern libraries create structure and layout, enhancing user experience. As such, pattern libraries are highly regarded when creating a comprehensive platform.
Other benefits encapsulated by the pattern platforms are represented by a better performance in terms of speed of response, cleaner code which can be easily followed, consistent user interface which enhances user experience and satisfaction, as well as increased browser support.
An additional benefit of pattern libraries is given by creating a single clear destination for all parties involved in the design and development of a platform, which creates engagement resulting in a high quality end product.
Atomic Design approach
A best practice for pattern libraries is represented by the use of a atomic design methodology consisting in 5 stages: atoms, molecules, organisms, templates and pages. The approach is not linear and has a principal benefit of adding hierarchical order into the components of the platform.
Each of the five atomic design methodology stages is working together with the other ones with the aim to create interface design systems in a more deliberate and ordered manner. The five stages of atomic design are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Design Process method
The design method that will be used in order to create the end product will cover four main steps: discover, define, develop and deliver.
This pattern library workflow will start at the Discover stage where all the planning and sketching will be done, then followed by the Define stage where the high fidelity design will be carried out. Once the design is done under the define stage, the process will move forward to the Develop stage where the design will be coded and then in the final stage, Deliver, user and usability testing will be done before launching the product.
Test Plan
A test plan will be required in order to identify any visual or functional issues of the product such as browser compatibility or any other problems related with integration of the components.
In order to prevent these issues, all the components will be tested individually and any found errors will be corrected before the final launching of the pattern library.
Another testing plan will focus the HTML markup of the final product which will be verified using the W3C validator in order to assure that the code is correct and will not be interpreted differently by the browser.
Specification
The final product will be represented by a HTML/CSS website which will provide 6 user interface components along with code snippets. The website foundation is represented by the following components which will be designed and developed:
- Navigation bar
- Header Element
- Buttons
- Call to action
- Footer
- Contact widget
Navigation bar
The navigation bar represents an important component within a website making the connection to different pages and linking the steps on to each other in the user journey. For this pattern library the navigations will be developed having a slightly different shape in order to cover multiple design styles.
Header Element
The header section represents the first body element that is being noticed by the user and should be covering along with navigation and website branding a section with a descriptive heading associated with a link or button in order to express a message to the user. On the final product the header element will be represented by a big hero image with a content on a top layer.
Buttons
Buttons within a website have the same importance as the links as they are clickable elements and can show or hide components or even trigger functions or features from the website. The pattern library will provide two options for buttons: filled and empty and these are going to have three different sizes providing more choices and covering multiple contexts.
Call to action
The call to action element will be designed and developed so it will easily fit any region of the website and it will provide a high contrast for the rest of the design. The component will have a transparent background version and a red button for the connection link.
Footer
The footer is an important section of the website which is visible in every page inside the website and usually provides extra information that has to be displayed for a better user experience. This will be developed in a three column layout covering three sections: content section, secondary links and buttons.
Contact widget
The last element of the pattern library is represented by a widget which can be displayed in a one or two columns layout and design style.The contact widget will group together in a clearly defined section an image or avatar, a name and title and two links for the phone and email of the user.
Design, Planning, Experimentation & Implementation
Planning
The first step in the creation process after the list of components was defined, was to sketch the initial ideas of how the components should look and behave. This helped understanding each component as individual and defining the overall look and feel of the end product.
The sketches covered the layout of the pattern library and each individual component along with the possible states. During this stage the main functionalities and workflow was declared as a guideline with the aim of producing a high-quality end product which will be easy to use and interact with and also will have clean interface.
Design
Under the design stage the initial drawings and sketches were developed further into visual illustrations using Sketch App where each component was developed in a separate page in order to maintain to document structure clean.
The design approach covering colour choice and layout style was in line with the latest design trends in order to create a user friendly user interface which will facilitate the interaction. The design principles such as affordance, proximity, contrast and space have been followed during the design stage trying to define a high quality pattern for the end product.
Each component was grouped in a container in order to indicate the usage by providing visual examples and the code snippet. All the containers were displayed as part of the index.
Experimentation
A set of experiments have been carried out following the predefined design guideline in order to anticipate any further issues with the components and to establish the development pattern.
Implementation
Using the high fidelity design and sketches along with the experiments, the final implementation of the pattern library represented by the HTML and CSS stage was done using Atom and Google Chrome for testing.
During the development each component had an individual CSS file in order to keep the code and project clean. Also, all the components were displayed on the main page — index.html rather than on multiple files. This approach was taken in order to keep all the library information in one place and provide clearly understanding to the user.
GitHub Repository
GitHub was used in order to store the project files and to keep track of the development process. This helped understand the changes between different stages of the project and to monitor all the issues.
During the development the folder was pushed to the repository after the implementation of each component, creating a a list of successive commits which will show the progress and also the chance to compare different stages.
W3C Code validator
The code of the pattern library was tested using the W3C validator in order to check the correctitude of the code that will be interpreted by the browser. The components HTML markup was checked along with it and the validator showed no errors.
Project feedback
The feedback for the product usability which will determinate the project success was carried out by surveying a group of developers in order to understand how easily they interacted with the pattern library and how this improved the development process.
In order to define these aspects, a survey on typeform.com consisting of 3 main questions has been created and the results shows that users found the pattern library usable and according to the performance results the product helped speeding up the development process.
Conclusion
The use of a pattern library in the development process represents a powerful tool which speeds up the process and increases the productivity. Another reason to create and use a pattern library is that the components will follow the same look and feel and it will add constancy to the project.
Based on the user testing survey results the library represented a success as the project aim was to create a usable tool which will speed up development process has been met.
Also, having done an overall self-reflection over the product and the process, a few improvements can be done:
- the library can be improved by increasing the number of components and creating complex sections
- provide more visual examples and expand the snippets for the CSS properties
- development process can be enhanced by applying the already existing style on the future complex elements
