Pattern Libraries | Web Design for Industry
Samuel Headland
Pattern Library URL: https://samheadland96.github.io/pattern-library/
GitHub Repository: https://github.com/samheadland96/pattern-library
Medium.com report Link: https://medium.com/@samheadland/pattern-libraries-web-design-for-industry-4ab927b29547
Introduction
There are many important parts in creating a website and one of them is a pattern library to help store the components of a website so that it can be re-used again in the future. Meehan (2016) states that a pattern library can help in communicating the what, how and why behind your patterns to new teams. This project will research into pattern libraries, looking at their uses, how they are created and why they are used in the web industry.
Aim: To research into the common uses of pattern libraries in the web industry and with the research gathered, create a simple pattern library for a website.
Research
What is a pattern library?
Boag (2013) explains that a pattern library is a collection of user interface design patterns. They the different design elements that appear multiple times on the site and these include buttons, navigation, carrousels and more.
Many big organisations use pattern libraries to store the components that feature of their website and they can go back to the library and find one if they need to implement it somewhere else on the website or onto a new site. The image below is an example of a pattern library for Netlab. On the left hand side, there is a navigation side bar with all of the component links and the rest of the page shows the actual content that includes code that can be copy and pasted.
Why use pattern libraries?
On their website, ux.mailchimp.com (n.d.) states that with pattern libraries they can build consistently focusing their energy on workflows and logic, not web forms and list items. This section will look at the some of the reasons why the
- Consistency
Sorensen (2016) explains that that from the end user’s perspective, websites and products that are familiar and consistent provide a much better experience. Having a pattern library really helps with consistency in a website, so that all of the features on the website and the same and go together.
- Efficiency
One reason why pattern libraries are used is because of efficiency. Having a pattern library gives designers and developers the building blocks to quick build complex interactions. Designers and developers don’t want to be re-writing code for something that already exists on the website, however with a pattern library they can simple go to the component that they want and copy the HTML code and use it where they plan to with ease. It saves time and is efficient.
- Testable
Another reason why to use pattern libraries is the fact that it allows us to test how the patterns hold up across different screen sizes, input devices and browsers. With a pattern library that is hosted online it means it can be viewed on any device such as a mobile or desktop. It would better to test the components in the pattern library that it would on a live website because no problems would
We can build consistently, focusing our energy on workflows and logic, not web forms and list items.
Different ways to create a pattern library
The website, styleguides.io has a page identifying some of the possible tools that are out on the internet that allow designers/developers to create pattern libraries. There are many different tools and frameworks that can be used to create them and below are a few of them.
- Pattern Lab
One of the tools that could be used to create a pattern library is ‘Pattern Lab’. Responsivedesign.is (2013) states that Pattern Lab is a refreshing way of approaching webpages through atoms, molecules, organisms, templates and pages. The image below shows an illustration of these different groups and these all represent the components in the website and it shows an example of it with the Instagram mobile app.
In the Atoms section, it is showing some of the icons, text elements and two types of images. In the Molecules section it is displaying some of the components from the previous section joining together, such as the navigation bar at the bottom which is consisting of 4 of the icons shown. The organisms section is where the page is starting to take shape and displays the sections. The Pattern Lab is used to create atomic designs and this image is an example of it. It adapts the atomic design theory to explain the need for the pattern library and how to make one.
- Frameworks such as Bootstrap and Foundation
Frameworks are widely used in the web industry and have many different advantages and disadvantages. One of the pros of using a framework is the time that it saves time when creating a website or a pattern library. With a framework such as Foundation and Bootstrap, there is vast amount of resources available in the framework itself and also online support and code snippets to use.
lightningdesignsystem.com is a pattern library created and used by Salesforce and includes all their components that are seen on their website. It shows the individual component at the top and then displays the HTML code that would be used to make it. There is also other information including implementation notes and design guidelines. This website is clear and is easy to navigate around with the navigation bar on the side. The image below shows a screenshot of this website.
Example of a Pattern Library
Below is an example of ‘A List Apart’s’ pattern library. It is a one page website and so each element display on the same page. When you click on the element it has a drop down menu that then reveals the HTML code for that component. That can then be copied and used elsewhere on the companies website and doesn’t have to be coded twice. They also have a button on each element which when clicked, shows what it would look like on a full screen website. This would help designers and developers to get an idea of what it looks like on its own without the code and other objects.
Conclusion (List)
- Pattern Libraries are used for efficiency and consistency
- There are many ways to create a pattern library and it all depends on the scale that the designer/developer wants the pattern library to be.
- Lots of useful tools to create a pattern library without having any problems.
- Foundation 6 to be used to create the pattern library
Method / Design Process
Research will be carried to look into pattern libraries and getting an understanding what they are and why they’re used in the design industry. Online blogs and articles are to be used to collect research that could then be analysed in this project.
When designing the pattern library, rough hand-drawn sketches will be made and medium/high fidelity designs will be made on the computer using the software “Sketch App” to refine the design and come up with the final design.
Design Process
A design process is typically how a designer/developer carries out their work and helps with the journey of creating what has been asked. There are many different types of design processes and below is the one that was used for this project.
- Research — This will include looking into what a pattern library is, what they’re uses are and how one is created. The research gathered is to be analysed and will help create ideas for the patter library that is to be created.
- Design — With the research that has been found, this would give some ideas of what the pattern library could look like. Low and medium fidelity designs will be created before high fidelity designs are then made.
- Implementation — With a final design finished, the development of the patter library will start. HTML and CSS will be used to code the website and the framework Foundation 6 will be used to help structure the library.
- Testing / Feedback — After the development phase is finished, the website will be put into testing and feedback will be retrieved from certain participants.
A total of 65 hours will be spent on this project of creating a pattern library and the figure below shows how this time was spent. The image below shows a chart of how the time was spent while doing this project. It was split into the 4 sections that were described above: Research, Design, Development and Testing/Feedback.
To gain general feedback on the pattern library, a survey will be created and given to multiple people to get some of opinions of the ideas. The survey will be distributed via social media websites including Facebook and Twitter.
Specification
The purpose of this project was to create a pattern library for a website for our choice. The pattern library would need to include 6 components and include HTML and CSS code snippets of each of them. The code needed to be coded in Semantic HTML5.
Below is a list of 6 components that had to be added to the pattern library:
- Navigation Bar (Nav)
- Header Element (carousel or just static)
- A range of six button types
- Jumbotron (call to action)
- Footer
- Breadcrumbs
Test Plan
Browser Testing
For the browser testing, four of the most popular browsers were used to test the pattern library and see if the website works on them all. The browsers were Google Chrome, Safari, Internet Explorer and Firefox.
When testing the browsers, the website worked on all of the browsers and there was no problem with any of them. It looked the same on every browser and displayed what it should have.
User Testing/Feedback results
The following questions were asked and below each of them are the responses that the participants gave to them. Some really good points and recommendations were found when doing this survey.
- What do you think of the design of the pattern library?
- Were the individual components clear and easy to understand?
- Any recommendations for further improvement?
Design, Planning, Experimentation & Implementation
With the research that was found and analysed, designs were created and the pattern library was implemented into a function-able website. Below are the designs and some documentation of the production.
Low Fidelity
Medium Fidelity
High Fidelity
The image shows the final design that was coded in HTML and CSS. From gaining the research and analysing it, it was decided that Foundation 6 would be used to create the library. It was chosen because Foundation was used in previous projects and I believe that I have good knowledge of how it works and would be able to implement it without having any major problems.
Pattern Library: https://samheadland96.github.io/pattern-library/
Documentation of production
Below is the code for the navigation bar that is on the patten library. It is coded in HTML and has the code situated in <header> tags. This is a HTML5 feature and it makes it easier to locate the header code and makes it semantic. The header displays a logo on the left and the navigation bar on the right. The navigation is in <nav> tag and each link has a <li> tag and this is for lists. Inside that tag there is also an <a> tag that makes the text clickable and allows the user to move to another page.
The code below is the HTML code that is displayed below the navigation bar. So that the code could be display on the page without being recognised as normal HTML code, the tags < and > had to replace the < and > tags. This meant that any code inside of these tags would display on the website and would output what the code does.
This was repeated throughout the whole of the pattern library with the rest of the components that were displayed on the website.
Experimentations
The CodePen below shows an experimentation of a button that could be added to the patter library. This was done to practice the code and play around with different features that can be displayed via CSS.
Conclusion
Feedback
- What do you think of the design of the pattern library?
Very nice and straightforward. Probably the most user friendly page I’ve ever seen
The design looks good however it would be good to have some sort of navigation to quickly get to all the components. Having them all in a long list wouldn’t be ideal for a real client project where there will be lots of components.
Prefer the elements on different pages, too much to take in on one page. Might be annoying having to scroll up and down to find each element.
Very good and straight to the point with a consistent design
- Were the individual components clear and easy to understand?
Very clear. I even copy and pasted the HTML and SCSS, I got the same results as shown here.
Yes.
Yeah they were. Except for the buttons. They aren’t 6 button types as the majority are the same button type but different colour. It should be more dropdown buttons, icon buttons etc.
Yes very easy to understand with clear titles for each each element
- Any recommendations for further improvement?
I’d get rid of the grey highlights over the syntax code, they make it a bit difficult to read
Is there a need for code previews on mobile? It just means that users have to scroll for a long time to get to the component they may want.
As previously stated, separate the elements onto different pages.
The buttons could have been lined up better
Above is the feedback that was gained from 4 participants. One of the comments that stood out was one that said it would be good to have some sort of navigation to quick get to all of the components. This would be be very helpful because the page is quite long and it so you don’t have to scroll down to get to one particular component, the navigation could take you their with one click. Overall, it is successful pattern library, however there is room for improvement and the feedback that has been gained could help make it better in the future.
The design process that was used for this project really helped produce this pattern library to a reasonably good standard and it help to manage the time that was had for this project. In the future this process that has been used will be used in other web based projects because it will benefit the way that that it is created.
In conclusion, pattern libraries are very useful resource for designers, developers and web teams to use for any type website, big or small. Doing this pattern library has been very insightful and a lot has been learnt about how these single components can make the website what they are. Without the main components of a website, there wouldn’t be much there, so it is good to have the components in a single webpage so they can be looked at and used in the future with ease.
