Web design Industry -Pattern Library report ( by Saurav Singh)

Medium Link: https://medium.com/@sauravsingh_91049/web-design-industry-pattern-library-report-by-saurav-singh-fc56e5509473

Pattern Library website link: https://saurav2009.github.io/SWD600-AE2/buttons.html

List of figures

Figure 1- Display colour palette of lonely planet.

LONELYPLANET, 2017. Lonely planet [viewed 06/05/ 2017]. Available from: http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons

Figure 2- Shows destination Icons of lonely planet.

LONELYPLANET, 2017. Lonely planet [viewed 06/05/ 2017]. Available from: http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons

Figure 3- Display table design of Mail chimps.

MAILCHIMP, 2017. Mailchimp [viewed 06/05/ 2017]. Available from: http://ux.mailchimp.com/patterns/tables#child-rows

Figure 4- Shows the code for the table of Mail chimps.

MAILCHIMP, 2017. Mailchimp [viewed 06/05/ 2017]. Available from: http://ux.mailchimp.com/patterns/tables#child-rows

Figure 5- Display Sarah Cotton pattern library table of contents

COTTON, S., 2017. Pattern Library [viewed 06/05/ 2017]. Available from: https://github.com/sarahjcotton/SWD600-AE2

Figure 6- Shows action icons design of Lighting Design System.

LIGHTNING DESIGN SYSTEM, 2017. Lightning Design System [viewed 06/05/ 2017]. Available from: https://www.lightningdesignsystem.com/

Figure 7- Display the image of Periodic Table of the Elements.

FROST, B., 2017. Atomic Design [viewed 01/05/ 2017]. Available from: http://bradfrost.com/blog/post/atomic-web-design/

Figure 8- Display the image of five distinct level of Atomic design.

FROST, B., 2017. Atomic Design [viewed 01/05/ 2017]. Available from: http://bradfrost.com/blog/post/atomic-web-design/

Figure 9- Shows the image of atoms is the first stage of Atomic design.

FROST, B., 2017. Atomic Design [viewed 01/05/ 2017]. Available from: http://bradfrost.com/blog/post/atomic-web-design/

Figure 10- Shows the image of molecules is the second stage of Atomic design.

FROST, B., 2017. Atomic Design [viewed 01/05/ 2017]. Available from: http://bradfrost.com/blog/post/atomic-web-design/

Introduction

This project involves designing the pattern library which will display: Navigation Bar, Header Element (carousel or just static), a range of six button types, Jumbotron, Footer possibly incorporating social media icon links etc. and Component of the choice which is Form. The report will also contain research and analysis, methods and specification, test plan process, design, planning, experimentation and implementation, and conclusion.

Boag, P. (2013) discovers a pattern library is a collection of user interface design patterns which includes: Headers, Navigations, Footers, and Buttons etc. Moreover, Debenham, A. (2014) tells a pattern library where all the elements and components which appear on the website can be found in one place. So, people don’t need to go around to search for them. It also makes easier to test because everything can be found on one page.

It can be split into components and elements. Components display slightly larger things such as navigation bars and grid system etc. Whereas, elements display smaller items which include buttons and form inputs etc.

The reason behind using the pattern library code collaboration really easy because there was no database or required knowledge of PHP and basically focused on front end design. The disadvantage of using it needs to keep maintained and keeping up to date.

In Pate, A. (2016) article he explains by using a pattern library it is quicker to build the website. Bull, M. (2015) demonstrates websites need to be clear, consistent and easy to use. A pattern library provides the consistency by providing the similar kinds of buttons or navigation bars in a web pages. It is also flexibility and easy to develop. For example: change the colour of fonts, size, and type.

Aim

The aim of this project is creating a pattern library which will display: Navigation Bar, Header Element (carousel or just static), a range of six button types, Jumbotron, Footer possibly incorporating social media icon links etc. and Component of the choice which is Form.

Objectives

· Conduct the research based on, how to create a pattern library from scratch, look at current pattern library design and upcoming. Compare and contrast with them. Using the library book and the Internet to collect this information. All referencing data should be saved in refwork.com. At least spend 15 hours completed by 5th May 2017.

· Create a low fidelity wire framing, medium fidelity wire framing and high fidelity wire framing. Use the Internet and library book to learn how to create it. Spending at least 10 hours will be spent on testing and production this will be completed by 7th of May 2017.

· Conducting the surveys showing low fidelity wire framing examples and ask the audience which one they like most and why. Using the library book and the Internet to design questionnaire. Spending at least 2 hours will be spent on researching and production this will be completed by 8th of May 2017.

