Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare…andykerry140.github.io
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.
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.
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
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.
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.
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.
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.
For many web folk, developing a project from scratch every time is part of the job; it's often tricky to build up a…webdesign.tutsplus.com
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.
Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Developmentgithub.com
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.
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.
Software Testing Tutorials. What is Waterfall model and list its advantages, disadvantages What is Waterfall Model …jobsandnewstoday.blogspot.co.uk
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
Ø Footer with social media links
Ø Text types such as bold fonts
Ø Headings with subtitles
Ø Various List types
Ø Form which provides name, email and catergory.
Ø Image sizing examples
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:
Ø Google Chrome
Ø Mozilla Firefox
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
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
Desktop Google Chrome
Desktop Mozilla Firefox
Desktop Internet Explorer
Mobile Google Chrome
Mobile Mozilla Firefox
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
ü 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.