How to Design a Custom Theme for an E-Learning Course

An  e-learning course requires many decisions to design its look and feel. You need to consider graphic objects and elements, fonts, images, and colours.  David Anderson, over at the E-Learning Heroes community blog, shares how to use a mind map template to identify design elements. On his mind map, he also includes sources of inspiration such as magazines , related industries, media, and metaphors.

Here’s the mind map David created for an automotive e-learning course:

Mind map_automotive course

The first step in creating a mind map is to brainstorm ideas for each category. To work through this process, let’s create a mind map for a free online course Tobacco and Public Health. I’ll start by listing ideas under these sources of inspiration:

Websites

Related topics and industries

  • Cancer
  • Addiction
  • Cigarette industry

Media (movies)

  • The Insider
  • Thank you for Smoking

Metaphors, analogies and antonyms

  • Cold turkey
  • breathing easily
  • pollution

Now that I have some references, I can use them to pull ideas for my design elements:

Objects

  • tobacco leaves, plant
  • cigarettes
  • smoke
  • cigarette package
  • lungs
  • ash tray
  • pipe
  • warning label
  • lighter, matches

Images

  • people smoking
  • health care practioners
  • accupunture
  • nicotine patch
  • hypnotist

Fonts

  • Grunge
  • Distressed

Colours

  • browns
  • greens
  • red

After completing the mind map, I can use the key words to search for images to use for my course. Using this process is a great way to pull together elements for a custom design.

Illustrated Website with Fun Navigation

James Garner

JamesGarner.co.uk is my second favourite website that I’ve discovered recently.  I think this site is genius. The designer makes me feel like I’m in a story book, and he uses some subtle animation just like my first favourite site. There’s very little text on this site, which is fine since James is an illustrator and designer.

Scroll down and check out Bob. You’ll find some amazing sea creatures if you scroll toward the bottom. Watch out for tentacles.

How to Search for the Right Stock Image

Library-Search

Finding the right image from a stock image website is like searching for a book at your local library. The more specific you are about what you’re looking for, the better your results. Choosing keywords to narrow your search is the key to finding suitable images.

The folks over at the Getty Images site have put together a great Keyword Guide. You can use the guide online or download a PDF of the guide, which contains their helpful tips.

To find keywords for your image search, choose one of their eight categories:

  1. People – Find keywords by these sub-categories: characteristics, generations, relationships, or combinations.
  2. Concepts – Find keywords related to emotions, moods and ideas.
  3. Age – Find keywords related to age ranges, milestones and stages of life.
  4. Human emotions – Find keywords related to feelings, attitudes and frames of mind.
  5. Editorial-specific terms – Find keywords by these sub-categories: archival, news, sports, entertainment, location
  6. Image and footage styles – Find keywords by these sub-categories related to styles, techniques and industry-standard terms.
  7. Topics – Find keywords related to events, issues and interests.
  8. Sayings – Find keywords related to common expressions, catch phrases and clichés.

Once you have identified keywords, you can try them in a search on one of the stock image sites. If you want free images, make sure you search on Royalty Free and check the usage. You can find out more about photo licensing here.

Watch this video from Pearson Communications on how to find free images for a blog or website. Another resource to find Creative Commons images is Photo Pin.

Once you’ve found photos that match your search criteria, you’ll need to choose the best one. Here are some points to consider:

  • Image quality – a poor resolution image will appear grainy
  • Area of focus – zero in on a single main subject (avoid crowds)
  • Story-specific – relevant to the story you are telling
  • Bright is best – choose the brightest coloured image
  • Faces and emotions- readers respond to people with emotions
  • Think like the reader – put yourself in the shoes of a reader

References:

Avoiding Font Crimes: How to Choose the Right Type

If you’re choosing a font for serious text like your e-learning course in corporate compliance or your great aunt Matilda’s obituary, DO NOT use Comic Sans as your font choice. Seriously. If you do, I’ll have to report you as a Comic Sans Criminal. You don’t want that to happen, do you?

Comic Sans Criminal

You need to consider the personality and purpose of the font you’re choosing. Comic Sans falls into the Cursive category of fonts. It’s intended for informal, fun, or children’s communication. For communication that is conservative, you’re safe to choose from the Serif or Sans Serif font categories. Try any of these:

Serif fonts look great in print

  • Times New Roman
  • Georgia
  • Book Antiqua

Sans serif fonts look great online

  • Verdana
  • Arial
  • Tahoma
  • Trebuchet
  • Helvetica

Actually these fonts are a safe choice for any text because they’re readable and available on most computer systems. Choosing Verdana, for example, is like wearing that little black dress in your closet. It’s good for any occasion.

“But” you interject, “I’ve seen some great looking fonts online that aren’t on this list. How do I find those and when can I use them? ”

You can find many styles of fonts on sites like Dafont and Font Squirrel. These sites are great because you can search for the right type by category, try fonts online, download them onto your system, and use them for free. They make great accents to add character to your visual communication.