· Looking at several pattern library example and testing out the codes. Using the text editor tools such as notepad++ or cloud 9. Spending at least 15 hours will be spent on researching and production this will be completed by 11th of May 2017.

· Start creating a pattern library using cloud 9 or note pad++ with HTML validation,user testing and writing up the report . All referencing data should be saved in refwork.com. Spending 25 hours and this will be completed by 14th May 2017.

Research and Analysis

The best approach for creating a pattern library from scratch. Friedman .V (2017) explains the concept of a pattern library should be simple and interface needs to break down, arrange, group and name them correctly so it can be use by others, and easy to maintenance.

“Building a UI pattern library is one that makes developing apps and websites easier and allows for consistency across multiple devices”. Nguyen, A. (2012)

Nguyen, A. (2012) discovers when creating the pattern library from scratch remember to view the existing the one is available in the market and try to follow their concept or create your own. There five things which can be beneficial when creating the pattern library which includes:

“1) Start small — It means to try to do the basic design of tables or buttons etc.

2) Add the code.

3) Insert your custom design.

4) Add styling/branding.

5) Provide examples- which is easier to follow or understand”. Nguyen, A. (2012)

Here are the few existing websites available in the market such as:

1) Lonely planet

Figure 1
Figure 2

By looking at Lonely planet pattern library it is not displaying any code on the website. So, others people cannot use it. Secondly, the main focused of this website is displaying the colors, typography, and icons which people can able to see on their website. It is easy to navigate because it has navigations on the left-hand side, headers and sub headers with descriptions.

2) Mailchimp

Figure 3
Figure 4

By observing the Mailchimp website pattern library. It provides the HTML code for most of their components but doesn’t display CSS and Javascript codes. The benefits of using this website it displays the code, results, and description about the components on the pages. It is easy to navigate because it has navigations on the left-hand side, headers and sub- headers with descriptions.

3)Sarah Cotton Pattern Library

Figure 5

By viewing the Sarah Cotton pattern library. She designs the pattern library in one page with description, actual elements, with codes and provides heading for each component. This is the best design out of all and different from other because it is extremely easy to navigate.

4)Lightning Design System

Figure 6

By reviewing lighting design system pattern library. There are mainly focused on Icons design not displaying any code on the website. It is easy to navigate because it has navigations on the left-hand side and headers.

Overall, all the websites of pattern library are in blue color and mainly focused on ICON designs. It seems like blue color is current web design trends for the pattern library. Whereas, this project main focused on black and white colour because it needs to stand out from others. This project is going to create similarly like Sarah Cotton pattern library because it easy to navigate and can display all requirements which users want but slightly change the description because all the components and elements don’t need description into it and try to follow the atomic design concept.

In additional, Friedman, V. (2017) suggests the atomic design involved in structuring and group components in the pattern library.

Frost, B. (2017) clarifies atomic design plays an important role when designing a pattern library or website because pattern library is made up of small components which display buttons, headers, and navigation etc. The Atomic design uses similar concepts such as Periodic Table of the elements which display the formula of gas, liquid and solid etc.

Figure 7

Frost. B (2017) describes in atomic design, there are five distinct level such as: atoms, molecules, organisms, templates and pages. There are only few atomic designs which are important for this project of pattern library which includes:

Figure 8

A) Atoms- Frost, B. (2017) suggests atoms is the first stage of design which includes: a label, an input, and a button. This also displays the elements such as colour, palettes, and fonts. The example shows in the bottom pictures.

Figure 9

B) Molecules -Frost, B. (2017) clarifies molecules is the second stage when atoms design are coming together. Molecules are the stages where small components are combined together and make a search bar.

Figure 10

The reason these two atomic designs is important for this project because it is just aimed at creating the components such as buttons and navigations etc. The rest atomic designs are more focused on putting in this actual website and testing out the components.

Methods

In this report, own methods are created and taken several parts which include:

Planning-2 hours 
Planning takes place at the beginning of this report because need to understand what is going inside the report about pattern library.

Research and Analysis-20 hours 
Research are based on how and why to create a pattern library, Looking at current pattern libraries compare and contrast. Create a survey based (appendix 1) on research, low wireframing design and collect the information from people. Next, create the medium fidelity sketches with a few details. Then, high-fidelity wireframing.

Reporting- 10 hours
Start writing a report based on collective information from research and analysis.

Production- 35 hours
A pattern library will be created by using the HTML, CSS and Javascript. It should be partly responsive and can able to work on mobile phones, tablets, and desktops.

Testing- 4 hours
This will be also tested by users. Another test is technical website should work in all the browsers and validate by using W3School HTML validator.

Gantt Chart

