"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:
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.
We're using the grid from the rather excellent Bootstrap 3 grid system (including breakpoints). More information here:
Wiggle Orange should be used sparingly. It is
Wiggle Grey for titles and areas that need very clear contrast.
Wiggle White is
Light Grey can sometimes be used to separate areas, such as wells or some forms, but not for text on a white background.
Text Grey for body text.
Link Blue for links.
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 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.
Form fields should have an outline and a slight inner shadow, to show the user that they need to add something inside.
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.
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.
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 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".
Secondary buttons are Wiggle Grey. They are used for other key links in the user interface.
Links are blue and underlined, hiding their underline on hover. This is a recognisable format for links to all ages.
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:
Order 6214068486 has been placed. We will be processing your order shortly.
Please bring your helmet to event registration.
It looks like we are out of stock on this item.
We need your first name to complete the sign up process.
Some guidance on using modal windows:
Please contact our Brand Design Team for detailed advice on creating and using lifestyle, portrait and product photography.
Icons should be used that help the user. We use a config file with the Fontello library of icons.
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.
As a minimum, each feature must meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.0.
Colours used on the Wiggle website must be compliant in contrast. A quick way to check contrast is to use a colour contrast checker.
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.
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.
Test the website feature with users regularly with usability testing. This keeps the feedback loop going.
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.