Admin Pattern Library
Introduction

As the FutureLearn platform grows and evolves, it’s important that the design patterns and visual style are upheld to deliver a defined and cohesive experience. In order to achieve this, we need to have a single point of reference for all the patterns we use, so that everyone internally can refer to them. We also need a shared vocabulary of UI elements and code, to allow teams to communicate with each other in the most efficient way.

We created this pattern library with several goals in mind:

  • to document the patterns we use, using the agreed shared vocabulary
  • to ensure a consistent use of patterns and UI elements
  • to provide guidance on correct usage of the patterns
  • to encourage re-use of code, reducing redundancy to a minimum

The library directly reflects the FutureLearn platform and uses the same underlying CSS and markup to display the elements and rules that make up the interface. It is a “living document” and should be updated when the code underlying the feature changes or when a new pattern is introduced.

Methodology

We use part of the atomic design methodology to construct and classify UI elements and patterns.

Icon atom Atoms Icon molecule Molecules

‘Atoms’ are the smallest building blocks of the interface, such as buttons or inputs.

‘Molecules’ are small groups of elements that function together as a unit, for example button groups.

We use the term 'Core Patterns' to include more abstract elements like colour palettes, typography, and interactive states.

Thanks

The inspiration for this document is lifted from the amazing Mailchimp pattern library , which we are infinitely grateful for. We also would like to thank Brad Frost for the atomic design methodology and Ian Feather for the idea of the template implementation.