Specifications

All of the pattern libraries components and elements displays in one web page with headers, images, sub-headings for the name, HTML and CSS code.

· In Buttons sections of pattern libraries the functions are divided into six different type of buttons which includes: Small buttons, Medium Buttons, Large buttons, Hover Button, Shadow button and Disabled button.The features it has different colours such as: blue, green and yellow etc and in various sizes.

· The second section of pattern library displays the functions of Header section which shows three different type of Heading. Heading 1 in the uppercase letter, Heading 2 in normal and Heading 3 in lowercase. The features all of them in different colours, fonts and sizes.

· The third section of pattern library displays the functions of Navigation section shows few navigations. The features which will have hover effects , it is responsive and has a black background colour.

· The fourth section of pattern library displays the functions Footer section which will have social media icons . The features it is fully responsive and has a black background colour.

· The fifth section of pattern library displays the functions of Jumbotron section which will have the background image and heading font and text in front . The function text and image are responsive.

· The final section of pattern library displays the Form section which will have name, email and comment box. The features the icons with the text and changing background colour in ‘Send’ button which is one of the examples of atomic design. It is fully responsive and has grey background colour.

Test Plan

The testing results will be in rating score between 1 is very bad to 5 is excellent by users. It will be participating between 2 to 3 people. The questions are asked based on pattern library project and shown underneath in Technical and User testing.

NNgroup, (2017) and Reich, M.(2015) construct user testing happens in front of a focus group or interviewing and conduct the survey for an evidence.

For this project, first test process is happens in low wire-framing which is choosing final pattern design. Zurb (2012) and Reich, M.(2015) show what is good about design, to see what features and functions they like and don’t need to afraid while doing user testing.

The testing results will be shown in (appendix 3).

Technical

User -Testing

Design, Planning, Experimentation and Implementation

Documentation Design Process and Planning

1) Low fidelity wire-framing

Design 1

Design 2

Design 3

Design 4

2) Medium fidelity wire-framing

3) High fidelity wire-framing

Buttons

Headers

Navigation

Footer

Jumbotron

Form

Experimentation

I have look at the ‘lonely planet’ website and few others in the research section of the report for experimentation but none of the websites didn’t display all code into it. That is why I created my code from scratch for pattern library.

Documentation of Construction of pattern library

  1. Hover Button

This is the CSS code for the Hover button which I created in my pattern library. It needs two background colour without the hover it is in ‘white’ colour, when the users touch or point the mouse it changes to ‘Yellow’ colour. The code for this changes is highlighted in the ‘red’ text box. The rest of Documentation shown in (appendix 4).

Conclusion

Overall, the pattern library achieved all the requirements which were asked in this project. In user feedback, most of them provide 5 and 4 score which is very good and pattern library was design based on focused group and survey results. The end product fulfills all the requirements and achieved the end results. Secondly, the reasons I got 5 because users said it is quick and easy to use because they don’t need to click in navigations to find the things and everything is located on one page. Next, molecules is the second stage of atomic design used in ‘Form’ which is displaying icons, icons name and send button with hover effect. Moreover, the pattern libraries is validate and shown the results in (appendix 2). 
On the other hand, the only the things which didn’t well on this project unable to experiment other pattern libraries website because they didn’t provide the full codes into it. Another reason I got 4 in users feedbacks because users are finding difficult to view the codes in mobile phones because codes are not displaying responsive.

References

BOAG, P., 2013. How and why to create a pattern library [viewed 1/05/ 2017]. Available from: https://boagworld.com/design/pattern-library/

BULL, M., 2015. Building a pattern library for a large website [viewed 06/05/ 2017]. Available from: https://blogs.kent.ac.uk/webdev/2015/01/31/building-a-pattern-library-for-a-large-website/

COTTON, S., 2017. Pattern Library [viewed 06/05/ 2017]. Available from: https://github.com/sarahjcotton/SWD600-AE2

DEBENHAM, A., 2014. Getting Started With Pattern Libraries [viewed 06/05/ 2017]. Available from: https://alistapart.com/blog/post/getting-started-with-pattern-libraries

FRIEDMAN, V., 2017. Taking the pattern library to the next level [viewed 02/05/ 2017]. Available from: https://www.smashingmagazine.com/taking-pattern-libraries-next-level/

FROST, B., 2017. Atomic Design[viewed 01/05/ 2017]. Available from: http://bradfrost.com/blog/post/atomic-web-design/

LIGHTNING DESIGN SYSTEM, 2017. Lightning Design System [viewed 06/05/ 2017]. Available from: https://www.lightningdesignsystem.com/

LONELYPLANET, 2017. Lonely planet [viewed 06/05/ 2017]. Available from: http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons

MAILCHIMP, 2017. Mailchimp [viewed 06/05/ 2017]. Available from: http://ux.mailchimp.com/patterns/tables#child-rows

NGUYEN, A., 2012. Why and How to Build a UI Pattern Library [viewed 05/05/ 2017]. Available from: http://www.effectiveui.com/blog/2012/06/01/why-and-how-to-build-a-ui-pattern-library/

NNGROUP, 2017. User Research Methods: From Strategy to Requirements to Design [viewed 02/05/ 2017]. Available from: https://www.nngroup.com/courses/research-beyond-user-testing/

PATE, A., 2016. Get Started with Pattern Libraries. , 94–95[viewed 05/05/ 2017]. Available from: http://learn.solent.ac.uk/pluginfile.php/911009/mod_resource/content/1/alex_PATE_PL.pdf

REICH, M., 2015. user testing vs usability testing [viewed 05/05/ 2017]. Available from: http://www.commonplaces.com/blog/user-testing-vs-usability-testing/

SMITH, S., 2012. 4 Common Sense Tips for Creating Surveys that Work [viewed 08/05/ 2017]. Available from: https://www.qualtrics.com/blog/creating-surveys/

WIKIHOW, 2017. How to Create a Survey [viewed 07/05/ 2017]. Available from: http://www.wikihow.com/Create-a-Survey

ZURB, 2012. 3 Tips On How To Approach User Testing [viewed 02/05/ 2017]. Available from: http://zurb.com/article/888/3-tips-on-how-to-approach-user-testing

Bibliography

BRÜNING, W., 2014. How to build the perfect pattern library [viewed 02/05/ 2017]. Available from: https://www.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

COOK, D., 2016. What is the Difference Between a Style Guide and Pattern Library [viewed 06/05/ 2017]. Available from: https://webdevstudios.com/2016/04/07/what-is-difference-between-style-guide-and-pattern-library/

NORMAN, N., 2017. User Testing Research Report [viewed 01/05/ 2017]. Available from: https://www.nngroup.com/reports/topic/user-testing/

USABILITY, G., 2017. Methods [viewed 05/05/ 2017]. Available from: https://www.usability.gov/how-to-and-tools/methods/

USERFOCUS, 2013. userfocus [viewed 05/05/ 2017]. Available from: http://www.userfocus.co.uk/articles/usability_test_plan_dashboard.html

Appendices

Appendix 1-Survey and results

The reason these two atomic designs is important for this project because it is just aimed at creating the components such as buttons and navigations etc. The rest atomic designs are more focused on putting in this actual website and testing out the components.

There are several questions asked when conducting the survey about pattern library design. The questions were asked between 5 students who are currently studying Web Design and Information Technology at Southampton Solent University by “type form” online survey website. The first two questions asked Smith, S. (2012)explains in simple manner and wiki how(2017) writes target what is the project aim without showing the low wireframe fidelity which are:

The third questions show the low fidelity wireframe designs and asked them which one you like and why? The answers where display in underneath figure images.

By observing the results. All the participates like the number 1 design from the low fidelity wire-framing. The reason why they like it because it is written in question 4 answers such as: easy to use, you can view all the codes in one page and nicely layout and quick to find the things.

Appendix 2-Validation results

The first two images show how many errors were found during the validation.

The third image shows the code and how one of the problems is solve which display in previous images.

Final image show validation is completed and also highlight the file name in the ‘red’ text box (buttons.html).

Appendix 3- Testing results

Technical- Results

Google Chrome

Desktop and Tablets

Mobile phone

Internet Explorer

User Testing -Results

Tester 1 (Name- Ajibola Balogun)

Tester 2 (Name- Quamii Isaac)

Tester 3 (Name- Pratima Gurung)

Appendix 4- Documentation of Construction of pattern library (part 2)

1)Headers

This is a Header section code in the pattern library. There are three different type of Heading. Heading 1 in the uppercase letter, Heading 2 in normal and Heading 3 in lowercase. The code for this changes is highlighted in the ‘red’ text box.

2)Footer

To make this ‘responsive’ footer used the ‘percentage’ and ‘em’ in font size and icon images instead of ‘px’ code in css file. The code for this changes is highlighted in the ‘red’ text box.

3) Form

To create the Icons on the Form. I have downloaded the external image from Internet. The code is display in CSS file and highlighted in the ‘red’ text box.

To create the hover effect in ‘send’ button of Form. I have used two different type of colour one for submit and another is for not submit. The code is display in CSS file and highlighted in the ‘red’ text box.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.