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 Carolina Unplugged Unwired CRAP Principles in Visual Design

EdTech 2011, South Carolina Unplugged 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 Carolina Unplugged Unwired Alignment Examples

EdTech 2011, South Carolina Unplugged Unwired Alignment Examples

EdTech 2011, South Carolina Unplugged Unwired Mushy Alignment

EdTech 2011, South Carolina Unplugged Unwired Contrast

EdTech 2011, South Carolina Unplugged Unwired Contrast Contrast 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 Carolina Unplugged Unwired Contrast Example

EdTech 2011, South Carolina Unplugged Unwired Contrast Example

EdTech 2011, South Carolina Unplugged Unwired Contrast Example Less effectiveMore effective

EdTech 2011, South Carolina Unplugged Unwired Contrast Example  LESS effective MORE effective 

EdTech 2011, South Carolina Unplugged 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 Carolina Unplugged Unwired Proximity Example

EdTech 2011, South Carolina Unplugged Unwired How could proximity help this design?

EdTech 2011, South Carolina Unplugged Unwired Before

EdTech 2011, South Carolina Unplugged Unwired After

EdTech 2011, South Carolina Unplugged 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 Carolina Unplugged Unwired Repetition Example

EdTech 2011, South Carolina Unplugged Unwired Repetition Example

EdTech 2011, South Carolina Unplugged Unwired CRAP Makeover

EdTech 2011, South Carolina Unplugged Unwired Instructional Visuals more interesting more engaging enhancing learners’ comprehension of instructional materials.

EdTech 2011, South Carolina Unplugged Unwired Explaining a System or Entity

EdTech 2011, South Carolina Unplugged Unwired Explaining a Process or Procedure

EdTech 2011, South Carolina Unplugged Unwired Presenting Numerical Facts Number of Scouts Protecting Maasai Wilderness

EdTech 2011, South Carolina Unplugged Unwired Presenting Numerical Facts Percentage of Groups Using the Internet

EdTech 2011, South Carolina Unplugged Unwired Making Comparison Average Hours of Sleep by Adults in the US

EdTech 2011, South Carolina Unplugged Unwired Pointing out Specific Values

EdTech 2011, South Carolina Unplugged Unwired SmartArt