An independent archive of typography.
Topics
Formats
Typefaces

BiteSize Learning rebrand

Contributed by Guy Parsons on Oct 3rd, 2023. Artwork published in
May 2023
.
These 'record covers' for each training course are designed to encourage organisations to build a 'playlist' of the training courses their employees need.
Source: bitesizelearning.co.uk Photo: Guy Parsons. License: All Rights Reserved.

These 'record covers' for each training course are designed to encourage organisations to build a 'playlist' of the training courses their employees need.

In 2023, we were asked to create a new visual brand for training company BiteSize Learning, to replace the existing materials that were heavily built around ‘default’ document settings such as black, white and the Calibri typeface.

In particular, as the company ramped up its digital marketing, we wanted to create a more distinctive look and feel that would be recognizable across the website, social media, advertising and client communications, while corresponding to their internal training course materials.

For the new typography we selected two contrasting fonts: Fraunces by Undercase Type for display and headlines, and Overpass by Delve Fonts for body copy.

Fraunces is a juicy font full of personality. She’s available in a range of weights, optical sizes, and levels of softnesses and “wonk”. We use it throughout the identity in the Extra Bold weight, and set in the small optical size (even when displayed at a large size), with medium softness, no wonk. Generally, we tighten up the leading and the tracking so the characters and lines are almost (but not quite!) touching. This evokes the core purpose of BiteSize Learning, which is all about training teams to collaborate closely together, without crashing into one another.

We also created a new wordmark logo set in Fraunces, combining the Extra Bold and Light weights, with italicised i’s to give it a sense of forward momentum.

Overpass is an extremely legible body font, based on the US Highways sign alphabet. As a lot of the company’s training takes place remotely over Zoom, we wanted something that could remain readable in PowerPoint even when video quality is low, so a font designed to be read at night while travelling at 80mph seemed like a good fit. We use Overpass in its most vanilla form (Regular weight without any adjustment to spacing or line height.)

Other design elements include:

🥛 Employing off-white and off-black tones (oatmilk and midnight) instead of pure black and white, to create a softer look for simple documents and slides

🌈 A rainbow palette of seven key hues in three different tints, which correspond to the seven key training categories (e.g: management training content uses blue, while training in wellbeing uses coral)

🖼️ Using duotone treatments (based around the brand palette) to make stock photography a little less ‘stock photography-ish’

🟢 Using outline icons and circles as waypoint markers throughout training attendees’ learning journey

One learning point: Fraunces is a variable font, and we found different platforms (e.g: Canva, Photoshop, Pitch, PowerPoint, Squarespace) handle the various possible font files differently, allowing different settings take precedence. Decoding these differing default treatments and controlling the end result to ensure a consistent appearance took some extra work.

With over 70 training courses on offer, there were over 1,500 PowerPoint slides to redesign.
Source: bitesizelearning.co.uk Photo: Guy Parsons. License: All Rights Reserved.

With over 70 training courses on offer, there were over 1,500 PowerPoint slides to redesign.

Each course has a hero banner, duotoned in their category colour – for example the project management training course is in lagoon / sea-green, as it's part of the effectiveness category.
Source: bitesizelearning.co.uk License: All Rights Reserved.

Each course has a hero banner, duotoned in their category colour – for example the project management training course is in lagoon / sea-green, as it's part of the effectiveness category.

We also moved the website from Wordpress to Squarespace, to make it easier for everyone to manage, maintain and expand.
Source: bitesizelearning.co.uk License: All Rights Reserved.

We also moved the website from Wordpress to Squarespace, to make it easier for everyone to manage, maintain and expand.

BiteSize Learning rebrand 5
Source: bitesizelearning.co.uk License: All Rights Reserved.
We created hundreds of templates for training course materials, to represent a wide variety of different concepts, models, exercises and frameworks.
Source: bitesizelearning.co.uk License: All Rights Reserved.

We created hundreds of templates for training course materials, to represent a wide variety of different concepts, models, exercises and frameworks.

BiteSize Learning rebrand 7
Source: bitesizelearning.co.uk Photo: Guy Parsons. License: All Rights Reserved.
BiteSize Learning rebrand 8
Source: bitesizelearning.co.uk License: All Rights Reserved.
BiteSize Learning rebrand 9
Source: bitesizelearning.co.uk License: All Rights Reserved.

Post a comment