AE2 — Pattern Library

SWD600 — Web Design for Industry

Word Count: 2199

Oliver King | BSc (Hons) Applied Computing (Top-up) | 19 May 2017

The O.K. Sites Pattern Library can be found at Github Pages

Abstract

The outline of this project is to document the development of a pattern library for use by an inexperienced web designer looking to build up a portfolio of work.

Opening with an introduction into how pattern libraries have enabled designers improved development methods, the report will then look to convey this project’s aims and objectives. With the premise of the report established, the methodology used to facilitate the project will be discussed, indicating how each phase was managed.

In order to provide the reader with an understanding of how the project’s aims will be met, a specification and test plan will be drawn up, detailing how the finished pattern library will be validated to ensure it is fit for purpose.

Before this report concludes with a discussion on what the project has managed to achieve and the library’s future, a full disclosure on how the project was designed and implemented will take place, analysing all processes throughout the project’s life-cycle.

1. Introduction

Design techniques have undergone radical transformation since the web was first introduced to the masses in 1991. With the continued development of languages such as HTML and CSS, webpages have gone from read-only noticeboards to the media rich experiences enjoyed today.

Growing at the same rate as the technology however, are the methods practiced by designers. One method that forms the basis of this report is the growing use of pattern libraries, enabling users to efficiently develop websites from a single collection of design components.

Applying code from a single source allows a great deal of efficiency through the recycling of components, however one of their greatest strengths lies within the consistency they offer. By applying the same component styles throughout an interface, not only is the opportunity to create a feel of familiarity afforded, but the performance of such components is equal throughout. This was backed up by James Reeve, claiming “pattern libraries containing both design and code are undoubtedly the only way to deliver a consistent experience for users across devices”.

With this in mind, the idea of creating a new pattern library, entitled the O.K. Sites Pattern Library was generated. This would be created for, and by, a web designer with new to the field. Not only would the above benefits hope to be achieved, but the learning experience of building unique components could be greatly beneficial in gaining a deeper understanding of languages such as HTML and CSS.

2. Aims and Objectives

The primary aims of this project are to develop a new pattern library that allows the designer a convenient method of creating new websites and to provide a learning platform into the application of languages such as HTML and CSS.

In order to achieve this aim, the following objectives have been established:

· Undertake enough research to gain a full understanding on pattern libraries and their best practice.

· Create a detailed Gantt chart to assist in keeping the project on track.

· Design a variation of elements to be implemented as the libraries initial set of components.

· Develop a simplistic pattern library that scales well to both desktop and mobile devices.

· Fully test the final library internally and externally.

3. Research

Whilst studying, it became quickly apparent that a huge variety of independent designers and organisations are turning to the benefits of pattern libraries. Ranging from small lightweight libraries such as Astrum to the libraries created exclusively for corporate websites such as the BBC’s GEL, it seems that a pattern library exists for any project.

With regards to the best practice to use however, it could be argued one doesn’t exist. Despite being hard to argue against the positives that pattern libraries convey, deciding on a ‘best practice’ is ultimately something that is unique to each designer and the project at hand, with Anna Debenham stating that “the technique you choose depends very much on the project and the client”.

Before deciding on creating a library from scratch, the example portal Styleguides was visited to identify a potential framework. The decision not to use an existing library was made to gain a better understanding of web technologies, as being further involved in the creation of each component would provide better exposure to the language.

Despite this decision, further research was applied to develop a better understanding of the common mechanisms applied. After learning that modularity was one of the fundamental design principles alongside comprehensive documentation , the necessary ideals had been obtained to start the project.

4. Methodology

So that this project was able to stay on track throughout its complete life, a Gantt chart was created during the opening chapters of the project.

Figure 1: An overview of the entire project.

As evidenced in figure 1, the project consisted of 94 hours of work within the following five phases: Research, Design, Development, Testing and Report Writing.

With the exception of Research (which ran throughout the entire project) the project’s phases indicate the application of a waterfall style methodology. The incorporation of methods commonly associated with an agile methodology meant that a bespoke methodology was instead put to use.

Figure 2: Looking further into the development phase.

This was most evident during development phase, where most of the tasks in were undertaken in concurrently. Although each of the components were initially created one after the other, adjustments were made to each until the library was complete. This was largely to ensure each component remained functional and mobile responsive while other changes were being made.

5. Specification

To ensure the project meets its aims and objectives, the following specification has been agreed.

The O.K. Sites pattern library must feature a simplistic design, ensuring the intended designer and future collaborators are able to quickly comprehend its structure.

The user must be able to easily extract the pattern libraries components with ease.

The HTML and CSS must feature a modular structure with sufficient commenting, providing the seamless addition of future components and the easy alteration of existing ones.

The pattern library and its subsequent components must be mobile responsive to ensure they work as intended across a wide range of devices.

The library must be tested for W3C validation and full browser support across both desktops and mobiles. An external tester must also verify the library works to a high standard.

6. Test Plan

Although not described in the specification, the first tests will derive from Google Chrome’s Inspect Element feature and will run concurrently with the libraries development.

Figure 3: Google Chrome’s Inspect Element.

This tool will ensure that the library can be viewed and temporarily edited directly in the browser. The resolution is also able to be switched to a variety of ratios, proving further ease in the simultaneous development of both mobile and desktop aspect ratios.

The first official round of testing will be to run the pattern library through W3C validation, ensuring the code behind the library is up to standard. Following this, extensive internal testing will take place by testing the new components in a separate environment, ensuring they work as intended.

The last stage will be to send the library for external testing with a view to gain feedback on its performance and design. Any issues overlooked during development or internal testing are more likely to be identified here and thus prevent the library from going into live use whilst unfit for purpose.

7. Design and Implementation

7.1 Design Documentation

With the O.K. Sites library being built from scratch, heavy inspiration towards its appearance was drawn from several existing libraries. This was most evident from Mail Chimp’s own pattern library, with its simplistic aesthetic providing an example of the projects own objectives.

Figure 4: The Mail Chimp pattern library design drew the most inspiration.

As seen in figure 4, their library features a single navigation panel to the left of the display and its subsequent elements in the centre, with very little distracting from the essential viewing.

Figure 5: The initial wire-frame, showing clear inspiration from Mail Chimp’s own pattern library.

Figure 5 demonstrates that the library’s early wire-frame models attempted to replicate this almost exactly. Due to a lack of superior CSS knowledge however, this transpired to be too greater challenge in the afforded time span and a further simplistic design was created. Figure 6 shows the scrolling nature of the redesign and the available patterns, including descriptions into how they should be applied and their HTML code.

Figure 6: The final wire-frame design, highlighting a simpler format.

Next was to detail what components would feature in the initial release, as well as their design. Knowing that the project would require a navigation bar, header, footer, jumbo-tron and six buttons, the decision was made to include a generic form, with Chapman and Chapman arguing their significance as “a vital component in interactive web applications”.

With regards to the buttons, the following, which could be perceived as the most common iterations, were chosen for the initial release: a home button, a clickable logo, a set of back, next and return to top (RTT) buttons and finally search and submit buttons.

Figure 7: The component template.

As seen in figure 7, a design template for each component was drawn up using Adobe’s Photoshop, with the exception of the footer and its social media icons created by Huseyin Cakır.

This template was forwarded to several volunteers to provide feedback on the designs, before they would be included in the actual product. As for the colour scheme, the background was chosen as it appeared relatively neutral, with the components being chosen based on Paletton’s colour wheel.

Figure 8: The returned feedback.

Figure 8 shows that the feedback that was returned was almost exclusively positive, with the exception of the back, next and RTT buttons. As such, these were the only changes made as seen in figure 9, where a border was incorporated alongside a further simplified design.

Figure 9: The redesigned buttons.

