I’m sure that other e-learning, web and graphic designers will agree with me when I say that I LOVE finding free templates and resources online that I can use in my projects. Last week I was doing a web search for some quality free photos that I could use in a project and I stumbled across MorgueFile. It says right on the website that you can use the photos for commercial purposes without attributing the original author, and the photos are really great, high-quality images! I’m in love with this site. Tons of abstract photos and textures you can use for backgrounds in e-learning templates, and they have a really great set of business people in a lot of different settings. When I saw the following set of paperclip photos I suddenly became inspired to create an e-learning template….
So that’s how this next e-learning template came to be, which I created Articulate Storyline. I was inspired by this paperclip photography and I lifted the turquoise color from the paperclip (using the eye-dropper tool) to use in my design. The fonts that I used in my template are Bebas, Desyrel (I only used Desyrel on the title slide) and Articulate Light. You can download the fonts for free and install them on your computer if you would like your template to look identical to this (it won’t quite have the same look if you don’t have the Bebas font installed!).
If you want to check out the published Storyline file, you can have a peek at it here. If you’d like to download the .story file to use this template yourself, you can download it here. Sharing is caring! Hope this template is useful for someone, or inspires you to create your own.
Last week I posted a bunch of custom shapes I created using Articulate Storyline in the e-Learning Heroes Forum. Two things have come of this: 1) people seem to really like the shapes (yay!), and 2) I’ve since developed a new obsession with creating custom shapes in Storyline. In case you’re wondering what I mean by “custom shapes” I simply mean that using shapes that are available within Storyline I created the items you see below:
Everything in the images was created by me (except the wood texture background) simply by using shapes and lines with the appropriate gradients and shadows, right in Storyline. The fun thing about this is that since they are really just groups of shapes, you can de-construct them, edit them as you please, change the colors, etc. You can also do a right-click on the group, Save as Picture, and then save the shape as a .PNG file that can be used in projects you create using other applications, like PowerPoint or Captivate. As pointed out to me in the forum, it’s a fun way to extend the functionality of Storyline from an e-learning development tool to a graphic design tool, by using what’s available to you in the right way.
All you need to do to create your own custom shapes is create your individual shapes, color them (using shadows and gradients, such as the path gradient used on orange rectangle below, is critical to making it look realistic), line up your shapes, and then group them together. The image below breaks down how I created the pencil.
Like I mentioned earlier in this post, I’ve now developed a bit of an obsession with creating fun new shapes. It’s given me all these ideas for fun projects and themes I can create using the shapes I’ve made. For example, I created a really cool looking desk phone (which I will share in a future post) and now I’m working on adding some functionality wherein you press numbers on the keypad, and it links to various slides. I also find that now I’m often challenging myself to see how far I can go “re-creating” simple items right in Storyline. My latest challenge was creating the Microsoft system calculator using shapes in Storyline. You almost can’t tell the difference between the two!
Since the shapes I created last week were a hit, I decided to make a few more this weekend. I created a couple of folders, a notepad, and a clipboard. I’ve posted these files in the e-Learning Heroes forum as well, so check it out, and if you use Storyline, by all means, save them for your own projects. Here’s a photo below to show you what the new shapes look like.
I hope this has inspired some of you guys to create your own custom graphics in Storyline! And if anyone has any suggestions or ideas for future shapes or challenges for me — bring it on!
Last weekend I posted a new infographic (Gagne’s 9 Events of Instruction) and I got some really good feedback about it. One piece of feedback that I received from several people was to incorporate more graphics/icons into my infographic designs. Of course I think we can all agree that using visuals is only a good thing if it adds value by providing an instructional purpose. This weekend when I decided to make another graphic, I was careful to choose a few icons that I thought were really representative of the elements of PAF. I created this infographic in Adobe Photoshop.
I’d also like to add a disclaimer that the PAF Methods listed in the infographic for presentation and application are only three examples, but there are a lot more methods available to you. Those are just a few examples!
This weekend I decided it was about time I created a new instructional design themed infographic. I’ve created a few in the past, which I’ve shared on my blog (here, here and here), and they’ve proven to be some of my most popular postings.
How did I go about creating this infographic? For starters, I browsed online through some instructional design sites to get ideas for what I wanted my subject to be. In the past I’ve designed an infographic illustrating the ADDIE model and Kirkpatrick’s Levels of Evaluations so when I stumbled across an article mentioning Gagne’s 9 Events of Instruction I was intrigued. Of course I had heard about Gagne and his nine events, but I wasn’t too familiar with them. In fact, I couldn’t even name one event! Since I like to use my infographic development process to learn something new about instructional design, I thought this would be a good topic. The next step in my process was to do a Google Images search for some infographic design ideas, to help me get inspired. Then I created the infographic in Adobe Photoshop, starting with the design of the heading/title of the infographic. Once I had the title narrowed down, I used those same fonts and colours throughout the rest of the graphic. I’d say it took about an hour, maybe an hour and a half, to complete. I got to be creative and learn something new about instructional design, so I think it’s a success!
Got any suggestions for an e-learning, instructional design or training themed infographic you’d like to see? If you have any ideas for me please leave a comment.
Here are some e-learning slides from a project I created for my portfolio. This is how much of a nerd I am–when I am home on weekends, and in my spare time, I create “demo” e-learning courses to add to my portfolio. I created these slides in Articulate Storyline. Enjoy!
I’m always perusing the web looking for e-learning, web, and graphic designs that catch my eye. When I find something that I like, I do a quick Snippit and save the images to an ”e-Learning Inspiration” folder that I keep. When I start a new project I can open up this folder and get tons of ideas. I thought I’d share some of what I consider to be the most eye-catching and fun designs from my “Inspiration” folder. I’m hoping these samples will provide you with ideas for layout, use of imagery and icons, colours, navigation, typography, etc. Below each image is a link to the original site. Hope you’re inspired!
When you design e-learning courses you often have to incorporate pop-up style feedback windows into your layouts. Feedback windows are used in e-learning for a few reasons, the main ones being: 1) To provide correct and incorrect feedback information, and 2) to provide tips, hints or additional information for the learners.
I am sharing a few examples of feedback “designs” that I developed in Adobe Captivate 5.5. I started out with a basic slide with some information, and then I overlayed a rectangle shape with a 75% opacity over top of the entire slide to add that faded background effect. I really like using this “faded background” effect for feedback pop-up windows; it’s a simple way to keep a strong visual connection between the feedback and the content you are providing the feedback for. I also like using rounded rectangles instead of hard corners because I think it softens the overall look. One more thing: I like using “fun” fonts for headings, and simpler, sans-serif fonts for body text.
Thought I’d share some sample eLearning slides from a project I did a few years ago. I created this course in Adobe Captivate 5.5 and I’ve replaced most of the written content with placeholder text. May you be inspired!
You don’t need to be a professional graphic designer to know that yellow text on a white background is a no-no. However, there are some more subtle design faux-pas (‘s?) that not everyone knows about. Here’s a look at a few of them, and some tips on how to avoid making those mistakes in your own designs.
White space (sometimes known as negative space) is the unmarked or un-used space on a slide/screen/layout. White space is a very important design element and it should be balanced with the objects on the slide. In other words, you should aim to have 50% white space on every slide. Claustrophobic slides happen when there isn’t enough white space and the objects on the slide are too close together, touching each other or touching the edges of the slides. Here’s an example of a claustrophobic slide:
The elements on the slide are crowded and too close. It just feels a bit too “tight”. The fix: add some white space! Here is the same slide, with all the same elements but with proper spacing around them.
Ahhh! Now there’s some breathing room. That’s what white space does. It frames all the elements and provides balance.
Why do you want your headlines to stand out? Because they introduce the slide and let the learners know what they are about to look at. Whispering headlines fail to attract attention, and are not easily distinguished from the text that they introduce. Here’s an example:
Notice that the headline doesn’t really stand out from the text that comes after it. Headlines should be significantly larger than the text that follows. Here is the same example, except this time the headline is bolded and a larger font size:
That helps a bit, but it’s still not really popping as much as it should. A few other techniques you can use to make your headlines stand out: make the text bolder, change the color or change the font. Here’s our same example once more, but this time the headline has a different font color and typeface.
See how much our headline pops now? Your eyes go right to the headline and right away you know what this slide is all about (or at least you would if you spoke Latin!).
When you’re using more than one type of font in your e-learning design choose contrasting fonts. In other words, avoid mixing fonts that have a similar look-and-feel (whether it be in the size or weight of the type). Here’s an e-learning slide that uses similar typefaces:
It feels a little heavy doesn’t it? The fonts used are too similar, too close to the same size, and too chunky and heavy. They compete for attention and don’t balance each other out. As we looked at in the previous example, your headline should be what grabs attention first. Here’s the same slide, but now I have switched one of the fonts to be a “lighter” style and I’ve adjusted the size of the text.
These are just a few common design mistakes that you can avoid making in your designs. Some of these “mistakes” are very subtle, and might only be caught by a very detail-oriented eye. That being said, it’s those little details that can make a design that much more pleasing to look at. I’ll follow-up with another post about common design mistakes in a few weeks, so stay tuned!
A few months ago I created an online poll called “What is the Value of a Masters in Instructional Design?” and I posted it to my blog. My goal was to gather at least 100 votes, and I was really glad that I accomplished that target pretty easily. I got a few interesting comments along the way. I have compiled the results of the poll into the following simple infographic, which I created in Adobe Illustrator CS5. Enjoy!
Please feel free to leave comments and share your feedback!