Turbo Charged Tabbed Interactions Design

I “stole” the name for this blog post from a fellow Articulate e-Learning Heroes community member, Jackie Van Nice who used this term when referring to this tabbed interaction design I entered in one of the weekly challenges (click on the image below to view the demo).

tabbed interaction
Click on the image to view the interactive demo

I’m sure at some point we’ve all developed the standard tabbed interaction with no bells and whistles (or animation) because that’s what the client wanted, or that’s what suited the topic or learning solution – but for me this sometimes gets a little boring and I like to jazz things up a bit, even if it’s just to challenge myself to re-create something I’ve seen.

This brings me to an interesting question – where do you seek inspiration for your designs?

When I’m designing, I seek inspiration from a number of sources. Sometimes I’m not even looking for it and it appears! Other times I’m looking for something completely different and see something that I want to use as inspiration for a design.

That’s what happened with this tabbed interaction design (below) – I just had to see if I could work out how to develop this after coming across the categories side-bar on this website blog page.

This is what the sidebar looked like.

And this is my second design for the #199 Tabs Navigation challenge, which I hadn’t planned, but was inspired to share.

tabbed interaction animated design
Click on the image to view the interactive demo

The Process and the Design

I only spent a few minutes setting this up in Storyline 360, then a few minutes more to fine-tune the design and animations.

Each tab has three sections, with the centre and clickable section having a hover state (with the tab colour and a wipe from the left animation) and a selected state (the solid tab colour).

The tab content area is on a separate layer with a trigger to show the layer when the tab is selected. Of course, the tabs are all part of a button set so only one can be selected at a time.

The Conclusion

This effect was pretty simple to re-create really – except working out how to incorporate the animation where the selected tab animates back to the left when you hover over another tab may take me another few minutes…

I’d be interested in hearing from anyone who has any thoughts on how much animation is too much in a design like this one.

Colour Themes for e-Learning

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?

The Psychology of Colour

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.

How do you select a colour theme?

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.


Other sources of inspiration

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!

More articles and resources on this topic

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)

Templates for e-Learning

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.

How I develop a template in Articulate Storyline 2

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:

  • Identifying up front if there are any design constraints or assets that are to be provided that would dictate the template design
  • Revisiting previous templates I’ve designed or worked on and see if any of the design elements or concepts would be appropriate for the new template design – often it’s the case that I can re-purpose a previous project and this is a huge time-saver
  • Searching generically within the industry the template is being designed for, looking for inspiration and design ideas

I start by looking at images / websites / designs relevant to the course topic – this could include sites such as Shutterstock, WeeJeeCanva, 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:

  • the story size
  • the course player
  • the theme fonts
  • the theme colours

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.


Skeuomorphism – an awesome interactive infographic

I came across this amazing interactive infographic on Skeuomosphism and wanted to share it – so here it is!  You need to scroll to the bottom of this static infographic to access the link to view the interactive version, or go to this link on the TemplateMonster.com website.

The WhatIs.com definition of skeuomorphism is “the design concept of making items represented resemble their real-world counterparts”.  Apparently it’s commonly used in UI and web design and contrasts with flat design which is a simpler graphic style.

Interestingly, there are also what’s known as “non-visual skeuomorphs”, eg the page-turning movement used to advance an eBook, the sound of a record ending at the end of a CD and the sound of a camera shutter on a digital camera.

As far as interactive infographics go, this would have to be one of the best ones I’ve seen and definitely an inspiration to try some of the design features that have been used here.

You can read more about my attempt at Skeuomorphism from the ID perspective here.

skeuomorphic design infographic
Via: TemplateMonster.com

Why you should use SlideShare

According to SlideShare, “70 million professionals trust SlideShare to learn about any topic quickly from subject matter experts”.

SlideShare supports the uploading of presentations, infographics, documents and videos and since joining with LinkedIn in 2012 has become a top destination for professional content.

Visual formats help you stand out – apparently images are processed by the brain 60,000 times faster than text and get shared more on social media, so the tip is to make sure your content has a strong visual story to go along with the text content.

One of the best things about SlideShare is that if you need to make a change to a file you’ve uploaded, SlideShare allows you to re-upload and retain the same URL.

SlideShare makes it very easy for viewers to add “clips” to your own profile clipboard. From the clips in your clipboard you can then you can share these clips, or view the clips in the original SlideShare presentation. You can create numerous clipboards, and even nominate whether these clipboards are private or viewable by others.

The analytics are exceptional – with information on exactly where your views are coming from and how they discovered your content – right down to the time your content was viewed.


Here’s a good place to find out more about how to get started.

As far as using SlideShare for business goes, presentations, infographics and videos can be powerful marketing assets, so sharing your corporate story, industry insights, or marketing your business directly to a target audience can help you connect with potential customers.  Another tip is to connect your social media accounts (under account settings) to help your content “go viral”.  You can also embed your SlideShares into blog posts, websites, LinkedIn posts and more.

You can upload YouTube videos to SlideShare – firstly you need to upload your presentation file (so you need to create at least one cover slide).  Once your file has been uploaded, click on the “Edit” button, then from the “Add YouTube video” tab, enter the video URL and placement, then click on Insert and Publish.

From your profile “My Uploads” tab you can instantly see how many views, likes, comments and downloads each of your uploaded files has had, as well as preview in mobile or desktop view and edit or delete each of your uploads.


Additional design and promotion tips are available in the Creator’s Hub here.  If you’re interested in being featured on SlideShare’s homepage, there’s some information in this SlideShare that will help you achieve this.

Creating Custom Backgrounds Using Faded Images

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.



Working with Vector Graphics in PowerPoint

Vector are images that are made up of shapes, rather than a grid of pixels.  They can be scaled to a larger size without losing any image quality.

Working with vector graphics usually requires software such as Adobe Illustrator – but in this short video I show you how easy it is to download free vector graphics and work with these in PowerPoint.

Powerpoint Tips for e-Learning

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.

Creating a GIF from a Video

I’ve been experimenting with using .gif files to display information on a web page or WordPress site and have recently discovered that you can create a .gif from a video.


This is a .gif I created using the Video to GIF converter on ezgif.com – it’s the opening slide of an interactive resume I’m working on.

The one thing about .gif files that is a little restrictive is that you can’t control when they start – they have a mind of their own and start, then loop around continuously.