Principles of Design for Online Learning: A Short Guide

Created Feb. 7, 2024 by Zachary Vander Veen

As a former social studies teacher, I’ve seen a well chosen image or graph teach a lesson.

Advantages of Images

Images are perfect for conveying different types of meaning.

Consider the following examples. What does a better job at depicting intended meaning – the word or the image?

Saying Sorry
Screen_Shot_2018-01-11_at_10.44.18_AM.pngSaying Sorry

Saying Sorry

Images come in different forms and function in different places.

  • Photographs are capable of accurately depicting real-life people, objects, places and events.
  • Illustrations, including clip-art and cartoons, will not capture people, objects, places and events as faithfully as photos, but can depict what is impossible or impractical to photograph. In their relative simplicity, they may also communicate more clearly than photos.
  • Diagrams illustrate cause and effect relationships and the relationships between the parts of something and the whole. They include timelines, organagrams, maps and flow charts.
  • Charts provide a rapidly-accessible visual representation of numerical data, highlighting trends and proportions.
  • Screen shots faithfully capture the elements of a software interface.

Source: Onlinement – Part 3: Images

Disadvantages of Images

Images can lack the ability to convey precise meaning.

Images also have a tendency to lack meaning (for example, an image used for decorative purposes). Clip art does not help convey meaning.

Using Images Online: Rules of Thumb

  1. While difficult, it’s well worth it to find an image that has real meaning to the material. This takes effort.
  2. Along the same lines, avoid unnecessary imagery. It can hinder learning.
  3. Copyright is a big issue with images. While it’s easy to grab images from the web, you do not necessarily have legal rights to use those images. This is especially true when creating online classes (where the class may be distributed to many different students and school districts.
  4. The Creative Commons (search here) is a create place to find images with a CC license. Likewise, consider adding a CC license to any images you create (share and share alike!).
  5. File size is an issue for images. Try not to have large images (for example 500kb or larger) on a webpage. The larger the images are (and the number of images on a webpage) can slow load times.Keep in mind that most cameras and phones take images that have large file sizes. You’ll want  to shrink their size using tools like MS Photoeditor and Google’s Picasa.
  6. PNG file formats are great for online learning (especially screenshots and graphics). JPG works well for photos.

Combining Images with Other Elements

Images combine well with audio and text.

Return to top