Visual Design Primer: Image and Animation Use

When you transition from being a traditional trainer for instructor-led sessions to working on e-learning projects you find out quickly there are whole new worlds of knowledge you suddenly need to acquire.

A critical example is the realm of visual design, which can have a huge impact on the learning experience you are creating.

Our clients often need to become instant experts in visual design as they move into using the dominKnow LCMS, especially if they are transitioning from a more traditional training approach. Our creative services team has created a short overview document that highlights some key issues and concepts to help give clients a head start on this transition.

In this post, we'll highlight some important things to consider when using images and animations. Over the next few posts we'll look at typography and font use as well as color theory. We'll also post up a collection of web resources on these topics, to help anyone interested in learning more.

A thought to keep in mind: Rules are meant to be broken and there's an exception to every rule. Okay, that's two thoughts, but they point to the same thing. These are good guidelines to follow, but at some point you may need to ignore or break them. Just make sure whatever you do is in the best interest of your learmers!

Images and Animation Use

General Image Considerations
Ensure that images complement and support the content.

Images should be consistent in style, and should complement each other as well. The mood of the images should be appropriate to the subject and your audience. The image above shows three different visual styles - you'll quickly recognize that they aren't equally appropriate for every learning experience, that they each have their place.

Always create images at their final size. In other words, do not use your course authoring tool settings to resize an image's pixel height or width. Scaling an image to make it appear larger on screen (scaling up) will cause it to look pixilated. The image above shows an example of this effect. Scaling to make an image appear smaller (scaling down) will mean you are using a larger-than-necessary file size, adding unnecessary bulk to your course. You should always try to minimize file size to prevent bandwidth or loading issues for your learners.

You may also reduce the number of colors or quality in your image in order to reduce the file size, thereby decreasing the time the image takes to display in your course. For example, if you save the image as a JPG, you can usually reduce the image quality and still retain an image almost identical to the quality of the original.

Stock Images
If you do not produce your own photographs or images for a course and need to obtain some from an online (or other) source, make sure that you have proper authorization to use them. This may mean purchasing the rights to the image or getting permission from its creator for its use.

You can visit stock image websites to see thousands of images that are usually available for purchase (vector images, photographs, illustrations etc.). Well-known vendors include Jupiter Images, iStockPhoto and Getty Images.

Animations
Animations often play a critical part in illustrating a concept. When adding animations make sure you pay attention to how large the file is, as this can reduce a course's playability.

Any animations used in courseware should require a cue from the learner for startup; be aware that looping animations or videos that play automatically can be distracting to the learner.

Keep all animations and videos in the control of the user, so they can start and stop them as they wish.

Next post: Typography and font use

Chris Van Wingerden is Vice President Learning Solutions at dominknow Learning Systems.