Suppose you’re designing an e-learning course for Acme Widgets. You want to add some character to the headings, image text, and menus in the course by using a stylized font. Since Acme is a manufacturing company, you could look at fonts on Font Squirrel under the Industrial category for example. The Font Personalities Quiz from Tom Kuhlmann’s Rapid E-Learning Blog can give you a clue about your typographic design sense.

When you make font selections, you also need to consider font combinations. You don’t want to mix too many fonts together. Try to restrict your choices to two. As a general rule, if you add a second font to your design, either keep it exactly the same or change it a lot. A Serif font for your heading paired with a Sans Serif font for your body text is a visually appealing combination. For more on how to select font pairs, see Best Practices for Combining Typefaces. The Non-Designer’s Design Book is an excellent resource for typographic guidance.

Another consideration for design choice is contrast. Black type on a white background is always a safe choice. White or yellow text on a black background also works. You can read more about contrast on WebAIM, the accessibility site.

You can avoid font crimes if you make the right choices. Stick with fonts that have good readability. Consider the purpose of your communication and select fonts that set the right tone. Limit the number of font types you use and follow best practices for combining them. Make sure you choose colours that provide good contrast.

Navigation Design for E-Learning Courses

For this post, I want to apply what I’m learning about navigation in website design to e-learning courses. I searched the Internet to find some web-based courses that I could assess for their navigation. Most of the courses I found required an account, but I did manage to find a few free sites that anyone can access.

For my assessment, I’m going to look at Vaccine Safety Basics, which is an e-learning course provided by the World Health Organization (WHO).

Vaccine Safety Basics_home

The homepage for this site has a professional looking design. The primary navigation menu on this page appears on the right hand side with three links: Welcome, Getting Started, and Start Course. The design gives me two clues that I’m on the Welcome page. One is the vertical red bar on the Welcome link. The other clue is the title “Welcome to the WHO Course on Vaccine Safety Basics”, which is in a larger font and in a different colour than the body text. If I scroll down the Welcome page, I can click a button to go to the Getting Started page. Having a second method of getting to another page is a good navigation feature. The site uses two other standard navigation features:

  • A Search field in the top right hand corner
  • A footer (shown below) which contains the contact information and links to other resources

WHO_footer

When I click the Start Course link, it takes me to the Module 1 overview page below.

WHO_Start Course

The navigation for the entire course appears on this page. Here are the navigation features I see:

  • A  title – MODULE 1: Introduction to vaccine safety. The title lets me know which module I’m in.

Module title

  • A primary navigation bar – The course navigation menu. This menu contains the six modules and a general assessment that make up the course. I can click on any one of the menu items to go to that part of the course.

course title bar

  • A secondary navigation bar – The module content menu. This menu shows me a list of the topics in the module. The Overview and outcomes topic appears in red on the menu to indicate its the current topic.

content

  • Topic headings – OVERVIEW and MODULE OUTCOMES. The headings are uppercase and in blue to stand out.
  • An additional navigation bar – the Case studies and Glossary menu. This menu appears in a different colour and is located away from the course navigation menu. It’s in the same location in all the modules to allow me to access the case studies and glossary at any time.
  • Navigation buttons – Next and Back. The page allows me to move forward and backward a topic. So I can use these button to navigate between topics or use the Content menu for the module.
  • A return to the homepage – World Health Organization logo. If I click the logo on the top left hand corner of the page, it takes me back to the homepage. This navigation feature is a standard web convention.

What happens if I select any one of the navigation items? For example, what if I select Types of vaccine on the module’s Content menu? The topic changes and the heading Types of vaccine appears in uppercase blue text. Now what happens if I select another module from the course navigation menu, for example Module 3? As expected, the OVERVIEW and MODULE OUTCOMES page appears for the module.

This course has excellent navigation. It’s consistent and it follows both standard web conventions and navigation design principles. I can easily find my way around and see at a glance what the course content is and how to get back to the first page. I can find what I’m looking for using the Search field, which is located where I would expect to find it.

Kudos to the designers of Vaccine Safety Basics.

If you’d like to assess some other e-learning courses, here is a listing of 50 sites where you can take courses for free.

References:

Whimsical Website Design

Here’s a favourite website I found that uses a full screen layout. The site is for web designer Denise Chandler who has a flare for whimsy and a talent for details. Many design elements work together to give the site its charm.Denise Chandler

Launch the site and take a closer look at the midway graphic in the foreground. What do you see? The ferris wheel is turning, and at frequent intervals, the roller coaster ride starts. The animation is subtle, but it gives the site an extra detail that adds to its appeal.

Notice how effective the block of words in white is as the navigation feature. The fun fonts add to the whimsical style. Try moving your mouse over each word to see what happens. Did you notice how the fill in the letters changes? And the fill is different for each word. Clever. My favourite is how the letters change in the word Portfolio.

To create the background image, it seems the designer started with a solid turquoise rectangle. She added a silhouette in grey to give it depth and overlay the silhouette with the black midway scene. Using black for the midway makes it appear closer so that it’s in the foreground.

The About Me block of text and social media links on the black background perfectly balance the navigation block of words. The final touch of whimsy on the page comes from the choice of icons and the curved arrow.

Check out Denise’s portfolio to see more fun website designs. They are all different and yet she has a recognizable style.