Pattern Library

For any article or information page, we use a flexible general page content type. It was created to be accessible, readable and warm as well as responsive to users on changing viewports of various devices.

Primary page content

These guiding principles - accessibility, readability and warmth - are the core of our ever evolving UX design system.

Layout: clarity by purpose

Structurally, a general page includes the main article area, the insets which highlight all prompts for action (CTAs), and all supporting or related information when needed. All these parts exist underneath the hero heading title. Visually grouping elements with similar purpose in these three key areas (main article, CTAs and additional information) will ease comprehension and contribute to readability.

Desktop users

As of November 2018, the majority of our users visit gold.ac.uk with a screen resolution between 1920x1080px (large desktop) and 1280x800px (small desktop). In this light, for desktop users we’ll use a 1278px space with 12 columns to place the main areas of our page. Each column is 88px wide, with a gutter of 20px to allow spacing of elements.

This 12 column grid is to include the main body text, sometimes referred to as the main article, which spans six columns, with the other four columns occupied by the additional information.

Main article

The main article area spans six columns on desktop and can be enriched by a variety of slices. The insets for calls to action (CTAs) can also be added, depending on the type of action. The area for these insets is shown here in white fill:

Supporting and related content

All related and supporting content is positioned inside a white box on the right hand side of the main article area, spanning four columns on desktop. We don’t envision the use of images in this area, as only additional information is to be placed here to aid users in their journey and increase connection of pages to access relevant information. However, there’s flexibility to include multiple boxes and insets for calls to action, when these refer to additional information and are not part of the main idea of the body text that we are aiming to communicate.

Mobile users

As of November 2018, the range of screen resolutions in our users’ mobile devices varies between 414x736px (largest phone) and 375x667px (smallest phone). For mobile users with screen resolutions up to 842px we follow a four column approach to guide positioning and alignment of elements.

Tablet users

The most common tablet device of our users has 768x1024px resolution, as of November 2018. When viewed in landscape orientation users will see a 12 column space (desktop), whereas with portrait orientation, users will have a four column space (mobile) to interact with.

Colour palette: main colours and secondary colours

The main article’s background colour is set to 10% tint of our brand grey as #F6F7F7 and the main body text font uses #333333. With a contrast ratio of 11.771 these colours will make for optimal accessibility at AAA. The related content background is set to plain white, with main links as #333333, and emphasis text as #666666. This sets a contrast ratio for the links at 12.634 (AAA) and the emphasis text at 5.741 (AA). However as our emphasis text is 21px, we keep AAA grade of accessibility.

Brand grey, main colours and secondary colours

Our main colours convey our personality by focusing on accessibility, readability and warmth. The yellow is used punctually, to infuse the page with energy and especially to accompany the iconography associated with calls to action. Our two secondary colours have been identified to maintain AAA accessibility rating, to increase clarity in communicating when a link is available to our visitors but also contribute to overall warmth: when hovered, links turn dark red, the warmest colour in the spectrum.

Typography: fonts, fonts, fonts

Graphik is the selected font for headings whereas Publico is used for the body copy. As serif, Publico brings additional warmth to the tone of the main writing.

The longest line width spreads to a maximum of 74 characters per line (including spaces), which is under the recommended 80 character limit for AAA accessibility. The leading or CSS line-height is 25px for fonts in the main article and 20px in related content boxes.

We will also introduce two new CSS properties and values, for more warmth and readability. Accordingly, these are:

 		
 
 -moz-osx-font-smoothing: grayscale; 
-webkit-font-smoothing: antialiased; 
text-rendering: optimizeLegibility;

Lastly, a baseline of 5px is in use throughout the website to position elements in all viewports, for vertical rhythm and most importantly to establish leading to increase reading comfort.

Emphasis text

This is the first part of the article, introducing the aim of the page. It is displayed as h2 because it is 21px Graphik, but the font’s colour is #666666, so that it feels like an introductory paragraph, instead of the beginning of a section.

Links

Body font and Publico in general will be signified as hyperlinked by the blue colour #00568F. When we need to hyperlink areas with Graphik, the same darker blue colour will be in use. When users hover over the hyperlink, colour blue changes to red, for added warmth. In this way we contribute to clarity of communication (blue is the standard conventional colour to signify hyperlink) and overall warmth (red is visible when users hover over the hyperlink). The colour contrast has been selected to maintain a AAA accessibility level.

Highlighting text with main content

We can highlight text with a yellow accent on the side, if there’s something that needs to be flagged but doesn’t necessarily include a major call to action (CTA).

Bullet points

These are practically unstyled, so that we don’t add any extraneous information or decoration. On the main body text, both first level and second level bullet points are signalled with the same grey dot symbol. This grey dot symbol is the default style to display a first level bulleted point list with Publico typeface, and carries through to the following levels, without change. Example:

A signed grant agreement
A travel insurance policy - the cost of this can be included in your application
A letter/formal email from the host organisation confirming your offer
An agreement with your host organisation outlining roles and responsibilities

We may have rare cases, potentially inside Governance area, where we will see the need for nested bullet point lists. The nested elements will follow the parent style in all forms. Example:

A signed grant agreement
A travel insurance policy - the cost of this can be included in your application
A letter/formal email from the host organisation confirming your offer:

A signed grant agreement
A travel insurance policy – the cost of this can be included in your application

An agreement with your host organisation outlining roles and responsibilities

In cases where the font in use is Graphik, such as headings and such, the bullet points are signalled by a square.

Quotes

These are highlighted phrases, which on our website take the form of framed words, quite literally. Text in sans serif Graphik is framed by an ascending diagonal of yellow corners.

Headings

We use a range of tags which change proportionally to their hierarchical standing (i.e. h3 is a sub-section of h2). As such we have three levels of headings h2, h3 and h4 to visually aid with the logical structing of the text. These flow incrementally, in size and spacing around them. For example: