https://medium.com/@graeme_robinson89/web-design-for-industry-ae2-pattern-library-83b1e421cccd
Web Design for Industry: AE2; Pattern Library
Introduction
To view the Pattern Library required for this assignment, please follow this link: https://grwebdesign.github.io/Pattern-Library/
A Pattern Library, as described by Boag (2013) is a “collection of User Interface design patterns”. This is a documentation of the appearance of a website’s components, as well as the code used to stylize them. For example the navigation menu, buttons, colour codes, font styles, and background. The purpose is to give any web-based project its own identity, personality, and impact on the market.
This blog post will document the making of a Pattern Library.
Project Aims and SMART Objectives
Aim:
The aim of this project is to create a Pattern Library, taking into consideration the way it is presented. The Pattern Library will be made up of 6 components supported by the ability to cut and paste the code used to create them. This way the components can be used in various applications. The project will be based on evidence of documentation, background research, and justification for billable hours.
Objectives:
To design a Pattern Library by researching and exploring the workings of other pattern libraries. The design process will be informed by reliable resources available online, and the outcome of product testing. Using the software available on the University and home computers, the design journey will take 65 hours to complete.
Research
Boag (2013) insists Pattern Libraries are needed to “solve common design problems”. Owah (n,d) identifies some examples of these problems; ranging from poor readability, unorganised content layout, bad navigation, inconsistency, and cluttered pages.
Boag (2013) continues; advising that when websites or apps are updated by people other than the people who originally made it, the User Experience and Interfaces are affected by different styles of coding. This could possibly have a negative effect on how usable the website or app is.
To resolve this; Boag (2013) suggests web projects use a Pattern Library in order to maintain a consistent, reusable and accessible code. Some great examples are the style guide for Starbucks (2014), and the Pattern Library for A List Apart (n,d). As the examples show, Pattern Libraries can take many forms, but a style guide appears to be the most popular and understandable form.
Front End Style Guide
As this project will be a page where the code for its components can be copy-pasted from; Debenham (2013) suggests making a “Front-End” Style guide, as they use the HTML and CSS languages to display the code so it is ready to be copy-pasted. Front-End Style guides can also be upgraded to support changes made to the project; and where required, code adapted to work on older browsers such as IE7 can be readily available.
Debenham (2013) continues with a list of formats for an online style guide, which can be collaborated to make the pattern library. Two of which she recommends mostly are the Style Prototype model, and the Pattern Primer model.
Style Type
Loyd (2012) describes the Style Prototype model as being a single HTML page outlining the components such as buttons, colours, font-types and other features used in the project. Debenham (2013) supports the Style Prototype model for its ability to work cross-device, and testing it on a range of browsers demonstrates its ability to keep the styles consistent.
Pattern Primer
Alternatively; the Pattern Primer model shows page components as they appear on the webpage; with the code for HTML and CSS visible in the columns beside it. This makes it easier to copy-paste the code from the webpage to the text-editor.
Pattern Primer model
Having investigated both models, it may be a good idea to combine both the Style Type and Pattern Primer for this project. This would make the Pattern Library mobile friendly, enable device testing, and display all project components while keeping them consistent.
To develop the Pattern Library, the following tools will be considered:
Foundation 6 Framework
As stated on Zurb (2016); the developer of Foundation 6, this is a framework intended to help create instantaneous, mobile-first web content. As it has already been rendered in HTML5, CSS3 and JS, Foundation 6 is completely semantic, readable and easy to customise for use on any project.
This may prove useful for organising the layout of the Pattern Library, as it could use columns to display the markup code, while displaying a demonstration of the components.
Use of SASS
As informed by the official SASS webpage (2016), SASS is an anagram for Syntactically Awesome Style Sheets, which is an extension of CSS. Using SASS improves stylisation by using variables, nested rules and mixins.
SASS uses said variables, nested rules and mixins to keep the code for the styles from repeating itself unnecessarily, which can sometimes happen in CSS.
Codepen
One way to create a Pattern Library would be to use the Codepen (2017) site. This is a front-end development platform, enabling users to create web material and present their work as raw HTML, CSS and JS code in three separate rows.
The code can be easily copy pasted for use on an original project, but the best part of Codepen (2017) is it provides a preview of the site generated by the code it displays.
Codepen (2017) projects; also known as “pens”, can be embedded into a web project. This makes the pen viewable from anywhere. With Codepen (2017) being supportive of SASS, LESS, markdown, and other syntax preprocessors; this would help with the copy-pasting, and possible updating of the Pattern Library.
GitHub
Like Codepen (2017), GitHub (2017) is a development platform, but more for sharing web material. Based on personal experience, web projects are uploaded to the server via the GitHub desktop app, and viewed
Cost of work
According to expertmarket.co.uk (2017), the cost of the work will depend entirely on the experience of the developer, the time rate in which the project is expected to be completed by, whether the client is being charged by the page or by the hour, and the addition of tax.
According to Gov.com (2017), self-employed pay £2.85 a week in National Insurance if they fall into the Class 2 band, and there will be no tax to pay as this project would be a short-term contract agreement. However, self-employed are encouraged to charge a minimum of 5% tax.
Expertmarket.co.uk (2017) suggests junior developers; who are starting off in the industry charge no less than £20.00 per hour, while older, more experienced developers charge no less than £50.00 per hour.
As this is a 65 hour project, the cost of the project has been calculated in the following table, and based on the scenario of a self-employed junior developer.
Total Hours: 65
Cost(£20,00 per hour): £1300.00
National Insurance (£2.85 per week): £36.12
Tax (5%): £65.00
Total Cost: £1401.12
Methods
The following chart depicts the time management of this project over a period of 65 hours.
Specification
Based on the research conducted for this post; and as stated in the project handbook, the Pattern Library will be developed according to the following guidelines:
1. Follows structure according to low fidelity and high fidelity concepts
2. Code is structured in HTML5, CSS3 and JS
3. Code is semantic
4. Pattern Library has the following components:
4.1 Navigation
4.2 Header
4.3 Six button types
4.4 Jumbotron
4.5 Footer
4.6 Other (choice)
5. Validates correctly on w3 Validation services
6. Report is published on Medium.com
Test Plan
The plan to test this Pattern Library would be to develop it as close to the high fidelity concept as possible, publish it on GitHub and create a survey to ask questions about how usable the model was, and to request feedback. The survey will be distributed to various social media outlets such as Facebook and Twitter.
Comments such as positive feedback, constructive criticism and recommendations for improvement will be recorded and implemented for future reference.
Design
The Pattern Library started with a template created by a University lecturer. It was not meant to be followed literally, but to provide ideas of how the Pattern Library might be developed.
While this method was very basic, it did provide HTML code to work with, and all the required components for the task were already created. As another project was being prioritised at the time of this assignment, the decision was made to utilise this template to save time. All it then required was SCSS to give the components their appearance.
Planning
Having decided to follow the template provided on GitHub, a plan was illustrated to represent what may be the final appearance of the Pattern Library.
The sketch on graph paper shows how the layout was mapped out. By using the grids already present on the paper, it helped to determine the width of the rows, how many were required for each component, and how much content was necessary to fill each row.
This plan shows the majority of the content in one whole column spanning much of the width of the screen, and each component has been separated into various rows to keep the content organised. The navbar is placed at the very top, containing links which are intended to scroll down to the corresponding component when clicked on.
There is also a button to return the User to the top of the page instantly without having to scroll through the long lines of code. Satisfied with this concept, it was re-created in Adobe Photoshop to create a high fidelity representation.
Recreating the concept in Photoshop helped to generate a closer representation of what the final Pattern Library might look like. The header; where the title and navigation menu are placed, takes up the entire width of the screen. It uses a bluish purple colour to make it stand out immediately, and uses white text so it can be read on darker backgrounds.
The same colour has been selected for use on the white background. This will be good for consistency; and presenting the components, which have been separated into equally wide rows with a clear gutter. This makes use of the proposed grid system.
For the navigation menu and code displays, a darker purple has been used to show importance. Satisfied with this concept, designs for the components were developed with Codepen and the Notepad++ program.
Experimentation
The following screen captures show each component in development before being finalised for the Pattern Library.
Navbar
The navbar uses a design that has been used in several projects previously. It is a User Friendly navbar that uses jQuery to adapt for use on mobile phones. To see how it was made, follow the link below for the video tutorial by Codecourse (2014)
The difference between the navbar shown in the Codecourse (2014) video and the navbar used in this project, is that the CSS was changed to SCSS in order to work properly. Using Codepen to test it helped make this important change happen.
Click here to view the Codepen.
Header
The header was very straightforward to make. It is normally put outside the grid, which helps it to reach the full width of the screen. All it required was a SCSS mixin to obtain its colour code.
Click here to view the Codepen.
- Buttons
Inspired by the Foundation 6 (2015) framework; creating the buttons was a straightforward task, as it was discovered that SCSS enabled the other buttons to recycle the bodywork of the default button, but use a mixin to change colours to suit their purposes.
Click here to view the Codepen
Jumbotron
There was some confusion about what the Jumbotron was; and what it was for at first, having never used one before. Due to time shortage, it was decided to make the Jumbotron based on the description on Bootstrap (n,d).
It succeeded in using the rounded edges, but owing to an oversight, missed the Call-To-Action button which would have made the Jumbotron more purposeful.
Click here to view the Codepen
Footer
The sticky footer took some time to make as it was discovered some sticky footers must be a fixed height. Unless it was known how much content was going in the footer, it would have required more code to adapt so the footer responded to screen sizes better. Walton (2015) showed how the footer could be made with a flexible height and minimise the amount of code.
Click here to view the Codepen
Grid
The Grid system was based off a demonstration by w3schools (n,d). It is probably outdated, but it proved useful for making the Pattern Library responsive.
Click here to view the Codepen
Implementation
Having experimented with Codepen, one idea was to embed the pens into the Pattern Library. However; it made the Pattern Library look too busy and awkward to use, and so research was undertaken to display the code used to create the components.
FreeFormMatter (n,d) shows how to “escape” the HTML by replacing “<” and “>” with “<” and “>”. This will allow the “Less than/More than” symbols to show on the HTML document.
The end result is a display of HTML5 code along side SCSS code ready to be copy-pasted for use on various projects. These were placed beneath each component to show how they were made.
Conclusion
In conclusion, the following feedback on the Pattern Library was recorded:
“It does the job indeed”
“Good layout, easy to navigate around”
“layout is overwhelming”
“Padding needs improving”
This suggests there is too much activity for a single webpage. One suggestion was to put the components on separate pages so the User knows “Exactly what they are looking at”. Another was to include more padding around the code so that it does not touch the edges of the columns they are placed in
Overall, creating the Pattern Library has shown to provide more control over the components, making the process of designing websites an easier and quicker task. Although frameworks like Foundation or Bootstrap are available for free, they are more complicated to learn as the inner workings of their coding can be hard to decipher.
Word Count:2143
References
ALISTAPART.COM, 2015. A Pattern Apart [viewed 01 May 2017]. Available from: http://patterns.alistapart.com/
BOAG, P., 2013. How and why to create a pattern library [viewed 10 March 2017]. Available from: https://boagworld.com/design/pattern-library/
BOOTSTRAP, Components [viewed 15 May 2017]. Available from: https://v4-alpha.getbootstrap.com/components/jumbotron/
CATLYN, H.E.A., 2015. Sass Basics [viewed 25 April 2017]. Available from: http://sass-lang.com/guide
Responsive Web Design: Navigation, 2014 Directed by Codecourse. UK: YouTubeFebruary 18,
DEBENHAM, A., 2013. Front End Style Guides
. Penarth, UK: Five Simple Stages
EXPERTMARKET.CO.UK, 2017. How Much Do Freelance Web Designers Charge in 2017?[viewed 10 May 2017]. Available from: How Much Do Freelance Web Designers Charge in 2017?
FREEFORMATTER.COM, HTML Escape / Unescape [viewed 10 May 2017]. Available from: https://www.freeformatter.com/html-escape.html
GOV.UK, 2017.
Self-employed National Insurance rates
[viewed 05 May 2017]. Available from: Self-employed National Insurance rates
LOYD, J., 2012. Our New Responsive Design Deliverable: The Style Prototype [viewed 03 March 2017]. Available from: https://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype
OWOH, B., 11 Common Web Design Mistakes (Blunders) [viewed 15 March 2017]. Available from: 11 Common Web Design Mistakes (Blunders)
STARBUCKS, 2014. Style Guide
[viewed 15 April 2017]. Available from: https://www.starbucks.com/static/reference/styleguide/
W3SCHOOLS.COM, W3.CSS Responsive Fluid Grid [viewed 10 May 2017]. Available from: https://www.w3schools.com/w3css/w3css_grid.asp
WALTON, P., 2015. Sticky Footer [viewed 03 May 2017]. Available from: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
ZURB, 2016. Responsive design gets a whole lot faster Available from: http://foundation.zurb.com/
Bibliography
Atomic Design
. 2016. Pittsburgh, Pennslyvania: Brad Frost
BOAG, P., 2017. Call to Action: The 10 Most Effective Techniques [viewed 25 April 2017]. Available from: https://boagworld.com/design/call-to-action/
COLLINSON, P., 2017. Self-employed? See if you’ll pay more in national insurance [viewed 10 May 2017]. Available from: https://www.theguardian.com/money/2017/mar/11/self-employed-pay-more-national-insurance
COYIER, C., 2017. Smooth Scrolling [viewed 13 May 2017]. Available from: https://css-tricks.com/snippets/jquery/smooth-scrolling/
How to Style Your Code Snippets 2013. [viewed 01 May 2017]. Available from: http://curiositalabs.com/2013/03/how-to-style-your-code-snippets/
PATE, A., 2016. Get Started with Pattern Libraries
. Process Magazine, , 94–95
TOSCANO, J., 2015. The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketch [viewed 05 February 2017]. Available from: The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketch
W3SCHOOLS.COM, CSS Buttons [viewed 03 March 2017]. Available from: https://www.w3schools.com/css/css3_buttons.asp
