Pattern Library

This is our interactive collection of designs and layouts, patterns, slices and components on gold.ac.uk with the view to making these available. It is a living document and keeps changing, accordingly.

Browse

1. Pattern Library: introduction

Information about how, why and when the Pattern Library came about.

2. Pattern Library: principles

Overview of the three principles that guide the Pattern Library.

3. Pattern Library: guidelines

The principles 'in action' with implications for design in terms of layout, colour and typography.

4. Pattern Library: patterns showcase

Catalogue of elements and components that can be used across our web site.

5. Pattern Library: UX Design testing for accessibility, readability and warmth

Information about multiple rounds of testing.

6. Pattern Library: previous research

Five personas that informed the web transformation project.

7. Pattern Library: design specs

Technical specifications available via Adobe XD project link and Zeplin (both require user account login).

Primary page content

1. Pattern Library: introduction

The Pattern Library started from a brief to look at existing gold.ac.uk 'general pages'. These 'general pages' include a broad family of web pages ranging from a departmental page about research, to an accommodation page about heating, or a library page about special collections or even (with some minor variations) a news story. In summary, a 'general page' is our most used and versatile template, fulfilling a myriad of different purposes:

Why changing?

gold.ac.uk was relaunched in October 2015, during the web transformation project. We achieved a few accolades: HEIST awards 2016 - winner Best Higher Education Website 2016 (#1); BIMA (British Interactive Media Association) - shortlisted in two categories: Education and Web Design & Build; DADI (Drum Awards for the Digital Industries) - shortlisted in one category: UX / Usability.

However these are no reasons to keep still as the landscape around us keeps changing; three years in digital terms is a long time. Mainly, the pattern library work is to directly contribute to improving students' experience and will affect how people outside Goldsmiths access information about us - whether they're a prospective student, a journalist, or a member of the public looking to attend an event.

The pattern library project started in October 2018 on the back of the general page brief, with first changes launched in July 2019, to give an idea of timescale.

Go up to browse

2. Pattern Library: principles

Accessibility, readability and warmth have been the core focus of all our improvements. Everything you will see here was created with these three principles in mind. If you think of something in relation to these, please let me know.

Accessibility

It’s about removing barriers and being inclusive. It can be achieved in a number of ways such as by including alternative text in images for screen readers, allowing font and content to be adjusted by visitors themselves (using relative units instead of pixels), paying attention to colour contrast, structuring web pages with correct semantics, and so on and so forth... [aside: WCGA 2.1]

Readability

It’s the degree to which prose can be understood, based on the complexity of words and sentences. Complex information requires the simplest presentation possible, so that the focus of readers is on the information rather than the way it is presented. Readability is greatly affected by visual clarity of text (legibility) with things such as size, typeface, contrast, spacing of characters and line width playing an important role. [aside: People read on the web in different ways either to scan for something particular, to focus in engaged reading, or in some form of casual reading.]

Warmth

We know when we feel warm.

Go up to browse

3. Pattern Library: guidelines

Here we will see the principles 'in action' if you like or, the implications for design in terms of layout, colour and typography. We tried, as much as possible to base our proposals on research and evidence.

Accessibility, readability and warmth