7.2 Development Documentation

Development began with a single HTML page acting as the library’s index. A modular structure was conceived from the outset as to satisfy the corresponding objective.

Figure 10: The HTML template for each component.

This is evidenced in figure 10, showing the template assembly for each component. Once implemented, it was able to be copied and adapted for the relevant component, resulting in fast, standardised additions, as well as simplified maintenance of existing ones.

To provide the user with the required CSS file and images that would support the library’s functionality, hyperlinks that were added to the page’s heading. Figure 11 shows that these would download both the CSS and a zipped folder of all the required images.

Figure 11: Hyperlinks allowing the download of the necessary folders and files.

As mentioned in the test plan, continuous testing would take place throughout this phase to ensure the components would respond to a variety of aspect ratios. This was achieved through the use of media queries as seen in figure 12, with the CSS of specific classes being adapted to suit a variety of devices.

Figure 12: A media query used to provide mobile responsiveness.

As evidenced in figures 13 and 14, this resulted in the library completing its objectives of working across multiple browsers and responding well to mobile devices.

Figure 13: The desktop view of the pattern library.
Figure 14: The mobile view of the pattern library.

One development had finished, the library’s HTML was able to achieve successful validation from W3C as seen in figure 15.

Figure 15: Successful W3C validation.

After further testing was completed by copying the components code from the library and into a separate page, the hosting Github address was forwarded to an external tester for review.

Using the links in the header, the tester managed to successfully install the correct CSS and image files before providing the feedback seen in figure 15.

Figure 16: The external tester providing positive feedback.

8. Conclusion

With testing complete, it could be argued that the O.K. Sites pattern library has achieved its primary aims of enabling a convenient way to build new sites and providing a successful learning platform for an inexperienced designer.

While the library itself is fully functional however there are in fact a number of improvements which will likely need to be made before it can be used to compete against the high standards of existing libraries.

One such improvement regards mobile responsiveness. Despite most of the components scaling as intended, items such as the jumbotron will need further refinement to meet the demands in quality expected of the libraries designer.

These issues highlight the ongoing development of a designer relatively new to the field. Although it could be said that much has been learnt throughout this experience, further study and exposure to similar scenarios will undoubtedly see the these issues corrected.

With regards to the projects future, it is likely to differ no more than most other development projects. Continuous improvements to both the design and functionality will be made as and when they are required in order to ensure that the library stays as relevant as possible. As for the designer’s future, further research and experimentation will be undertaken in order to continue learning the skills required to progress to a professional standard.

9. References

Agile Methodology, 2013. The Agile Movement [viewed 15 May 2017]. Available at: http://agilemethodology.org/.

Astrum, 2017. A lightweight pattern library for any project [viewed 14 May 2017]. Available at: http://astrum.nodividestudio.com/.

BBC, 2017. BBC GEL | Global Experience Language [viewed 14 May 2017]. Available at: http://www.bbc.co.uk/gel.

Boag, P., 2013. — How and why to create a pattern library [viewed 05 May 2017]. Available at: https://boagworld.com/design/pattern-library/.

Cakır, H. 2017. ‘Social Media | Hexagon’ by Hüseyin Çakır [viewed 30 April 2017]. Available at: https://www.iconfinder.com/iconsets/social-media-hexagon-1.

Chapman, N. and J. Chapman, 2006. Forms. In: Chapman, N. and J. Chapman, eds. Web Design: A Complete Introduction. Chichester: John Wiley & Sons Ltd, pp.127–136.

Debenham, A., 2013. Deciding which one to use. In: Gregory, O., ed. Front-end Style Guides. Penath: Five Simple Steps, pp.28–29.

Eng, E., 2013. The Importance of Pattern Libraries for Designers [viewed 15 May 2017]. Available at: https://www.symantec.com/connect/blogs/importance-pattern-libraries-designers.

