Pattern library

What is a pattern library?

"Recurring solutions that solve common design problems."

UI Patterns

Essentially a pattern library is a collection of design elements that appear multiple times across a site. Typical examples might include:

  • Forms
  • Navigation
  • Buttons
  • Text
  • Banners

A pattern library, documents all of these ‘patterns’ (also often known as modules) and defines how they behave, what they look like and how they are coded.

Design principles

  1. User needs come first
  2. We design for context, location and situation, not screen size alone
  3. Iterate designs over launching standalone projects
  4. Give all users the best experience possible regardless of limitations or disabilities
  5. Be consistent, not uniform
  6. Make things open: it makes things better

Grid system

We're using the grid from the rather excellent Bootstrap 3 grid system (including breakpoints). More information here:

Colours

Wiggle Orange

Wiggle Orange should be used sparingly. It is color: #ff920b.

Wiggle Grey

Wiggle Grey for titles and areas that need very clear contrast. color: #3C3C3B.

Wiggle White

Wiggle White is color: #ffffff.

Light Grey

Light Grey can sometimes be used to separate areas, such as wells or some forms, but not for text on a white background. color: #f7f7f7;

Text Grey

Text Grey for body text. color: #666666;

Link Blue

Link Blue for links. color: #3D5793;

Typography

The body font of the site is Arial, with Open Sans used sparingly on buttons and titles.

This guidance is currently being reviewed.

The logo should only be used once per page. The minimum recommended size is 45px wide.



Forms

Forms are a vital part of an eCommerce user interface, as we use forms to take users details, whether that be in the checkout, signing up for an account or to contact us.

  • Forms should be mobile-first in design and slightly over-sized
  • We should provide validation where appropriate e.g. taking credit card numbers, expiry dates and passwords (for strength).
  • Labels should usually be above fields, textboxes or select dropdowns. Exception would include e.g. a newsletter signup in a small wide space.
  • Forms fields, when focussed, should have an orange outline, to show to the user quickly which field they are currently completing.

Fields

Form fields should have an outline and a slight inner shadow, to show the user that they need to add something inside.

Dropdowns

Select dropdowns should be used when the user has to make a selection from a number of options e.g. Country or Size. Contents should be ordered in an intuitive way. The first option should tell the user what they need to do e.g. Select size.

Panels

We use panels to selectively show or hide options to the user. They usually have an input field included.

For panels that aren't required, we use a subtler treatment.

Buttons and links

We use these buttons in the user interface. Buttons should be rounded by 3px to clearly see that they are buttons and not form fields or other graphic design elements.

On smaller screens, such as mobile applications, buttons should be large enough for a finger to tap and often extend to the width of the screen. On larger screens, buttons can drop to an automatic width depending on the text within.

Choosing between a button and a link comes down to the visual hierarchy of the page and the customer journey we want a user to primarily make.

Primary button

Primary buttons are Wiggle Orange. Primary buttons should contrast with other elements on the page. With that in mind, there shouldn't be a lot of orange elsewhere. There should only be one primary button on a page and it should appear slightly larger than the rest to clearly show to the user "this is how to go to the next section".

Desktop

Mobile and Tablet

Secondary button

Secondary buttons are Wiggle Grey. They are used for other key links in the user interface.

Desktop

Mobile and Tablet

Links

Links are blue and underlined, hiding their underline on hover. This is a recognisable format for links to all ages.

Alerts

Alerts are used to inform the user of something important. You shouldn't show more than one alert style to the user at one time. We have four alert styles:

Thank you!
Order 6214068486 has been placed. We will be processing your order shortly.

Don't forget!
Please bring your helmet to event registration.

Oh no!
It looks like we are out of stock on this item.

We're sorry.
We need your first name to complete the sign up process.

Modal windows

Some guidance on using modal windows:

  • Use Overlays very sparingly - for important actions only
  • Ask yourself: can the information in the overlay be shown within the page instead?
  • Overlays should open due to a users action - for instance selecting a button (timeout the only exception to the rule)
  • When an overlay comes up make sure the page behind is darkened. Not too dark you can’t see the page or too light that they think the page is still active
  • Users should be allowed to click or tap outside the overlay to close it (unless the user has to confirm they will wish to do something drastic like delete their account)
  • But also include a close option on top right (and maybe elsewhere in the overlay)
  • Don’t try to cram in too much. If you are, maybe an overlay isn’t the best solution
  • If something has multiple steps it should have a page of its own rather than be an overlay Make sure important information is included in the overlay - if you are asking the user to confirm they want to delete something, the things to be deleted should show in the overlay
  • Avoid overlays on mobile. If you have to use it make sure it has close options at both the top and bottom to avoid too much scroll
  • Make sure they are accessible - for instance screen readers need to be able to see them

Images

Please contact our Brand Design Team for detailed advice on creating and using lifestyle, portrait and product photography.

Icons

Icons should be used that help the user. We use a config file with the Fontello library of icons.

icons

Inclusive design

The Wiggle website needs to be accessible and have a strong usability focus.

While we prepare our own guidance, the web community have provided a wealth of knowledge and research on designing for a desired accessibility and usability.

Accessibility standard

As a minimum, each feature must meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.0.

Contrast compliance

Colours used on the Wiggle website must be compliant in contrast. A quick way to check contrast is to use a colour contrast checker.

Accessibility review

You can use an automated tool to regularly test a features accessibility while it is being built and after it has been launched, for example on Wave.

Dyslexia, low-vision, autistic spectrum

The Government Digital Service in the UK have provided these handy guides to help designs build solutions with dyslexic, low-vision and for users on the autistic spectrum. They can be found on the Home Office Git Hub repository.

Usability practice

Test the website feature with users regularly with usability testing. This keeps the feedback loop going.

Screen readers

There are 285 million people in the world that have low-vision. Guidance on designing for screen readers can be found in the WebAIM website.