www.eLearningGuild.com
What Not to Design
Visual Makeovers for
e-Learning Content
Donna Safko, Mudpuddle Creations
908
April 14-17, 2008
Orlando, FL
Looks matter.
“You can’t judge a book by its cover” is a great statement when you’re trying to teach
values. It is true that “looks can be deceiving” and “the inside doesn’t always match the
outside,” but when it comes to assessing the value of elearning by its first few screens,
learners are very judgmental.
They immediately decide if it looks inviting and safe…
or intimidating and untrustworthy.
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 1
April 14-17, 2008
Orlando, FL
Simple rules.
There are some simple visual design rules that even non-designers can learn that will
really improve eLearning. It is important that a learner feels able to learn the material and
that the information is valuable. The design of each page or screen can also help the
viewer understand what concepts are most important and how each relates to the others.
Yes, even you.
If your wife has to tell you not to wear the striped tie with the plaid shirt or your craft
projects look like your puppy chewed (or worse) on them, you may not have been born
with artistic talent. That does not mean that you are destined to produce eLearning that
causes people to quit before getting to screen two. Non-designers can learn to apply the
same logic that designers innately use. Take a few minutes to familiarize yourself with
the meaning of the following terms and get ready to put out the welcome mat for your
next eLearning module.
Proximity
Alignment
Repetition
Contrast
Color
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 2
April 14-17, 2008
Orlando, FL
Rule One: Proximity = Understanding
Physical closeness implies a relationship: group related items together. Proximity can
greatly increase understanding. Use white space to separate concepts and emphasize
importance.
Rule Two: Alignment = Confidence
Nothing should be placed randomly on a page. Every item should have a visual
connection with something else. Look for a line of text, a margin, or the edge of an image
to line up with. Alignment gives a sense of calm and order.
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 3
April 14-17, 2008
Orlando, FL
Rule Three: Repetition = Consistency
Create some design rules and repeat the same elements throughout the entire project.
Repetition gives the impression that the lesson has been carefully planned.
Rule Four: Contrast = Attention
Rule Three sets up a consistency for the project. Rule four allows you to break that
consistency to increase interest and capture attention. The most common mistake made
using rule four is being shy. If you’re going to make something larger or add a new color
for contrast, make it very different than anything else on the page.
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 4
April 14-17, 2008
Orlando, FL
Rule Five: Color = Mood
It may be time to revisit the color wheel. Do you remember what the primary and
secondary colors are? Do you know how to locate complimentary and contrasting colors
on the color wheel? Take a little time and read a little about color theory. Choosing the
right colors and using them correctly throughout the other four rules can make a big
difference in attracting the intended learners.
There is not a lot I can show you on a black and white handout. I’ll just give you some
links so you can learn this part in color.
Red = Aggressive, strong & heavy
Blue = Comfort, loyalty & security
Yellow = Caution, Spring & brightness
Green = Money, health, food & nature
Brown = Nature, aged & eccentric
Orange = Warmth, excitement & energy
Pink = Soft, healthy, childlike & feminine
Purple = Royalty, sophistication & religion
Black = Dramatic, classy & serious
Gray = Business, cold & distinctive
White = Clean, pure & simple
Learning Color Theory:
http://www.tigercolor.com/color-lab/color-theory/color-theoryintro.htm#Color_Wheel
http://www.colormatters.com/colortheory.html
A Color Theory Widget for Mac Dashboard:
http://www.apple.com/downloads/dashboard/reference/colortheory.html
A Background vs. Text Picker for Mac and PC:
http://www.fujitsu.com/global/accessibility/assistance/cs/
A Color Picker Tool:
http://wellstyled.com/tools/colorscheme2/index-en.html
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 5
April 14-17, 2008
Orlando, FL
Recommended Reading.
To learn more about using Graphic Design to improve the interest and understanding of
your eLearning, take a look at the following:
Books:
The Non-Designer’s Design Book by Robin Williams
The Elements of Graphic Design by Alex W. White
Websites:
http://desktoppub.about.com/cs/graphicdesign/a/designbasics.htm
http://www.garrreynolds.com/Design/basics.html
Questions? Comments? Suggestions?
I welcome any questions, feedback and, of course, any opportunity to help make
eLearning more interesting, more beautiful and more effective for its target learner.
Donna Safko
Mudpuddle Creations
[email protected]
Session 908 – What Not to Design – Visual Makeovers for
e-Learning Content – Donna Safko, Mudpuddle Creations
Page 6