South Carolina EdTech 2011 Unplugged Unwired Enhancing Instructional Value with Graphics Applying...

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


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


Alignment Examples


Mushy Alignment


Contrast


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.


Contrast Example


Contrast ExampleLess effective More effective


Contrast Example LESS effective MORE effective


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


Proximity Example


How could proximity help this design?


Before


After


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.


Repetition Example


CRAP Makeover


Instructional Visuals

• more interesting • more engaging• enhancing learners’ comprehension

of instructional materials.


Explaining a System or Entity


Explaining a Process or Procedure


Presenting Numerical Facts

Number of Scouts Protecting Maasai Wilderness


Presenting Numerical Facts

Percentage of Groups Using the Internet


Making Comparison

Average Hours of Sleep by Adults in the US


Pointing out Specific Values


SmartArt

South Carolina EdTech 2011 Unplugged Unwired Enhancing Instructional Value with Graphics Applying...

Documents

Transcript of South Carolina EdTech 2011 Unplugged Unwired Enhancing Instructional Value with Graphics Applying...