Enhancing Instructional Value with Graphics
description
Transcript of Enhancing Instructional Value with Graphics
![Page 1: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/1.jpg)
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
![Page 2: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/2.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
CRAP Principles in Visual Design
![Page 3: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/3.jpg)
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
![Page 4: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/4.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Alignment Examples
![Page 5: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/5.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Alignment Examples
![Page 6: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/6.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Mushy Alignment
![Page 7: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/7.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Contrast
![Page 8: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/8.jpg)
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.
![Page 9: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/9.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Contrast Example
![Page 10: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/10.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Contrast Example
![Page 11: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/11.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Contrast ExampleLess effective More effective
![Page 12: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/12.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Contrast Example LESS effective MORE effective
![Page 13: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/13.jpg)
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
![Page 14: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/14.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Proximity Example
![Page 15: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/15.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
How could proximity help this design?
![Page 16: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/16.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Before
![Page 17: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/17.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
After
![Page 18: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/18.jpg)
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.
![Page 19: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/19.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Repetition Example
![Page 20: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/20.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Repetition Example
![Page 21: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/21.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
CRAP Makeover
![Page 22: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/22.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Instructional Visuals• more interesting • more engaging• enhancing learners’ comprehension
of instructional materials.
![Page 23: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/23.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Explaining a System or Entity
![Page 24: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/24.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Explaining a Process or Procedure
![Page 25: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/25.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Presenting Numerical Facts
Number of Scouts Protecting Maasai Wilderness
![Page 26: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/26.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Presenting Numerical Facts
Percentage of Groups Using the Internet
![Page 27: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/27.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Making Comparison
Average Hours of Sleep by Adults in the US
![Page 28: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/28.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
Pointing out Specific Values
![Page 29: Enhancing Instructional Value with Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816273550346895dd2e35a/html5/thumbnails/29.jpg)
EdTech 2011, South CarolinaUnplugged Unwired
SmartArt