Web design for industry

Pattern Library

Introduction

This report documents the process of creating a pattern library for a responsive NYC tourist website. Pattern libraries have become an important tool of web designers and developers. Pattern libraries mainly began with small companies such as Twitter, which created the now popular library, bootstrap. Such libraries began as in house libraries that designers can refer to keep the design of the website consistent. (Bootstrap n.d)

They are many advantages to using a pattern library. The designer Schwarz (2017) summaries that the main advantage is that pattern libraries provide consistency and act as a reference point for designers. The latter point also means that a pattern library can speed up development time as front end developer don’t need to reinvent the wheel or figure out how to create recreate certain interfaces. Matthew Bull (2015) adds that the consistency that pattern library provides also make developer more flexible. Meaning that having a set rules on designs ensures designers and developers to grow the site in case of a scenario where the site needs to expand quickly due to increased traffic.

Aim:

Create a responsive pattern library for website

Objectives

Research and investigate within a time frame of 20 hours on what goes into making a good pattern library, as well find out what the best practises are

Create a low fidelity wireframes for the pattern libraries basing it on the research done on the above objectives. Experiment with different platforms for the pattern library to determine which seems like the best tool for creating the site/library. Aim to get this done within 10 hours.

Given 25 hours, build pattern library using whatever tool is decided via the research phase of pattern library.

Test website by ensuring code is valid and all functions of the library works correctly. Next, gather feedback on site to improve the function and design of the library. Complete this within 10 hours.

Research and Analysis

Atomic design theory

Many pattern libraries employ the atomic methodology. The methodology uses chemistry concepts to metaphorically divide the design system into stages. The stages are divided into atoms, molecules, organisms, templates and pages. (Frost 2013) The atom represents the basic building blocks. In the web development this is describing html elements such as forms labels and buttons. Next you have molecules which are groups on atoms. This is now adding more meaning to html components where forms labels and buttons, can become a web form. The next stage are organism, this is to provide a broader context for molecules. In the case of a pattern library, a header can act as a organism housing different molecules, which in this case could be a form, a search field, a logo, amongst many other things. This provides important context for the components or single html elements. (Adiseshiah, 2016)

Figure 1: Demo of patter lab library

Several sites have implemented this with their pattern library. On the pattern lab site itself, a good demonstration is shown. The figure below shows the evolution of the form and its elements. Its starts off with basic form elements, then with other section such as molecules and organism the form elements are show with other elements. Once the user gets to the template and pages, the full context of the page can be seen. The template shows a standard form and the page shows the form on an actual website page.

Context based library

An interesting observation by Friedman (n.d.) is that pattern libraries should emphasise context more. The argument is that too many pattern libraries focus on the core components. This, he believes, leads to the issue where designers miss the bigger picture. The designs are too open to interpretations, where designers may have difficulty in understanding the context some components can be used in. This the issue, freedman argues, happens when all that is provided is an overview on different components. The solution instead then, is to provide a list of interface to see the components in a number of different contexts.

Figure 2: Example of a context based pattern library. The user can browse different pages.

To illustrate how this would work. A pattern library would allow the user to select an application, such as an enterprise site. The user would then have the choice of choosing a feature, then the component they are interested in. On this page would be the Photoshop mockup of the application with the feature selected. Accompanied by a live code for components. (Friedman n.d)

Semantics of a pattern library

Interaction designer Bruning (2014) believes that functional names for components are usually better than names that indicate design. For example, a blue submit button shouldn’t simply be called “the blue button”. It’s far more useful to indicate the function of the button itself. Not everyone agrees with this assessment however, Friedman (n.d.) argues that functional names are not precise. The argument is that the function of certain components may change over time, deeming the functional name given less useful. He instead advocates names based on metaphors, which he believes makes it easier to remember names of different components in library. Although he concedes such a system may not be work for more complex interfaces. Functional names can be precise however if they are given more thought. For example, the Kholomatova (2015) of Future Lean identified the issue of functional names not always being precise, and decided that name should match the higher level function of the component and what context it is usually in. Most importantly the name should be agreed upon by the team.

Figure 3

Sorensen (2016) at Sum logic suggested the following when it came to creating a well-designed pattern library: As has already mentioned, the library needs to be precise. More specifically, the components being created should specific to the purpose of the website. Secondly, the site should be easy to update.

Methodology

The method used to create the website would broadly follow the waterfall methodology. This means process of building the pattern would be broken down into four stages.

Figure 4: Gantt chart

Research/gathering requirements

During this phrase all the requirements for the pattern library will be find out. This includes finding out what goes into creating a pattern library, what the best techniques and practices are and what best platforms are available to create the pattern library.

Planning

The design of the pattern library was created using low fidelity sketches. A few sketches were drawn out to get some ideas down very quickly. Once all ideas have been explored, the best design is chosen to be developed further in implementation.

Implementation

