Working Out Loud – 30 Minute Slide Makeover

I recently shared a video menu template in the E-learning Heroes forums. Here is a screenshot of what it looked like.


I was happy with how it turned out and thought I would share it with the Articulate community. I knew it was pretty specific, what with the nature theme and all. It would have to be re-worked (new images, new videos, etc.) to be of use to most people (unless you happen to work for a nature organization). But, I thought it was a decent base to work from.

However, over the next few days, I started thinking more and more about the design. I started thinking about being a new or relatively new Storyline user. Would I take the time to swap all of that out? Would I be overwhelmed with the thought of doing that? Would I think, “It’s nice, but I need something more practical or suited to a work environment?” Would I look at it and think, “This has no business relevance to me. How could I use this at my company?”

And so, within a few days of creating this template, I was already thinking about how I could improve it. I still think it is a decent template. But, I think it might be easier for someone to imagine using it if it had a different look and feel.

I didn’t want to start from scratch. I felt the basic structure was solid. I decided to go with a more modern, casual look (laptop, coffee, etc.) I used this image as my background.







Rather than clicking on each image to view a separate video layer, I wanted it to be a bit more seamless. I decided to ditch the linked images. Next, I made the labels smaller and made those the links to the videos.







I clipped the sizes of the videos so they would fit next to the labels where the old linked images were located. I added hover states to the labels for better clarity.







I decided to leave the CLOSE button for each video layer. The learner can either close each layer, and return to a blank space with the “Select a topic to learn more” text or click through each of the labels to start a new video. Since the video layers each have a Fade transition, the fade in and out from one video to the next works particularly well.








Finally,  I changed the color of the banner background at the bottom to align with the label links. I think this pulls the slide together a bit better.


While I liked the first template, I’m more satisfied with the look and feel of this one. Hopefully, it will be a bit more appealing and easier to re-purpose.

So, what do you think? I’d love to hear your thoughts. I’m including source files for both templates. Happy Storylining!





Launch Demo








Launch Demo



3 Things to Check When Reviewing Your Course

As instructional designers we wear many hats – graphic designer, developer, programmer, project manager, and tester to name a few. Often, at the end of building a course we are so embedded in everything about it, from the way it functions to the way it looks and feels to the color palette and font choice. In fact, we probably have course fatigue and sometimes just want to be done with it. However, performing a quality assurance (QA) test of your course prior to publishing or turning over to the client for final review is essential. There are many things we need to check to make sure the course construction is complete. I’ll discuss three, big course-wide items to check.


Obviously, if you build a simple, content-heavy, click-through course, this isn’t as much of an issue. But, if you build something like a branching scenario, you want to make sure you are branching to the right scenes/slides in your course. If you build a course with custom previous and next buttons that don’t live on a master slide, you will need to check their destinations. You also need to make sure if you click on “Previous” you are directed to the right slide. Is it the slide right before the current slide in your course structure, or the slide you were on before coming to the current slide?  Also, if you build a custom navigation set, make sure it has a consistent visual design. If you are using text, is it the same font family, weight, style throughout the course? If there are buttons, are they formatted consistently with regard to colors, hover states, etc.?


When building courses, I try to use two fonts, one for headings and one for body text. Text and media are really what your course is made of, so it is important to have a tight, consistent look for your text so as not to distract from the learner’s ability to absorb the content. When you QA your course, check for the following items with regard to text. First of all, is the same font family used throughout the course? Nothing cries distraction and poor design than text being in different fonts from slide to slide. Also, are the sizes consistent throughout the course? If you decide on 24 pt headers for each slide, are they all 24 pt? Is your body text all one standard size? Or does it increase and decrease, depending on the number of bullets you add, ala PowerPoint? By the way, you are trying not to use a lot of bullets in your course right? If you have certain key terms that need to be italicized or bolded, have you formatted these throughout the course?


Finally, what about the image assets in your course? Are your photos high quality or do they have that grainy, pixellated low-res look? If the latter, see if you can get better images from your client or find suitable substitutes online. Are your non-photo images good quality? Do they represent a consistent style or do they look like a mish-mash of bad clip art? Also, do your images or photos need borders? If so, use the same thickness and color for all of them. Rather than the standard black border, I frequently pick a color from my course palette or something that complements it.

Is that it?

Unfortunately, no. There are a multitude of items to check when reviewing your course. However, navigation, text, and images are the big three that learners will spot right away. Make sure these are consistent and fully-functioning to ensure a better learner experience.

Building a Storyline Timeline Template

It seems that everywhere I look I’m seeing multimedia timelines. In fact, the latest Articulate Weekly E-learning Challenge involves building an interactive timeline. While I didn’t tackle the weekly challenge, I’ve been thinking about making a simple timeline template for a while.

First off, here is the published Timeline Template for you to check out. And here is the free source file for you to use in your own projects.  If the fonts aren’t displaying right, here is what I used.  For the title and year text I used ChunkFive and for the copy text I used Open Sans.

I started off with a “regular” look, but decided to give it more of a flat design look. Ironically, Tom Kuhlmann just wrote a post about giving your old course a new look by transforming it into a flat design.

This is a pretty simple timeline template as far as content placement. I placed text descriptions on the left and any media (pics, videos, etc.) on the right. I decided to forego a lot of animation and just focus on the straight timeline effects. The trickiest part of the timeline is getting the previous/next arrows to work in conjunction with the timeline radio buttons. The radio buttons on the timeline jump to each decade whereas clicking the next/previous arrows advance to specific years within that decade. I recorded the following Screenr to describe how I fixed the selected states on the radio buttons.  Let me know what you think!