In this ongoing series of posts, kickstarted with our “10 Graphic Design tips for e-learning educators“, we try to provide you with the required know-how for improving the look and feel of your e-learning content. In our last post we talked about the use of color. In this one we’ll be sharing 6 tips for using images and illustrations.
1. Match your illustration to your overall aesthetic
Your e-learning theme has a certain character. Your choice of illustration should reflect and support that character. If, for example, you want to have a children friendly look for your website then use cheeky, colorful images that appeal to kids. If, on the other hand, your theme follows a minimal flat design style, use illustration that sits well with it.
Using a consistent style helps establish your content’s identity (and your branding).
2. Use pictures to tell a story
Illustration is supposed to illustrate (“serve as an example of”), not decorate.
Don’t use pictures as mere decoration or ornamental elements. Use them to tell a story and to clarify what is said in your e-learning content. Ask yourself if adding a specific picture or graphic serves this purpose ― if it doesn’t, leave it out.
That doesn’t mean your illustration should be overly technical or too detailed. Just that it should be clear and relevant to the subject matter. Don’t let decorative and aesthetic preoccupations obscure the core task of communicating a specific message and intent with your choice of imagery. Use illustration to complement your material, not to distract from it.
3. Lies, damn lies, and charts
Charts and graphs are an especially important kind of illustration, and can be essential assets in your e-learning material.
The general guidelines that hold for your image and clip art illustration also hold for charts and graphs. Use them to complement your content and tell a story, keep their style consistent with your theme’s look, etc. But there are also some guidelines that are unique to them.
Keep charts clean. Avoid extraneous elements such as needless gradients, drop shadows, 3D perspectives, etc. Charts should be clear and up to the point.
Sticking with the “up to the point” theme, avoid overloading your charts with data. If you need to show too many data points, consider using a simple table instead of a fancy bar of line chart. Avoid pie charts ― journalists and marketeers love them, but data scientists and statisticians consider them a gimmicky and inefficient type of plot.
4. The internet is not an stock image library
It might be tempting to just use random images off of the internet for your illustration needs. Don’t ― online images are usually copyrighted and using them without permission can get you into legal trouble, especially if you’re using them in a commercial setting. Then, there’s also the aesthetic aspect: using random online images will result in your content illustration lacking a common style and looking unprofessional.
If you can’t afford to hire a professional photographer or illustrator to create original artwork for your content, then the second best option is to buy stock art and pictures from a image stock service such as istockphoto.com. Stock images are (usually) of higher production standards than random web pictures, and you can buy sets of photos or drawings in the same style, something that will give your content a consistent look. An even cheaper option is clip-art and photo packs that contain thousands of photos on various topics (e.g medical, animals, computers, flowers, etc) that might be appropriate for your content.
If you have to resort to using images off of the internet, there are some places you can find quality material that is either copyright free or offered with a permissive free license. Flickr’s Creative Commons image search is a good place to look for such pictures, as is Wikimedia Commons.
5. Prepare your images appropriately
Getting the right images is just half of the story. You also have to prepare them appropriately for use in your web content.
If, for example, your website theme has specific image placeholders (as most themes do), you’ll have to check their aspect ratios and crop your images to fit in them. Too many webmasters make the mistake of distorting their images, stretching them too thin or too tall in order to make them fit. For a polished look, try to keep widths and heights consistent, and avoid having widely varying image sizes ― it looks arbitrary and unprofessional.
File size also matters. Your 4MB high quality stock photo is not suitable for web use. Use a program like Photoshop to resize and compress them, and keep your page loading times low. Use JPEG compression for photographs and detailed illustrations with subtle gradations, and PNG or GIF for images with more flat colors, such as clip art.
6. Add captions and respect usability guidelines
This one is all too easy to overlook, and all too often, it is overlooked. Take the time and effort to add proper captions to your illustration. Not just “Figure a”, but a proper short description, such as “Illustration of the human retina”.
Properly captioning your content can be tedious, but it will benefit both regular students and people with disabilities that need to use a screen reader. In fact, in a lot of countries, it’s mandatory to cater for the latter, especially if you want to qualify your e-learning material for government use.
Keep in mind that there are several kinds of captions you should fill in. Not just the visible captions below each image, but also the “alt” and “title” HTML attributes. The easy way out is to fill all of those with the same content, but semantically each serves a different purpose. The regular visible caption is meant for a short description of the image. The “alt” attribute is meant to fully describe the image to those who cannot see it (e.g people using a screen reader). Finally, the “title” attribute is meant to contain the title for the image.