Implementation was the second longest phase of the project. At the end of the research phase it was decided that the site will done via creating a website. The reason behind this is explored further in experimentation section. The code used was standard HTML5 and CSS, with some J-query used to create the tabs. This was all completed in the time frame of roughly 20–25 hours.

Testing

The website was tested using HTML5 validation. This was ensure the code was semantic and compiled to current standards. Once the code was validated, the functions of the site were checked. This included ensuring all links are active and that tabs were working. The last stage was to get feedback on the website itself. This was done by disturbing to several web designer and design critique communities. More of this can be seen in the appendix (b). Additional feedback was gained via surveys from survey monkey. This was to get an idea on what users thought of functionalities. The survey used can be also be seen in appendix (b).

Specification

The site must come with six components:

Buttons

This page should consist of several button in different stages and sizes. The former could include hover state or disabled state.

Headers

This page could include the different size headers.

Navigation

Must show navigation of the site. Also show the navigation under mobile screen. Users may be prompted to demonstrate this effect by resizing their browsers. A sport section code area would be shown to display responsive code.

Jumbo Tron

Footer

Display foot code. This would be under molecules.

Forms

This would display different forms elements.

Page layout

Each of the above page should come with a code example and some context, which in this case means a real world example of how the code can be implemented on the site. The code section would be divided into several section depending on the page. This would include html and css.

Website should be responsive on mobile screen, tablet screen and desktop. This includes the layout of the page, the navigations and any images displayed.

Documentation and planning

Several sketches were drawn out to produce some design ideas for the pattern library. The sketches are show below:

Figure 5
Figure 6

HTML

The site was created using HTML5 and CSS. The site was a bit of foundation to helm layout the code. This help create a neat layout where the user has the menu on one side and the content on the other side.

The html code was created first to layout the library. This done by placing each component in its own div and given it an id. The ID can later be used a reference point for the tabs. The tabs themselves were created using an organised list tag

J-query

J-query was used to make the tabs work. The code worked by first hiding all the tabs contends using the hide method. An exception is made for the first tab content by showing the first tab content with the show method. This line was added below the hide method. Next, the click function is created. A new ‘rel’ is added to the selected list attribute using the ‘attr’ method. Lastly, an active class was added onto the currently selected tab using the addClass method. This can then be used with CSS to customise the element with the active class. The active class is removed from the first previous selected item using the removeCSS method.

Figure 7

The code block was used using two tags. The first tag used was the pre tag for CSS. The HTML tag are seen as markup to the browser so they had to be escaped. This can be seen in figure.

Figure 8

Conclusion

Overall the creation of the pattern library was a success. This was based on the feedback on the website. As mention in the methodology section, some feedback was sought after when the library was completed. The feedback showed at first that the site was in need of some design changes. This included aligning the text properly and giving the site more white space at the top. These were implemented and further feedback was obtained, this time via surveys. The surveys showed that site was easy to use, and only a few minor correction were necessary. In the future, more work will likely be done to correct to ensure better colours are used and more interesting design in implemented.

The pattern library seems to also follow the specification(appendix C), having all the function working correctly. The code of pattern library has been validated, thus compelling to current standards(Appendix C). With all this competed, the project and all objectives have been completed successfully.

References

ADISESHIAH, G., EMILY, 2016. Wireframing tools and atomic design: User experience from the bottom up [viewed 02/05 2017]. Available from: https://www.justinmind.com/blog/wireframing-tool-and-atomic-design-user-experience-from-the-bottom-up/

BOOSTRAP, History [viewed 20/04 2017]. Available from: https://getbootstrap.com/about/

BRUNING, W., 2014. How to build a perfect pattern library [viewed 24/04 2017]. Available from: https://www.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

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

FRIEDMAN, V., [viewed 20/04 2017]. Available from: https://www.smashingmagazine.com/taking-pattern-libraries-next-level/

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

KHOLMATOVA, A., 2015. The language of modular design [viewed 28/04 2017]. Available from: https://alistapart.com/article/language-of-modular-design

SCHWARZ, D., 2017. Here’s Why You Need to Know About Pattern Libraries [viewed 12/04 2017]. Available from: https://sympli.io/blog/2017/01/11/heres-why-you-need-to-know-about-pattern-libraries/

SORENSON, R., 2016. Creating a Pattern Library [viewed 11/04 2017]. Available from: https://medium.com/sumo-logic-ux/creating-a-pattern-library-18cce0f901b4

Bibliography

https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/

http://www.browserlondon.com/blog/2017/04/atomic-design-in-practice-does-it-work/

https://www.linkedin.com/pulse/uxui-atomic-design-using-sketch-future-product-daniel-sempertegui

http://www.ermlikeyeah.com/the-usefulness-of-design-patterns/

Appendix A

Appendix B

Early feedback

Appendix C

Mobile testing

Library on I Phone six screen size.

Tablet screen size
One clap, two clap, three clap, forty?

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