The Problem with Templates

Think about the last time you created a presentation in a program like PowerPoint. Did you use one of the design templates (themes) that come pre-installed? Did you find a free template online? What led you to finally settle on the template you used? Was it personal preference, company branding, or maybe the desire to stand out from the crowd? 

I went all through college creating presentations using the same generic PowerPoint template. Why? Because I was always in a hurry to create a presentation to go with whatever class project I was working on. Template choice was an afterthought since I was graded on my project work first, presentation skills second, and presentation design dead last. 

My few (but increasing) years of working in the corporate world have revealed the same low priority is typically given to presentation design. But, at the same time, people are quick to praise a well thought-out presentation where the visual theme matches the message. It’s as if everyone unconsciously yearns for greatness, yet expects disappointment.

To the vast majority of people, design templates are quick fixes to the problem of black text on a white background. In short, anything seems better than nothing with the bulk of decision making unrelated to truly enhancing the content itself. 

But is “anything” really better than nothing? Simply switch to white text on a black background, and you have something profoundly different that worked quite well for Steve Jobs, but that doesn’t mean it works for every situation. What is the real problem a template is supposed to solve anyway? 

When you open a program like PowerPoint, you want to solve a problem by communicating an idea. How well that idea comes across to the audience is dependent upon the visual design of the slides. The other day I came to a realization about the problem, and sent out this tweet: 

“Templates are solutions to someone else's problem that may happen to mimic your own problem.”

With a pre-created template, you don’t need to worry about font pairings, the size and color of body text relative to the header, the leading (line spacing) between bullet points, or creating your own background image. Those types of tough design decisions are already implemented for you, and it’s a great time saver that keeps presentations readable at a distance.

However, at the expense of time saved, your original idea becomes boxed into someone else’s preconceived notions and design choices. You have to settle for, at best, a close fit between a visual theme and your idea. Not to mention, you risk using the same exact template as the last guy or gal who presented on a totally different idea. Will your idea still get across to the audience after all that?

So what’s the solution? Not everyone is a visual designer, I understand that. But taking the time to understand the programs we use enough to at least tweak an existing template to better support our idea can go a long way. With PowerPoint, that means reading up on what the “Master Slide” is and how it can be edited. It’s a power feature when used as intended.

Of course creating a customized template is the best solution. If possible, utilize the expertise of an organization’s marketing department or hire a designer to create custom template(s) designed specifically around an idea or a common theme you often present on.

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.