One thing I love doing is building sample courses to share with the community, both to inspire others and to get the creative juices flowing. Here’s one such example: an interactive checklist created with Engage ‘13.

img2.png

Click to view the published output.

Since the final product is always the outcome of many small decisions that are made throughout the development phase, I thought I’d share a few of the steps and processes that went into building out this demo in hopes that it can help you next time you develop your own Engage interaction!

Select a Color Scheme

I like to choose color schemes that are bright and that have a lot of pop. This is because a design that is eye-catching will pull you in and entice you. A visually engaging course is more appealing for a learner. In this case, the emergency theme made me think of survival, which made me think of the color green. That’s how I settled on a forest green color. I also opted to make the heading and checkmarks green, to tie it all together.

Choose Appropriate Fonts

Choosing fonts can be an involved decision. Sometimes, I try out a dozen different fonts before I settle on the final result. In this example, I wanted to go with something that looked hand-written because I wanted to give the checklist a “realistic” feel. The problem with hand-written fonts is that they are sometimes choppy or hard to read, so I had to find one that is clear and easy to read. I used a standard, sans-serif font for the body text to make it easy to read.

Select Consistent Imagery

If you click through the checklist you’ll notice every item has an image. You’ll also notice all of those images are consistent in how they look: they are all isolated items on a white background, and they are all about the same width and height. This unifies the design and helps tie everything together.

Include Clear and Concise Text

If you include long chunks of paragraph in an Engage course, it will accommodate you by adding scrollbars. However, I personally like to avoid the use of scroll-bars to keep my design neater. To achieve this I purposely parred down the writing and kept it to a minimal.

Now that you’ve got some inspriation and a few tips, go on and create your own awesome Engage interactions. When you’re done, share a link to it in the comments below. We’d love to see your examples!

You can always sign up for a fully functional, free trial of Articulate software. And don’t forget to post your questions and comments in the forums! We’re here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

4 Comments
John Nixdorf