Course Starter Templates for e-Learning

Click on the image to view the demo

 The Challenge

The Articulate e-Learning Heroes weekly challenge #123 was to share a course starter template that contains at least six slides – a combination of introduction, content, quiz and summary slides.  As explained in this challenge overview, course starter templates are multi-slide templates that include a combination of the most common e-Learning content and interaction slides.  They provide a structure to the design, layout and flow of an e-Learning course and include enough slides to give users a working model from which they can begin assembling their projects.

The Process and the Design

I created this template in Articulate Storyline 2. Inspiration for this template came from a number of sources.  I came across the website for the Alannah and Madeline Foundation and initially used this as the design inspiration for the slide layout and colours, although I did customise this quite a bit.

I decided that the design needed a bit more punch, so did a search for “purple and yellow images” on Google and found this public domain image which I think works well as the background – although obviously any image could be used, depending on the course content.  I then set the story size based on the size of this image.

I like to work with the slide master when I can, but found for this course, because I wanted to add animation, most of the elements needed to be on the slides, not on the slide master.  One thing I did do though was create a new custom font set with the heading and body fonts of my choice.  I generally do this to avoid the frustration of every new text box I insert having the default text Open Sans.

fontset

I used the format feature “gradient fill” for the title background (yellow shape) and the white content boxes – then discovered that you can set different transparencies for each of the gradient stops which gives a really interesting effect.

transparency

Once I was happy with the basic design, I identified the slides I wanted to include in this course starter template – introduction/title slide, learning objectives slide, content slide, instruction slide and quiz slides.

I created my own colour theme based on the colours in my design – this makes it more efficient to work through the development when adding design elements such as the buttons.  With the buttons, I used one of the default button styles, but removed the shadow as I wanted the design to be somewhat “flat” throughout for consistency.  I also changed the default states to different colours for the hover, visited and selected states.  Once you’ve done one of these you can use the Format Painter to apply these changes to other buttons.

buttons

I originally used just icon images for the learning objectives slide, but decided to go with using the button feature in Storyline to take advantage of the pre-set states – although I did add an additional selected state, then added the buttons to a button set, so I ended up with different colours for visited and selected once I’d customised the states.

I found this must-read article on Working with Theme Colours on the Articulate Community site – it’s totally worth bookmarking and using as a reference to make your life easier when setting up a template.

I used one of the illustrated characters from Storyline as I thought she fitted in well with my theme.  One of the things I discovered with these illustrated characters is that, unlike the photographic ones, they don’t come with pre-set cropping as far as headshot, torso and full images goes.  I found I had problems when I went to crop them, so ended up saving them out as a picture, then adding them in again.

characters

I also spent some time customising the feedback master design which is worth doing if you have a few quiz slides in your template.  This article on Using Feedback Masters is a great resource.  One of the quirks I didn’t realise initially is that if you set a custom theme colour scheme and fonts, these don’t automatically apply to the Feedback Master slides – these have their own options.

feedbackmaster

The last thing I did was set up all of the slide and layer transitions.  Because I set a transition to “push from the left” for the slides, I then needed to duplicate each slide with a “push from the right” transition, otherwise when the learner clicks on the back button, the slide pushes from the right, which I always find very off-putting if I’m working my way through a course.  Just a heads-up on this – don’t do this until you’ve finished your design, otherwise you will need to duplicate any changes you make!

The Result

I think the final template is easy to navigate and visually appealing.  There are definite advantages in setting up a course starter template, including the time saved setting up all of your slide and layer transitions.

I still need to add in a “Menu” and “Instructions” slide, but for now have published this version without these.

To view the interactive demo of this course starter template, click on the image below.

Resources

This is just as much for my own reference as anything else, but as I was shutting down the numerous tabs I had open during the development of this template, I thought it might be advantageous to list some of these links to resources I used as inspiration:

A Google search for “e-Learning interface images” – following some of these links leads to amazing inspiration!
A Pinterest search for “e-Learning template design”
E-Learning Brothers Medical 1: Storyline Course Starter
E-Learning Brothers Mountain Ascent: Storyline Course Starter
E-Learning Brothers Course Starters: PowerPoint
Envato Market Presentation Templates
Vantage Path – Portfolio
Man@Desk – e-Learning
Illuman Group – Portfolio
AJ Stones – e-Learning
meat2vegdesign – e-Learning
Faster Course Templates
e-Learning.net – Custom Articulate Storyline Templates
Webducate – Projects
Learn Tech – Visual Theme Design
Learning Lines – 6 Interface Design Tips for your e-Learning Courses
Induct Now – Online Course Development
Learning Objectives Made Easy with this Simple Tip – Tom Kuhlmann

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s