Creating an eLearning Style Guide

One of the first things to do when starting an eLearning project is to find out if a client has a corporate style guide or branding document. This document sets out the colours as well as their typeface styles and size, and the type of imagery or design elements they use in their marketing. The developer should then refer to it consistently to ensure that the visual design of the learning matches the corporate look and feel, and is easily recognised as being ‘theirs’. You can draw on this to make a client specific eLearning style guide.

Making an eLearning style guide for a client is relatively straight forward and provides you with a one page reference to ensure that you are ‘on brand’ with a client. This becomes invaluable as you start to design the visuals of your content. Let’s start with a PowerPoint template that we have made for this purpose:


It’s pretty straight forward. It has boxes that we will use to capture the client’s colours; a space for their logo; maybe a screen capture of their website for some inspiration; a place to record their corporate fonts, and some space to capture any other interesting assets we may fine.

1. Logos to Use in the eLearning Style Guide

Most organisations have a logo of some kind, you can usually locate it online, or the client will provide the files. For my example I’m going to pretend my client is the Ice Hockey team the Calgary Mustangs out of Canada (no real reason why I’ve chosen them. I’m not an avid ice hockey fan or all things Canadian, I just googled logos and liked theirs!). So after capturing their logo and webpage my guide looks like this:


2. Capture corporate colours.

One of the handiest tool available in most image based software programs is the eyedropper tool.

This humble little tool gives a visual designer a lot of power. I can use the eyedropper tool to pull the colours out of the logo and fill out my colour boxes. To do this in Articulate Storyline you:

  1. Select a box
  2. Select the format tab on the ribbon
  3. Click the little drop down arrow next to the shape fill option
  4. Select the eyedropper tool
  5. Then click on one of the colours in the logo to capture it

Your box will change to match the colour you selected with the eyedropper tool.


Colour 1 captured. Now repeat the process to get the rest:


Now we have our colours for our design. I’ve grabbed the two blues and the yellow out of the logo, and the warm grey from the website. To transfer these colours to another software package you can write down the RGB code shown when you hover over the colour with the eyedropper, or you can select the coloured box you want the RGB code for and then click Format > Shape Fill > More Fill Colours > Custom to discover what it is.


3. Fonts

Most of the time the client will let you know which font is used in their marketing material. If they don’t know, or you can ‘t locate somone to assist, there are some other ways to discover what fonts they use. The easiest way I have found to work out what fonts they use is to refer to the website.

Open the website in your browser and then press F12 if you are using Internet Explorer, (in any other browser select the menu item View > Source). In IE this will take you to the Developer’s Console. Don’t be scared! You’re not going to break anything here, and we’re only looking for the font types they have used. Select the menu item DOM explorer, and on the right hand side of the screen you will see a reference to the font family used:


The font used here is Roboto Condensed. Yay! Now we know the font we need! You may already have it, or at least you know the name of the font to locate at a later date.

If you can’t find the reference as above, or if you are using another browser, use the Find menu option by pressing CTRL + F, and search for ‘font-family’ in the HTML code to discover which font they have used.

Now knowing the font, I make a note about it on my style guide, and if installed I change my title and body text to mat


4. Assets

Looking good! My eLearning style guide mostly done! The last part is other assets. Here is where I make a note or grab a screen capture of any other related assets that I may use some visual design inspiration.

The Mustangs have an interesting title banner that they use throughout the site, so I’ve grabbed a quick screen capture of it as a source of inspiration for any title banners I may need to create as part of my design. Also, I’ can’t forget that they are first and foremost an ice hockey team, so I grab a quick picture of one of their players in uniform for further ideas.

Here is what my style guide now looks like:


I’m all done! I’ve now got a quick one page reference to the style of the Mustangs, to assist me when it comes to building the design concept for my module. The last thing to do is confirm with my client that I have hit the mark for their style before launching into full design concept mode.

Making an eLearning style guide is quick and easy, and is advantageous when you want to get a quick feel for a client’s style before launching into full visual design mode. Keep this with your project materials to refer to whenever you need.

Looking to learn how to use Articulate Rise or Storyline? Find out about our Certified Articulate Training here.

Get in Touch

We would love to hear from you. Give us a call or fill in the form and we will contact you soon.

    What product or service are you interested in?