South Carolina

EdTech 2011 Unplugged Unwired

Enhancing Instructional Value with Graphics

Applying Visual Learning Principles to Your Classroom Presentations

Dr. Corey Lee, Assistant Professor

Dr. Joe Winslow, Associate Professor & Department Chair

Dr. Jeremy Dickerson, Associate Professor

EdTech 2011, South CarolinaUnplugged Unwired

CRAP Principles in Visual Design

EdTech 2011, South CarolinaUnplugged Unwired

Alignment• Key idea: Nothing should be placed on the page

arbitrarily. Every item should have a visual connection with something else on the page.

• Strong alignment helps guide the user's eye, making the page easier to browse and drawing the eye to the most important parts of the page.

• According to Williams:– center alignment tends to look formal and can sometimes

look dull or "mushy" – strong left or strong right alignment looks more

professional and clean

EdTech 2011, South CarolinaUnplugged Unwired

Alignment Examples

EdTech 2011, South CarolinaUnplugged Unwired

Alignment Examples

EdTech 2011, South CarolinaUnplugged Unwired

Mushy Alignment

EdTech 2011, South CarolinaUnplugged Unwired

Contrast

EdTech 2011, South CarolinaUnplugged Unwired

ContrastContrast makes a page more interesting and readable

Key idea: • If two items are not exactly the same,

make them different, really different.• Shape, font face, size, weight, texture,

line, spacing, color, etc.

EdTech 2011, South CarolinaUnplugged Unwired

Contrast Example

EdTech 2011, South CarolinaUnplugged Unwired

Contrast Example

EdTech 2011, South CarolinaUnplugged Unwired

Contrast ExampleLess effective More effective

EdTech 2011, South CarolinaUnplugged Unwired

Contrast Example LESS effective MORE effective

EdTech 2011, South CarolinaUnplugged Unwired

Proximity• Key idea: Group related items together.• Proximity helps the user identify which

items go together– Close proximity implies a relationship – Use placement, size, and color to group

items that go together– Don’t be afraid of empty space! – Less is

MORE

EdTech 2011, South CarolinaUnplugged Unwired

Proximity Example

EdTech 2011, South CarolinaUnplugged Unwired

How could proximity help this design?

EdTech 2011, South CarolinaUnplugged Unwired

Before

EdTech 2011, South CarolinaUnplugged Unwired

After

EdTech 2011, South CarolinaUnplugged Unwired

Repetition• Key idea: REPEAT some aspect of the

design throughout the entire piece.

• Repetition of visual elements throughout the design unifies and strengthens it by tying together otherwise separate parts.

EdTech 2011, South CarolinaUnplugged Unwired

Repetition Example

EdTech 2011, South CarolinaUnplugged Unwired

Repetition Example

EdTech 2011, South CarolinaUnplugged Unwired

CRAP Makeover

EdTech 2011, South CarolinaUnplugged Unwired

Instructional Visuals• more interesting • more engaging• enhancing learners’ comprehension

of instructional materials.

EdTech 2011, South CarolinaUnplugged Unwired

Explaining a System or Entity

EdTech 2011, South CarolinaUnplugged Unwired

Explaining a Process or Procedure

EdTech 2011, South CarolinaUnplugged Unwired

Presenting Numerical Facts

Number of Scouts Protecting Maasai Wilderness

EdTech 2011, South CarolinaUnplugged Unwired

Presenting Numerical Facts

Percentage of Groups Using the Internet

EdTech 2011, South CarolinaUnplugged Unwired

Making Comparison

Average Hours of Sleep by Adults in the US

EdTech 2011, South CarolinaUnplugged Unwired

Pointing out Specific Values

EdTech 2011, South CarolinaUnplugged Unwired

SmartArt