https://medium.com/@andrewkerry140/andykerry140-github-io-41339fb3fb8c
Introduction
Pattern libraries which is similar to style guides are an important way of expressing a collection of user interface design patterns. There are many pattern libraries available to view which provide detailed content of each element a webpage includes. This includes elements within a webpage such as, Navigation, Carousels, Typography’s, Tables & many more features. Many companies have an issue to ensure their website is consistent & eye catching as well as easy to maintain. Turning to a pattern library can clear any confusion & ignite life into your website. The main advantages of using a pattern library include consistency in user experience, reusability & finally maintainable. Many large organizations have a pattern library to view such as Starbucks & Yahoo!
A pattern library will be created to express the necessary elements needed to create a webpage. This webpage created can inspire designers on what elements to consider. The pattern library will be created with inspiration from research resources. This includes the best approach for creating a pattern library and what considerations should be made. The pattern library includes the minimum 6 production components with further components implemented. HTML5 & CSS3 has been used to structure & style the pattern library. The code has been fully validated via W3C Validation Services.
https://boagworld.com/design/pattern-library/
Project Aim
The aim of this project is to create a pattern library which is modern and consistent which ultimately provide use to designers looking to design & implement a webpage. The pattern library must be created by justification of research sources which provide an understanding on the best approach and considerations needed to build a pattern library. Furthermore this includes finding the best practices for the production and presentation of the pattern library.
Research
Overview
An interactive pattern is a reusable solution to an issue than is likely to occur in UX and interaction design. A pattern is reliable because it has worked multiple times over and over again. Some of the best UX and interaction designers around the world use pattern libraries to bring usable and tested methods to their project. Libraries can be built to include all the pattern designs into one webpage.
Common pattern categories:
Ø Navigation, Menus, Hamburgers, footers, paginations & tags
Ø Selection, Use of buttons, checklists and toggles
Ø Messaging & notifications
Ø Social media integrations
Ø Search, sorting & filtering
http://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/
A number of advantages can be drawn up for creating a pattern library. Firstly putting the patterns being implemented in a library allows a single point of reference. This means one single webpage can display all the different patterns in one area. Furthermore Pattern libraries provide a consistent use of patterns & UI elements as well as providing guidance on how to use the patterns. Finally the patterns implemented encourage the re-use of code which reduces redundancy. There is no need to re-invent the wheel.
https://www.futurelearn.com/pattern-library/
A library can be accessed and added to very easily into one central repository. This eliminates confusion and the information is therefore accessible to all users. A library can help in many areas including evolution. An eye catching pattern can help your website evolve. If you need to make a change to one element it is updated across the whole platform. This can refine the user experience. A pattern library can provide consistency throughout. If you create a brand that is consistently to a high standard this is critical in creating a strong brand. The use of a pattern library can provide efficiency to designers. A library can give all the information a designer needs to quickly build complexed structure & design fluency. Furthermore is encourages more prototyping designs which can inspire other designers. A pattern library created can give a wider audience an understanding of the products primary elements. This gives the user an overview on how the product is created.
https://www.symantec.com/connect/blogs/importance-pattern-libraries-designers
Examples of patterns that can be included in a library. Each pattern library created is down to preference, personal designs & opinions.
There are several pattern libraries that are available online that provide excellent resources. They are very popular amongst designers due to ease of use and the standard of content online.
Patterntap.com provides a wide variety of excellent designs for a mobile, tablet or desktop view. The website provides fantastic user experience due to the large icons which are clear and eye catching as well as a search bar to navigate quickly around the webpage. The search function is particular good as it has various criteria options such as style, type, colour & device type. For example there are many options under style types such as, animation, colourful, content & graphics. This is good because the user can search for specifics rather than just a general search.
On the other hand pttrns.com is another pattern library but only focuses mostly of mobile screen outputs. This pattern library is fantastic for mobile first designers as there are many patterns which suit a mobile structure. The website is categorized by the use of commenting, notifications & sign up screens. The websites search function is easy to use which includes searching for a specific area simple. Furthermore you can search for different platforms such as IOS & Android. Many categories are available down the left pane of the website. There are many to choose from such as editing, checkout & event.
Frameworks
Bootstrap
Many frameworks are available to use to create a pattern library. The most popular frameworks are Bootstrap & Foundation. Bootstrap is available to the user to download from www.getbootstrap.com. Bootstrap framework has HTML, CSS & JavaScript combined to develop responsive mobile first webpages for the web. Bootstrap makes front end development fast and easy. One framework can be used for every device this includes a mobile, tablet & desktop output. Bootstrap also comes with an array of features to implement. Bootstrap is a framework which can be used to implement a pattern library due to the technologies available. Elements can be added or removed easily using this framework. Bootstrap includes mobile first fluid grid systems that scale up to 12 columns on any device which is perfect for designing the structure for a pattern library.
http://stackoverflow.com/questions/14546709/what-is-bootstrap
Foundation
Foundation framework similar to bootstrap provides a responsive grid template to use as well as HTML and CSS templates. Foundation can be used to create a webpage for any purpose. The functions it includes is various typography’s, forms, navigation & different sized buttons. Other JavaScript & JQuery extensions are available. Foundation is a mobile fist framework which is built with Sass & SCSS. Using Sass & SCSS gives designers best practices for quick & reliable development. Foundation is open source & provide through ZURB. Furthermore it is available through Github.
In the modern era of developing it is normal for developers to use frameworks. The old saying why reinvent the wheel? HTML elements styled are designed with mobile first in mind so it’s perfect for building a webpage in one place which works on multiple device outputs. A mobile grid feature is also available to the user to provide flexibility to tailor your project to your taste.
Skeleton
Skeleton is a framework which is simple and clean. It provides responsive HTML templates & CSS boilerplates. This framework has no fancy features just the basics to get the user up and running. The features Skeleton include is a responsive grid layout and standard media queries for multiple device types. Furthermore Skeleton includes CSS classes for image elements which will scale in a grid layout. Skeleton is ideal for users looking to start smaller projects. It offers all the functions you need such as typography’s, buttons, navigation, listing & tables. Skeleton is easy and fast for the user to download to start on a project. Furthermore Skeleton is available to access through Github.
Research Summary
A summary can be drawn from the research conducted. This included an overview of what is a pattern library, the contents of a pattern library and the benefits. Below states the main points gathered from the research.
Ø A pattern library is a library created by designers with tried and tested patterns such as navigation & footer
Ø This can improve user experience
Ø Users worldwide use various pattern libraries to inspire design.
Ø Pattern libraries can include, icons, forms, tables, buttons and many more designs.
Ø Frameworks which can be used to implement include Bootstrap, Foundation & Skeleton and many more.
Methodology
Many methodologies was considered when choosing the correct one which was suitable to manage and maintain the project. Each methodology has its own unique structure & reasoning. The project needed a clear and organized path to ensure each section was implemented to a high standard & on time. The methodologies investigated was the Waterfall model, PRINCE2 & finally Agile. Each methodology had their advantages & disadvantages. After careful consideration the Waterfall model was chosen for the project. The model is suitable for small projects due to the approach is broken down into manageable sections which is simple to follow. A breakdown of 65 hours covered the project life cycle. A Gantt chart was created to show the project breakdown of each element with the number of hours needed to complete.
Specification
The specification will include features & functions implemented for the pattern library created. The website was created using a HTML5 template which allowed the implementation of the patterns. CSS3 styling was used to style each element added to the library. The pattern library is responsive on all device platforms so the user can view the website on a mobile, tablet & desktop device.
Features & Functions
Ø Simplistic & clear navigation
Ø Responsive on all device types.
Ø Hamburger menu
Ø Search function
Ø A range of 6 button types
Ø Jumbotron
Ø Footer with social media links
Ø Text types such as bold fonts
Ø Headings with subtitles
Ø Icons
Ø Various List types
Ø Actions
Ø Table
Ø Form which provides name, email and catergory.
Ø Image sizing examples
Ø Preformatted
Test Plan
The pattern library created will need to be tested to ensure the code implemented is validated to current standards. The code was tested using W3C validation services. Furthermore the webpage was tested on all device outputs. This includes a desktop, tablet & mobile devices.
The above devices will be tested with the following current browsers on the market:
Desktop & Laptop device with the following browsers:
Ø Google Chrome
Ø Mozilla Firefox
Ø Internet Explorer
IPhone 6 smartphone with the following browsers:
Ø Safari
Ø Google Chrome
Ø Mozilla Firefox
Planning
Lo & mid fi wireframes was created to aid in the planning of the pattern library. This mainly included the structure & the content of the webpage. Lo fi wireframes was sketched to deliver the layout on multiple device outputs. This also included the mid fi wireframes which delivered the same expectation. Wireframes is a fantastic method of planning the structure & layout of a webpage. Wireframes includes all the necessary elements such as the header, navigation, body & footer.
Lo Fidelity Desktop
Lo Fidelity Mobile
Mid Fidelity Desktop
Mid Fidelity Mobile
Experimentation
Cloud 9 was tool experimented with at the start of the project. Cloud 9 is an online software which allows the user to create websites. Cloud 9 supports more than 40 coding languages which allows the user to edit to specification. However the software did not work correctly when trying to install foundation into cloud 9. This was due to configuration errors which arose when trying to start the project. The NPM would not install correctly after multiple times re trying. This triggered to choosing another tool to build the pattern library.
Design & Implementation
The pattern library was designed through the use of the wireframes created to follow the structure and layout designed. The pattern library implemented through the use of HTML5 and CSS3. The text editor Atom was used to design and implement the code needed to build the pattern library, this included the minimum 6 components as well as extra components. Snippets of code was added to the pattern library to aid the user in examples used to implement specific elements. JavaScript & JQuery plugins was used to assist the navigation of the website to allow the website to be responsive on multiple devices.
Testing
Desktop Google Chrome
Desktop Mozilla Firefox
Desktop Internet Explorer
Mobile Safari
Mobile Google Chrome
Mobile Mozilla Firefox
Conclusion
Overall each section was managed to a high standard in the time frame allocated. The methodology suited the project and enabled for each section to be broken down into manageable areas. A Gantt chart aided the planning and to keep on track of the project. Analysis on various pattern library’s inspired the content that can be found on the finish product. The pattern library produced is to a high standard and excels the minimum criteria in place. Furthermore this included the aim of the project which was achieved. The pattern library provides a modern and professional finish with all the necessary elements with a few extras to provide more information to the user. Furthermore the pattern library is full responsive which can be viewed on multiple device outputs.
The criteria for the project has been achieved:
ü Navigation Bar
ü Header Element
ü A range of six button types
ü Jumbotron
ü Footer possibly incorporating social media icon links etc.
ü 6 Component of your choice
User feedback was gained from the use of a form distributed to gain an insight into their opinion of the finished product. Overall the user feedback was positive with majority of users giving positive feedback. 10 respondents was the total amount of users that participated. Please see results below.
User feedback results
