Dating and the Pointer

You might have been with someone for a while and the two of you might share the same interests and care about each other, but you might have one issue. You might have an issue that your partner…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

A Professional Approach to Designing a Pattern Library.

The background of this project is to understand what components are needed to create a pattern library and the considerations needed when building a pattern library. There can be a number of factors that a programmer, designer or developer may need to understand when designing a pattern library. For example;

· What is the best approach to create a pattern library from scratch?

· What conventions and structuring should be considered for a pattern library?

· How would documentation be used to support the pattern library and how should this be presented to the user?

· What testing methods can be used when going through the design and production process of the pattern library?

The aim of this project is to create a pattern library of six elements of which can be reusable for other users and projects/websites.

What is a pattern library and why would it be so important?

Pattern libraries are documentation with helpful and reusable elements which help in the creation of websites that is easier to maintain. A pattern library is mostly thought of as every single element broken up into sections which has been used in a particular website, for example the UI elements, grid system, various other components that help in the visualization of the website etc.

Most pattern libraries allow other users to take components and reuse them to their own content. A pattern library focuses on reusable examples and components of a website, typically UI elements in which other users/organisations and businesses can reuse again in their own websites.

Pattern libraries are important because it enables someone to understand the various elements that have been built in order to make a website. These elements stand as further documentation and typically splits the website into categories and separate elements to make the overall website easier to understand.

Current best practices and considerations –

When designing a pattern library it is important to consider the following in terms of best practice;

Make the library adaptable:

In terms of my pattern library there was a few problems with the navigation bar as the pages displayed were messy. It was suggested through feedback that I should change the navigation bar to be more adaptable. This has been achieved by implementing a drop-down menu for all the pattern library components thus making it adaptable as this would mean more components could be added in the future if required through the drop-down menu within the navigation bar.

Make it contextual:

Giving contextual documentation to support your pattern library examples is good practice to follow as it will tell the user about the particular component in question. In terms of my pattern library, I have ensured that documentation has been included to give my examples a general contextual background.

Make it maintainable:

Making a pattern library maintainable ensures if the pattern library needs updating, changes can be made easily and with less problems. I have ensured my pattern library is maintainable by giving a simple structure to the pages and providing sections in which text is clearly presented. More sections can easily be added if needed.

Make it approachable:

This best practice is also considered high value as it will aim to attract users to use your pattern library. In my pattern library, I have achieved this by giving my pattern library web pages a modern design and structure.

Design principles to follow –

A great pattern library would be one that is susceptible and enforced by a set of working design principles. Here are some design principles which should be used when creating your own pattern library;

Specific:

A specific design would be one where it could be easily classified. In most of my components from my pattern library, each component is specific in its designs and overall purpose and are all different from one and another.

Simplicity:

Simplicity ensures the design is not too clustered and messy. My pattern library has been created using as much simplicity and structure as possible. There is a structural order in which elements on the page are displayed.

Unique:

Being unique, ensures that the pattern library has its own style and design which is different from other designs. I have ensured that my pattern library is unique by creating my own design and overall theme colors of grey and orange.

Pattern library examples –

Here are a few examples of pattern libraries;

Bootstrap is influential in terms of website design. Bootstrap is very coordinated in giving their own examples and code snippets for their designs and approach.

The Android pattern library is more suited for mobile applications. Their pattern library is very precise with great documentation and visual examples.

The pattern library created by brad frost is very simplistic. It mainly talks about providing responsive patterns and components for any website. A simple structure has been used with links to examples and good use of documentation.

In terms of influence and approach, when creating my pattern library, I was more influenced with the Bootstrap pattern library because of its overall structure when presenting their components and documentation. In addition, the android pattern library was interesting based on how navigation was used to explore the pages in the pattern library; Android uses a left-hand navigation bar to provide good structure and simplicity.

In my initial design a left-hand navigation bar was going to be used in my pattern library as influenced by the Android pattern library but due to some changes that needed to be incorporated, my pattern library looks more like the Bootstrap pattern library in terms of influence and design.

The design process method that this project would follow is the waterfall method. The Waterfall methodology is widely used because of the structure it maintains. Each phase or stage of a project would need to be completed before proceeding forward. However the constraints of using the Waterfall method is any design processes made after the design phase has been complete will not be accountable.

The advantage however is the structure of completing each stage and effectively moving forward only when the initial stage has been agreed and completed to its full standard.

Below a number of tests have been recorded in table format for both technical and user testing…

1. My pattern library must be designed with overall 6 components. (Navigation bar, Header element, 6 button types, Jumbotron, Footer and a component of own choice)

2. Ensure that the pattern library is tested to make sure it works and component examples are displayed accordingly.

3. Ensure Pattern Library code is validated through W3C Validation Services.

4. Browser testing should be checked to ensure pattern library work on both Internet Explorer and Google Chrome.

5. Documentation should be included with design components and code examples/snippets.

Planning:

One of the most important approaches with the management of design processes is initial planning. Initial wireframing can be an excellent approach as it helps illustrate to the viewer the overall layout of the design and what aspects are included in the design. For this Pattern Library, I have created hand drawn wireframes and medium fidelity wireframes for the homepage and for a particular component page.

Low Fidelity Wireframes (Homepage and component page):

Medium Fidelity wireframes (Homepage and component page):

Design and experimentation:

The final design has been decided from the medium fidelity wireframes. It will consist of a homepage and separate components pages for the pattern library components. Each component has documentation and a working example which opens in a new page. Since this Pattern Library has been done as separate web pages instead of 1 page with all components, it is unique in the approach of presentation.

The main navigation bar was created to cover all the components but through feedback, it was suggested to have two main categories; home and a drop down for the six component pages. It would be the best approach to do it this way as this would make it more adaptable for the future in case more components might be added to extend the pattern library.

Original Navigation Bar before initial feedback

Considering initial feedback, the current Navigation Bar of the pattern library

With experimentation of designing the components, it was decided that I use an editor called Notepad++ to hand code each of my components. Each component uses semantic HTML 5 and appropriate CSS styling.

Component Design:

1. Navigation bar

2. Carousel — (Automatic)

Carousel is automatic. The 3 images presented in this screenshot are in order of appearance

3. Buttons

4. Jumbotron

5. Footer

6. Breadcrumb

Implementation:

The Pattern Library and all the individual components have been hand coded using Notepad++, as a result a fully working website with individual HTML pages has been constructed. Pages show documentation for each component, and working component examples can be accessed using a link which directs the user to a separate page, in addition code snippets in both HTML and CSS are shown on the page.

In conclusion the Pattern Library has been an overall success with a only a few minor errors. According to the testing process listed, the tests have been a success for both the technical and user testing. In terms of user feedback, everything in the Pattern Library has been up to expectations however one of the changes that had to be made was the main navigation of the Pattern Library; it has been addressed that the navigation should be changed to a drop down menu to make the sorting of pages clearer and less messy.

In addition, it has also been stated that if working examples could be shown on the same page, it would make it consistent but unfortunately most of the working examples could not achieve this outcome, however most of the examples can be accessed via a link to a separate page.

There has been a few other problems with adding in code snippets as well. As the pattern library has been created as standard HTML pages with CSS from Notepad++, adding in code snippets has been a challenge. However this problem was half solved using the <xmp> tag which enables code snippets to be displayed as text.

Technical side — Browser testing

Google Chrome