5 Reasons Why Good Visual Design is Important for eLearning

Next week I’ll be speaking at the 2011 Lectora User Conference on the topic: “Graphic Design for the Rest of Us”. My talk will focus on the basic elements of visual design (color, shape, type, etc), and how they can be applied effectively in Lectora to improve the visual quality of courses.

I’d argue that effective visual design of online training is just as important as effective instructional design. I’ll back up that claim with these five reasons:

Good visual design is timeless.
 Sure design fads and trends may bend or break the rules, but the overall principles of good design themselves are set in stone. Learning them makes subjective design decisions easier to make, and increases the odds your design will stand the test of time.

Good visual design is refreshing.
Unfortunately, it is not the norm to see eLearning with a strong emphasis placed on visual design. So when it actually does occur, it’s like a breath of fresh air.

Good visual design is engaging.
When the visual design of an eLearning course syncs seamlessly with the instructional content, it creates a cohesive presentation that is much more likely to keep the user engaged. It sends a message that the content deserves the user’s attention.

Good visual design aids learning.
Bad visual design can end up being so distracting that it can inhibit learning. People get turned off to poorly designed courses. These three books link cognitive research on learning to graphics and instructional design.

Good visual design is tool agnostic.
Adobe Photoshop & Illustrator are the industry standard for graphic editors, but they don’t hold a monopoly on great design. The cost and learning curve to such programs can be a barrier for many, but fortunately cheaper, simpler tools are available such as those available for free at aviary.com.

The same goes for eLearning authoring tools. Every popular authoring tool can enable good visual design principles. If not directly, then through the ability to import graphic assets created in other programs. 

Image Transparency Explained

eLearning authoring tools are great for producing web based content without having to directly code any web languages like HTML, CSS, or JavaScript. However, the web doesn’t play nice all the time. Different browsers render things differently, and there are subtle yet numerous caveats one should be aware of.

One of those caveats is image transparency. Some image types support it, others don’t, and still others only partially. To make matters worse, there is inconsistent support in older web browsers. Let’s see if we can make some sense out of all this.

Image Transparency Basics
The main file types for the web are JPEG, GIF, and PNG. PNGs can be confusing because certain image editors like Photoshop and Fireworks can save as low quality (8bit) and high quality (24bit or 32bit). Each of these image types has a varying level of transparency support as shown below when placed over a blue background:

• JPEG: Transparency not supported
• GIF: Transparency supported (Low Quality). Matte with jagged edges
• PNG 8: Transparency supported (Low Quality). Matte with jagged edges
• PNG 24: Transparency supported (High Quality). No Matte Looks great, but can be large file sizes. Doesn't work correctly in IE6

Mattes
That ugly jagged white ring around the GIF and PNG 8 is called a matte, and will show up around any soft, anti-alias (fuzzy) edges such as drop shadows. 

One trick is to change the matte color to match whatever it will overlay. In this case, a matte color matching the solid blue background will appear as seamless as the PNG 24. However this technique’s limitation is exposed when placed over a multicolored background such as a gradient or photo.

Myth: Internet Explorer doesn’t support PNG images!
In reality, Internet Explorer 6 and below only has problems rendering high quality (alpha) transparency PNGs. Low quality PNG 8 images with transparency work fine in IE6, and PNG 24 images will still display, however any transparent areas will render as a nasty grey instead. And both versions display without any problems whatsoever when there is no transparency involved.

All other major browsers and later versions of IE don’t have any major problems with image transparency. There are numerous JavaScript workarounds available to force IE6 to display alpha transparency correctly, and thankfully it becomes less and less of an issue as IE6 usage drops.