E-Learning Before & After: How I Revamped This Pyramid Interaction

What’s better than looking at examples of nicely designed Articulate Engage interactions? How about looking at before-and-after makeovers of nicely designed Engage interactions!? Everyone loves a good transformation, and so I bring you: the Engage Pyramid Before & After.

Before

I’d like to first point out: there’s absolutely nothing wrong with the “before” pyramid interaction shown here. It looks perfectly neat and tidy, uses default fonts, and incorporates the standard color scheme that automatically appears when you create a pyramid interaction.

Click to view the published output.

There may even be some people out there who prefer the look of the before, and that’s fine, because it’s a matter of taste and opinion.

However, there are a few reasons that you might consider revamping your Engage interactions:

• To re-organize content in a more cohesive fashion
• To fix spelling and grammar mistakes
• To let your creative side out to play
• To create a more visually appealing and interesting design
• To find a design that fits in with the rest of the course
• To follow branding guidelines such as font and color selections

Let’s take a closer look at what I did to bring my pyramid from default to custom.

After

Check  out the "after" look!

Click to view published output.

Color Scheme

I went with a dark gray and green color scheme. Tip: use different shades of the same green to keep things consistent and tied together. I made sure the green I used in the pyramid and on the header at the top were dark enough to let my white text stand out clearly. Also, note how the dark gray in the pyramid and the dark gray on the Player unify the design and pull it all together.

Fonts

I updated the header font (Quicksand Bold) and made it match the font inside the pyramid. I also changed the body font to something a bit thinner and lighter, called Segoe UI Light.

Character Images

I made sure that every image of the character is a head shot of the same height and width. This gives a much more consistent look than having a full body shot on one screen, then a torso shot, then a head shot. Remember: consistency is key!

Written Content

Obviously, e-learning is about a lot more than how a course looks. The most important thing is the content. In this case, I edited the text content for spelling and mistakes, and removed a lot of “fluffy” words. I pared it down so you could read it without using scroll bars. (I personally don’t like the look of scroll bars, but they are handy if you need to show a bit more text.) I also edited my titles in the pyramid to make them more consistent (all one word) and gave them proper capitalization.

Audio

Finally, I added some simple audio narration to the “after” Pyramid. I feel a nice touch of multimedia livens up the course. It was a cinch to record the narration: my narrator simply recorded a script containing the text from the course directly in Engage ’13.

And voila! That’s how I revamped this simple Engage pyramid from default to customized in a snap. Do you have any tips of your own for making over e-learning courses? If you do, leave a comment below. I love to hear your feedback.

Follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.

Want to try something you learned here, but don't have Articulate software? Download a free 30-day trial, and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments, please share them below.