In a recent guest blog post I wrote for Brian Batt, eLearning Freak, I explain why you need an instructional design portfolio and how to develop one.
Check out this fantastic WordPress plugin Brian has developed that every instructional designer or eLearning developer should know about.
For the first ever e-Learning course I designed, I chose the colours red and green as my primary colours. I had a lot to learn about colours and design, particularly with regard to designing for inclusiveness, aka colour blindness.
Colour is such an important part of visual processing and engagement, but how many of us truly understand how this works?
In this article on The Colours of e-Learning, Brother Andrew from e-Learning Brothers talks about the psychological effect each colour has on learning.
In this article on using psychology to design effective learning, Karla Gutierrez talks about colours being “powerful psychological triggers that help users learn better by changing their perception and evoking emotions”, but also goes on to say that excessive use of colour can lead to cognitive overload.
Of course, there are number of references to this topic in the Articulate e-Learning Heroes community, including this one on The Color Effect: How Your Palette Affects Learners that also has a pretty cool interactive infographic explaining the psychology of colour.
Firstly, you need to have an understanding of how the colour wheel works. Here’s an informative article I came across on this topic by Kate Smith – Get to Know the Colour Wheel in which she goes into depth about the parts of the colour wheel – hue, tint, tone and shade. Alternatively, if you’re someone who would rather take in information in a visual and narrative format – I highly recommend the video below.
There are a number of resources and/or tools you can use to select a colour theme for your e-Learning course. Of course, consideration needs to be given to client preferences and style and often this is what dictates the colour theme from the very beginning. However, if you have no such constraints, where do you start?
I most often start with a relevant image that will set the tone for the entire course. Adobe Color CC is possibly one of the most widely-known tools for generating colour themes from an image, or from the colour wheel itself.
Here’s an overview of this process.
Big Huge Labs – Colour Palette Generator is a serious contender in this field – it generates the HEX values and names of the colours, as well as a downloadable Adobe Swatch Exchange (ASE) format for Photoshop.
One last resource I wanted to mention was Coolors which allows you to create, save and share colour palettes online by generating and modifying a random colour palette, or by exploring colour palettes shared by others.
I seek inspiration from lots of other sources and have often based my colour theme on a website that inspires me. An example of this is this Course Starter Template I designed, the design and colour theme of which was initially inspired by the Alannah and Madeleine Foundation website (although I see that this website has changed somewhat since I designed this template).
Infographics is another source of inspiration I fall back on at times. I love infographics and have many of these pinned to my Infographics Pinterest board waiting for me to use as inspiration. Top of the list is this one by Isabel Avery, a section of which I’m going to show below with the colour palette generated in Adobe Color CC – isn’t this colour combination amazing?!
One thing you can generally do with these colour palette generators is choose your “colour mood”. This first image shows the “Bright” colour mood palette generated from this image. The other three colour moods shown below are “Dark”, “Muted” and “Colourful”, also generated from the same image.
Lastly, seeking inspiration from sites like Design Seeds can be a rewarding exercise, although I find I get lost in the awesome amount of creativity that others possess and are willing to share, so keeping focused on the task at hand is a must!
Popular Colour Schemes for e-Learning Design – Articulate e-Learning Heroes
4 Tips to Use Color in e-Learning – eLearning Industry (Christopher Pappas)
The e-Learning Color Guide: Evoking the Right Emotion: eLearning Industry (Christopher Pappas)
Find Color Schemes for your e-Learning Courses – The Rapid e-Learning Blog (Tom Kuhlmann)
The Complete Guide to Color Combinations in e-Learning – SHIFT e-Learning (Karla Gutierrez)
7 Tips to Choose the Right Color Scheme for your Online Training – Allen Interactions (Christopher Pappas)
As an active member of the Articulate e-Learning Heroes community, not a week goes by where I’m not inspired by the creativity of these talented community members.
Recently members were challenged to design and share a course starter template. 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 thought process behind this challenge was that this could be beneficial for new e-Learning designers and developers. A number of members very generously shared not only their designs, but their source files as well and you can view and access these in this post.
Everyone has their own process for designing a course, whether the design starts with the creation of a template or not. This challenge was a good opportunity for me to reflect on and document the process I go through when I’m developing a template.
I usually allow myself a little time at the beginning of designing a template to “play” before I start working through the process of developing the template. If there’s no time pressure, I can spend a lot of time in this phase – but as we all know, this isn’t always possible!
This creative time generally includes the following:
I start by looking at images / websites / designs relevant to the course topic – this could include sites such as Shutterstock, WeeJee, Canva, Pinterest, Fribly, Behance or Dribbble, just to name a few – I even look at sites such as SlideHelper, Presentation Magazine, Creative Market or some of the sites that sell templates such as eLearning Chips, eLearning Brothers or Skillsdox
I then move on to sourcing the design elements such as any images that may dictate the colour scheme or size of the template slides. During this phase I make sure I have a good understanding of what will be included in the course as far as content, icons, multimedia, quizzes etc to cater for any specific requirements in the design to include these assets.
When I’m developing a template in Articulate Storyline 2, there are a number of elements that I like to customise to make sure the template can be effectively converted and used for different styles of courses, different client requirements and even different clients. These include:
I use the Slide Master for the slide layouts and slide design elements that will remain consistent throughout the course. Within the Slide Master there is also provision to select a theme and edit the theme colours and fonts.
I also make sure I edit the Feedback Master as the design that comes standard with Articulate Storyline 2 is not very often appropriate for use without some modifications. The Feedback Master also has provision to select a theme and edit the theme colours and fonts.
With the Slide Master and the Feedback Master, I always retain the original masters of these and insert new ones to use for my design modifications – this way if something goes terribly wrong I can revert back to the original masters and use these elements to get me back on track.
If I take the time to customise all of these elements, the final template will be much more efficient to work with and any changes I need to make to the design can be easily applied at the master slide level, saving development time overall.
You can read more about my design process and view an interactive demo of a course starter template I recently designed by clicking on the image below.
The inspiration for this post was the Articulate e-Learning Heroes weekly challenge #117 Design an e-Learning Cover Slide with This Visual Design Tip and Tom Kuhlmann’s post -Here’s a Visual Design Tip to Make Your Slides Look Great.
Establishing context by customising background images is one way to create an engaging visual design and set the stage for an e-Learning course. In Tom’s post and video he explains how to create what he calls a “transparent echo effect” by enlarging an image and increasing the transparency to blend the image into the background – a technique that’s commonly used in advertising and product photography.
Here’s an overview of how I worked through this process to create some different effects.
Firstly, I chose an image that I could separate from the background – this could be a person, an animal or some type of object. You should also make sure the image is of a good quality.
In this example I started with this image of an owl, downloaded from Pixabay.
I used PowerPoint to remove the background. I then went back to the original image and cropped the image to leave just a portion of the background, then stretched this remaining portion to create a new background for my custom slide.
I then used the Paint Brush effect in Artistic Effects in PowerPoint to change the appearance of the owl slightly (not necessary for this effect, but I wanted the owl to appear more like a drawing than a photograph).
I chose to create the final slide in Articulate Storyline – so the next step was to add all these individual images to the Storyline slide.
To create the transparency for the enlarged owl image, I set the Fill Transparency option in Format Picture to 85%.
The other technique I tried was creating an overlay by inserting a rectangle shape, filling the shape with a custom colour from the background image using the Eyedropper, then setting the transparency to 12%, leaving the enlarged owl image at its original transparency – two quite different effects, but I preferred the striped background, so this was the one I worked with.
When it came to adding the text to the slide, I chose the font colour using the Eyedropper, selecting one of the darker colours from the owl image.
One of the bonus features of Storyline is that you can add this colour to Custom Colours in your Storyline file so you can quickly and easily use this again in your design.
Here’s what the final slide design looks like. You can view this in a published Storyline format here.
Here are some more designs I’ve been working on. You can view these in more detail on my e-Portfolio here.
I use PowerPoint extensively when I’m designing e-Learning courses, mostly for image editing, but I’ve also started to use the export to video functionality to record text animation effects that I can’t produce easily in Articulate Storyline.
Here’s a short video explaining this in a bit more detail.
Storyboarding is something that I found very challenging when I first started developing e-Learning courses. Then I came across this blog post by Nicole Legault which shows more than 15 examples of different storyboard formats.
Being someone who likes to be presented with a range of options before I make a decision, I found this blog post very helpful and was inspired to create my own storyboard template which I now use.
Where do you go to find out what’s happening in e-Learning? Do you rely on randomly coming across relevant web sites or blogs, or social media sites – Twitter, LinkedIn groups? There are a couple of web site that I’ve been aware of – e-Learning Tags (a social bookmarking site for e-Learning professionals) and e-Learning Feeds (which ranks and scores hundreds of e-Learning blogs). Then I came across this source – The Learning Rush which offers “real time news for the training community” and covers categories including m-Learning, e-Learning, Gamification and Instructional Design. It’s well worth a visit to this site, which also has an “influencer network” of industry experts.
Of course the place to go if you like to be part of an amazing community and use or want to know how to use Articulate, is the E-Learning Heroes website. There is a wealth of information here and the forums are a fantastic place to get answers and help others out. There are also free resources on this site and some great e-Learning examples. I regularly visit this website for e-Learning tips. There are some amazingly talented and dedicated contributors and this website is a must for anyone who uses Articulate.
I recently attended a breakfast session run by Cathy Moore where she talked about her Action Mapping concept – her streamlined approach to instructional design.
Cathy originally presented the concept as an e-Learning design model, but has since expanded the model with the addition of a flowchart. The flowchart is designed to help you identify the best solution to a performance problem.
Cathy was definitely an inspiration presenter and the takeaways I got from the breakfast session were – as trainers we should be asking “what does the individual need to do (not know)” and “is training really the answer”.
What did we all do before the www? Learning from others is so much easier now – although I wish there were more hours in my day to do this. Screenr is one website I regularly visit to learn about e-learning design tricks. In particular, David Anderson, Jeannette Brooks and Stephanie Harnett have some amazing tutorials on Articulate Storyline available. Watch this video by Paul Melrose for an overview of Screenr.
