Course Identity Guidelines

When considering a course’s identity, it should be broken down into three main elements.

  1. Course title
  2. Course imagery, representative of course visual style and theme.
  3. Course badge, based on course categorisation

In addition to the title the course imagery is considered the primary means through which we should convey the visual style and theme of a course. The course badge is a secondary element which asserts the categorisation and general topic group.

Course title

The course title should always be presented in a heading style using sentence case. The course title should appear in black or white (depending upon context) and should never be stylised. Course titles may vary slightly based on context, for example on the public website they may be adjusted for SEO purposes.

Course imagery

Beyond the course title the single image used to represent the course provides an opportunity to convey the visual style and theme of a course. Stock imagery should not be used to represent a course.

Diversity between course imagery is encouraged. Images should be composed of a still from within the course itself which is largely representative of the course content (if possible).

Care should be taken to avoid the use of course imagery with large areas of solid/flat colour. The ideal imagery would feature a variety of colour, shade and depth which provides good contrast with any overlaid text.

Contrast

Bad contrast
Good contrast

Course badge

Course badges represent both the course type and also the broad course subject category. Badges are secondary to the primary identify which is composed of the title and course imagery.

Each badge is composed of either a triangle or circle with those shapes representing “Health & Safety” or “HR Compliance” accordingly.

Badges should be monochrome only and use simple flat iconography within to represent the board course subject category. Badges should be appropriately legible for, at the smallest, 30px by 30px presentation at 72dpi.

Safe area

When creating iconography for use within a badge you should observe a 70% safe area for the circular motif and 85% safe area for the triangular motif. The larger safe area for the triangle compensates for the space limitations of the shape in comparison with a circle.

Subject category badges

The current list of courses along with their course category can be found here.

Putting it all together

Above are a few examples of how all three elements will be used across several elements of the site and product. The course library blocks, far left, show how all three of the main elements could be presented together.

The general use case for course identity will be where a course is presented on the website for promotional purposes or within the application itself in the context of a title screen or course completion certificate.

There are no hard and fast rules on how these three components should be assembled together but you should observe the hierarchy of the identity scheme in a visual sense. I.e. the course badge should not have visual dominance over the course imagery or course title.