Graphic Elements

Visuals provide an attractive and effective way to convey information.

• Pros
  • Provides a quick overview
  • Stimulates thinking
  • Provides visual element
  • Illustrates concepts
• Cons
  • May need explanation
  • May oversimplify

Explore the following types of graphics you may wish to incorporate into your course:

Comics

With the introduction of easy-to-use comic software like Comic Life, it's possible to create high-quality instructional comics.

Examples of comics:

• Exploratorium from Virtual Inquiry. Explore a dozen examples.
• Howtoons - Check out the many examples of comics such as The Beaufort Scale

To learn more, read Sequential Art, Graphic Novels, & Comics: Technology-Enhanced Learning.

Graphic Organizers

Graphic organizers are one way for visual thinkers to arrange their ideas. Graphic organizers have many names including visual maps, mind mapping, and visual organizers. Although many people plan with paper and pencil, technology tools can be very helpful because they allow easy editing. It's easy to take a photo of a graphic organizer created with paper and pencil so it can be shared on the web. Inspiration is an easy to use software package for creating graphic organizers. Download a trial. You can export Inspiration documents as web pages. Try Webspiration for an online example. Check out examples such as Civil War.

Examples of graphic organizers:

• Diagram of Inspiration Workshop
• Visual Organizers
• Ws of Information Inquiry (PDF) that complements the 8Ws web page
  

Diagrams

Diagrams, line drawings, timelines, and other images are useful in online courses. Also look for scanned artifacts such as student examples.

For instance on the Inquiry - An Overview page notice the student artwork.

Examples from Shaping Outcomes

• Purpose puts it all together - diagram
• Logic model - diagram
• Looking at the whole situation - cartoon

Notice how visuals are used in the following courses:

• Anthropology of the Middle East - Image galleries: folkart, wedding song images, parade photos
• Architecture Studio: Intentions - Image galleries: studio images
• DNA Timeline - Interactive timeline
• Field Geology - Lecture notes and Image gallery
• Geodynamics Seminar - Image galleries (field trip)
• Learning from the Past - Image gallery
• Literature: Major Authors: Melville and Morrison - Image galleries
• Religious Architecture - Image gallery: lecture notes with visual elements
• Theatre Arts Topics - image gallery
• Documentary Photography and Photojournalism: Still images of a World in Motion - Image galleries: Projects

Suggestions:

• Explore the wide range of options: photographs, illustrations, maps, diagrams, etc.
• Seek public domain visual sources such as Open Clip Art Library.
  • Wikimedia Commons is a quick source for visuals.
  • Wikipedia Public Domain Images has lots of ideas.
• Consider a subscription service such as Clip Art or Photos.
• Before adding a visual elements, be sure it adds rather than distracts from the message.
• Avoid colored or complex backgrounds. Readers are accustomed to reading dark text on a white background.
• Crop graphics so only the relevant areas show.
• Resize graphics files. Use 72DPI and around 200 width/200 height for images that supplement the written material.
• Use thumbnails and links to larger images for diagrams, charts, and other information that requires detail.
• Save as .jpg or .gif. If you’re using Fireworks, use the Export Wizard to help you build the smallest size files.
• Consider using color thematically. In other words, select a few colors that might be used throughout your website for navigation, lines, and other visual elements. Use color to indicate specific functions such as navigation, examples, practice, or review.
• Small visuals can be used to indicate types of information or activities. For instance, right and left arrows can be used for navigation. A pencil icon might be use for written activities.
• Use ALT text and describe the visual in the text.

Learn more about Illustrations from High Tech Learning.

Photographs

Use photographs to illustrate concepts and provide additional information. These may be original works such as those taken on a field trip or resources from government or other public domain locations.

Examples from Shaping Outcomes

• Gathering data for report - photo objects

Notice how visuals are used in the following courses:

• Film Experience, The - Image galleries (Public Domain Films), images and clips
• Furniture Making - Image galleries
• Game Design - Image galleries
• Sedementary Geology - Image galleries
• Structure of Earth Materials - image galleries
• Virtual Lab Book, The for Molecular Biology, College of Charleston - Streak plate and Spread plate examples

Learn more about Illustrations and Photographs from High Tech Learning.

Locating Images

Find links to images at Visual Resources: Clipart, Photos, and Visual Indexes from Teacher Tap.

Find links to Public Domain/Copyright Free Media at Teacher Tap.

Apply It!
Go to Taxonomy of Information Patterns for lots of examples of visual information patterns.
Try the Finding Information Patterns activity.

---