Friedman, V. 2017. Taking the Pattern Library to the Next Level [viewed 13 May 2017]. Available at: https://www.smashingmagazine.com/taking-pattern-libraries-next-level/.

Frost, B., 2013. Atomic Design [viewed 22 April 2017]. Available at: http://bradfrost.com/blog/post/atomic-web-design/.

FutureLearn, 2017. Pattern library [viewed 23 April 2017]. Available at: https://www.futurelearn.com/pattern-library/.

Greiner, G., 2015. Using Pattern Libraries for Front-End Dev: Efficiency, Communication & Structure [viewed 16 May 2017]. Available at: https://www.thinkcompany.com/2015/02/using-pattern-libraries-for-front-end-dev-efficiency-communication-structure/.

iNurture, 2016. Evolution of Web Technologies and the Future [viewed 13 May 2017]. Available at: http://www.inurture.co.in/evolution-of-web-technologies-and-the-future/.

Kearney, M. and K. Basques, 2017. Inspect and Edit Pages and Styles [viewed 15 May 2017]. Available at: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/.

Mail Chimp, 2017. Grid System [viewed 14 May 2017]. Available at: http://ux.mailchimp.com/patterns/.

Marcotte, E., 2010. Responsive Web Design [viewed 15 May 2017]. Available at: https://alistapart.com/article/responsive-web-design.

Paletton, 2017. The Color Scheme Designer [viewed 17 May 2017]. Available at: http://paletton.com/#uid=33A0u0kcRt70RTz5YDUlzl+vefb.

Puri, M., 2012. Web Forms: Their Importance and How to improve them [viewed 15 May 2017]. Available at: http://blog.usabilla.com/web-forms-their-importance-and-how-to-improve-them/.

Reeve, J., 2015. Pattern libraries, the one true source [viewed 13 May 2017]. Available at: http://www.foolproof.co.uk/thinking/pattern-libraries-the-one-true-source/.

Sticka, T., 2016. Qualities of Successful Pattern Libraries [viewed 23 April 2017]. Available at: https://cloudfour.com/thinks/qualities-of-successful-pattern-libraries/.

Styleguides, 2017. Examples [viewed 14 May 2017]. Available at: http://styleguides.io/examples.html.

Telegraph, 2016. Waterfall Project Management Explained [viewed 15 May 2017]. Available at: https://courses.telegraph.co.uk/article-details/86/waterfall-project-management-explained/.

W3C, 2017. The W3C Markup Validation Service [viewed 18 May 2017]. Available at: https://validator.w3.org/.

World Wide Web Foundation, 2017. History of the Web [viewed 13 May 2017]. Available at: http://webfoundation.org/about/vision/history-of-the-web/.

10. Bibliography

Babich, N., 2016. Button UX Design: Best Practices, Types and States [viewed 15 May 2017]. Available at: https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6.

Bourn, J., 2014. How to Design a Website Header & What to put in a Website Header [viewed 20 April 2017]. Bourn Creative. Available at: http://www.bourncreative.com/how-to-design-a-website-header/.

Brody, M., 2015. The UX case against the home button [viewed 15 May 2017]. Available at: https://www.webdesignerdepot.com/2015/08/the-ux-case-against-the-home-button/.

Freebits, 2017. How to show HTML Code on web pages [viewed 26 April 2017]. Available at: http://www.freebits.co.uk/convert-html-code-to-text.html.

Mail Chimp, 2017. About the Pattern Library [viewed 05 May 2017]. Available at: http://ux.mailchimp.com/patterns/tables.

Raduta, B., 2015. 55 Awesome Website Headers for Your Inspiration [viewed 05 May 2017]. Available at: http://www.topdesignmag.com/55-awesome-website-headers-for-your-inspiration/.

Sticka, T., 2016. Qualities of Successful Pattern Libraries [viewed 23 April 2017]. Available at: https://cloudfour.com/thinks/qualities-of-successful-pattern-libraries/.

One clap, two clap, three clap, forty?

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