Pattern Library
https://medium.com/@0albaz23/pattern-library-e4a0c18aa8b8
Introduction
Background
When creating a website it is critical to follow a pattern, ensuring that everything on the website looks the same. Whether that affects the buttons, text, forms, images and even the navigation bar. If the website follows a pattern then it sticks to a uniform meaning that there is no complications with style or mistaken identity. A pattern library is exactly that, it is designed to help give an overview of exactly what style is taken onto account within the websites with fonts and colours being the most vital of this. Every major website whether Google, Amazon or EBay they will have all at one point made a pattern library to guide users and employees alike to what was included in making their websites unique.
The pattern library is to be created as a demand for specific elements is needed for a designer to create a specific web page. A pattern library is similar to a style guide in a sense that it helps guide the user through the process of design trends on a website.
Project Aim
The aim of this is to create a pattern library which showcases at least 6 different components, ranging from buttons, navigation bar, footer and many more. It is about inciting a style that is unique and will be a template for designers to use.
· Create a pattern library.
· Use a minimum of six different components.
· Use creative colours and typography.
· Set those colours to specific areas to show importance.
· Follow new and up and coming design trends.
Creating the pattern library will be helpful to understand exactly what needs to go into a website and how to attract an audience with that. Colours are a significant mechanism in which to attract an audience to a website. Having engaging colours will only boost the chances of success and having the pattern library set out what colours are used for specific places will be important.
Research
Pattern libraries are the broken-down components of the website, they benefit anyone looking to create a website that will adopt a similar style. As with pattern libraries they can be made with several different styles and websites in mind. Ultimately choosing something which is customisable can be the biggest help towards creating an interesting and dynamic pattern library.
https://boagworld.com/design/pattern-library/
A pattern library follows UX trends and focuses more on the interaction side of things rather than just the aesthetics of it all. Trudging back through past designs can help with inspiration towards creating a viable and interactive pattern library. This can only mean that when a user accesses it, it will be engaging. For example, Apple focus on creating a pattern library that explains each aspect of app design and text choices. Whilst it may not be engaging that is just one of the ways in which you can create a pattern library. Showing the code that created a certain button or the navigation bar can help developers understand what exactly was needed to create the necessary function.
http://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/
Creating the pattern library will depend on exactly what methodology is carried out, this will help determine how the development process of the pattern library. As a pattern library is a way to represent everything that makes up a website it is important to show the vital aspects of what makes a functional website.
https://www.webdesignerdepot.com/2016/12/why-you-should-be-using-pattern-libraries/
Pattern Library vs. Style Guides
This where confusion seems to get in the way with a lot of designers believing that these two processes are exactly the same. Whilst they share similarities ultimately, they are both different. This is judged by the fact that a website needs both a style guide and a pattern library not one or the other. Style guides apply the aesthetic side of the website whilst pattern libraries focus on the structure of the website and how it will function. If any components exist on the pattern library that means they exist on the website. Fig.1 shows the combination of both a pattern library and a style guide. Having a pattern library will help design further in the future as each component will have place instead of designing a one-off website, it will have a structure which makes the website feel more comfortable.
https://www.webdesignerdepot.com/2016/12/why-you-should-be-using-pattern-libraries/
Pattern libraries complement how a website ends up, essentially a pattern library is there to create a better user experience. UX and user centred needs can be built through a streamline pattern library.
Frameworks
Bootstrap
https://www.devsaran.com/blog/10-best-reasons-use-bootstrap-amazing-web-designs
Looking into different ways to create a pattern library and one that catches the eye is Bootstrap. Bootstrap has emerged as one of the most popular front-end frameworks on the internet. Because of this it is easy to see why it is a front runner to create responsive, mobile first frameworks. It is easy to use with adaptable CSS and LESS or SASS. Not only is it easy to use but it offers responsive building. Because the use of mobiles grows larger every year it is virtually a requirement now to create a responsive website, it is in fact vital to include responsiveness.
Foundation
http://www.zingdesign.com/top-10-reasons-to-use-zurbs-foundation-framework/
Foundation is another front-end framework that utilises SASS. In terms of developing it offers a wide range of customisability with its use of the in-browser coder this is useful for creating smaller projects that can be done fairly quickly and be viewed with relative ease. It could be useful for something concerning a pattern library because of its customisability. As with Bootstrap, Foundation is completely responsive, allowing any unique content to be responsive whether it is a tablet, mobile or even a small monitor. It is also built to create true mobile first.
Semantic UI
https://coderwall.com/p/ham3gg/move-over-bootstrap-and-foundation-welcome-semantic-ui
Semantic UI offers an incredible amount of features for the user, ones that are exclusive to the front-end developer. These features include 3D transformations, element dimmers and many more. Semantic UI has the potential to overthrow the biggest competition with the likes of foundation and bootstrap. With its easy to learn interface and smooth running and use of grid layouts it will become a force within the front-end frameworks.
Methodology
http://www.seguetech.com/waterfall-vs-agile-methodology/
A methodology is important to gain the best outcome for the pattern library. Various methodologies were looked at such as agile and waterfall. They both offer positives and negatives, ultimately it was waterfall that was chosen because of the way work is completed when using a waterfall methodology. To list a few positives of the waterfall methodology:
Waterfall Pros:
· Progress is easily measured.
· Design is agree upon early on.
· Planning is a lot easier.
· Works in phases.
Each phase will be completed one at a time as that is how the waterfall methodology works. Because of the linearity of the project it will help complete all phases without too much trouble. A Gant chart will be created to show the progress of the pattern library, all of the phases will be completed one after the other.
Specification
This section will focus on design needs, and what features and functions are to be included in the pattern library. For the pattern library to be successful it needs to include at a minimum 6 different components. The design needs are as follows:
· Navigation Bar.
· Header Element.
· A range of six button types.
· Jumbotron,
· A footer, with social media links.
· And a component of choice, which is a login pop-up.
These needs will be met through the use of the waterfall methodology giving enough time for each phase to be completed. They need to fit an overall theme of a website and that it has a stable colour scheme that runs throughout all of the features. Because the elements of a pattern library are repeated throughout the website it is important that all features and functions are cohesive and replicate the first one built to the last one used.
Test Plan
A test plan will be put in place to test certain browsers. These browsers include:
· Google Chrome
The reason for just testing it on Google Chrome is because it is a GitHub readme file so there is no justification to test it on all various types of browsers because it is not a standalone website.
This test plan will set out to see whether or not the pattern library is accessible within all the browsers stated. It is important to test whether it works on them to ensure it reaches a further audience.
There will user testing as well with a feedback form created on Google Surveys. This will help gain a better understanding of what is appreciated within the pattern library and maybe give some feedback as to what changes may be necessary to make it better.
Design, Planning, Experimentation & Implementation
Github was used to create the pattern library, with the use of readme file. The reason for choosing GitHub over the other frameworks was the accessibility of GitHub and how easy it was to create a pattern library that looks clean and professional. Creation of the pattern library did indeed start using Foundation with Cloud 9 but with lots of errors occurring during that process it was necessary to change for the best of the pattern library and the outcome of it. Intricate planning is needed to get the best outcome from the pattern library, understanding each aspect of design is important from the navigation bar to the buttons.
Planning
The planning was conducted by creating various wireframes of what the pattern library should look like in the end. Whilst not aesthetically pleasing it is supposed to follow a format in which it is easy for a user to understand where certain things belong within the website. A low-fidelity wireframe will be drawn to give a rough idea of what the pattern library will look like. After the low-fi, medium-fidelity will be created this shows the progress of the idea and what it will pretty much look like when it is finished completely.
The design process started with rough ideas as to what the outcome of the pattern library should look like. Once ideas have progressed they become more solid and the end product will have been built from the ground up. Had there been no design plan and the pattern library were to be constructed without an idea it may cause it to lack consistency.
Experimentation
For this section it was important to test different approaches of building the pattern library. Ultimately it was built in GitHub using a ReadMe file. But at the beginning of the planning and build of the pattern library Foundation and Cloud 9 was the first choice because of its ease of use and brilliant responsive design. But on the way to creating a new workspace to build the website there were a lot of errors that caused problems when trying to create on Cloud 9. Error messages regarding syntax and commands not found although being inputted correctly, it made for tumultuous experience to create a pattern library.
Construction
Images below show the construction and finished product of the pattern library. Created using GitHub’s ReadMe file. Because CSS isn’t read in GitHub read me files, to show the finished product images were used, with the code below it showing how it was accomplished.
Conclusion
There were a few problems during the process of creating the pattern library. With the biggest problem being Cloud 9 issues, after much trial and error trying to ensure that it is fixed it ultimately didn’t happen and the next best option was creating a pattern library using the GitHub repository. GitHub is a brilliant online tool, which allows its users to create and manipulate code. With as many collaborators as the user would like. Creating the pattern library on GitHub did have its problems with it not being able to read CSS so needing to add images of the components to show the finished product added to the problems but in the grand scheme of things it wasn’t that much of a problem.
There was also a feedback survey regarding the pattern library asking the opinions of people to see what was seen as a positive and maybe what was seen as a negative. There were 6 responses from the survey about the pattern library and how it would inspire new designers. Overall it was an enjoyable experience learning about pattern libraries and why they are necessary to create as a starting block for any website.
