The best layout feature with…

1. The best layout feature with…

2. Visual Graphics for Instructional Design require a few standard rules

3. ONTRAST LIGNMENT IMPLICITY ROXIMITY MPHASIS EPETITION

4. 1 CONTRAST

5. Visual Graphics for Instructional Design Color Image Typography (font) CONTRAST

6. Visual Graphics for Instructional Design Color Image Typography (font) [ Distinguish the contrast ]

7. Visual Graphics for Instructional Design contrast hard to see

8. Visual Graphics for Instructional Design contrast Must be high contrast to be easily seen

9. Low contrast is for camouflage

10. Easiest way to check high contrast is if picture has clear definition when in black & white

11. This is grey scale black & white

12. This is pure high contrast black & white

13. Low contrast pictures are not clear in black & white

14. Constructivism multimedia But sometimes you purposely want confusion animation Theories of Theories of Learning typography Information Processing graphics Desktop publishing

15. 2 ALIGNMENT

16. Text1 Text2 Images ALIGNMENT

17. Text1 Text2 Images [ Arrange in a parallel order ]

18. Visual Graphics for Instructional Design Focus Graphic Layout Proportion The focus of the visual stimuli must very clearly reflect and emphasize its objective Focuson the page with no one section is heavier than the other. Or, a designer may intentionally throw elements out of balance to create tension or a certain mood. .

19. Visual Graphics for Instructional Design balance can be symmetrical

23. Visual Graphics for Instructional Design OR balance can be asymmetrical

24. asymmetricalbalance

26. Graphic Layout Proportion Center focus alignment is most Powerful but beware of poor division of information because it can cause disruption in reading

27. Graphic Layout Proportion Center focus alignment is most Powerful but beware of poor division of information because it can cause disruption in reading Focus Division of Information

28. Graphic Layout Proportion But beware! Center Focus Alignment is NOT good for multiple layer or long presentations. Center Focus tends to imply “self-containment”, thus implying “the end”. It is most effective when designing a “one-off” visual, like a poster. For longer information, if it must be symmetrical, a better layout would be the Forced Justify.

29. Graphic Layout Proportion However, the Forced Justify_alignment_is very difficult to control, as you mayfind_funny_gaps_in_between text that cannot be controlled.

30. Visual Graphics for Instructional Design best rule to remember…

31. 3 SIMPLICITY

32. SIMPLICITY

33. Keep your message simple • Use text and graphics absolutely necessary to get your point across. • Superfluous graphics can interfere with understanding. • Overabundance of fonts or colors can distract. SIMPLICITY

34. [ Simplify your presentation ]

35. Visual Graphics for Instructional Design Simplicity is the best policy “Superfluous graphics can interfere with understanding” Anglin, G., Towers, R., & Levie, H. (1996). Visual message design and learning: The role of static and dynamic illustrations. In D.H. Jonassen (Ed.), Handbook of Research for Educational Communications and Technology . New York: Simon and Schuster Macmillan.

36. Visual Graphics for Instructional Design Graphics four functions: Levie, W.H. & Lentz, R. (1982). Effects of text illustrations: A review of research. Educational Communications and Technology Journal, 30 (4), 195-232.

37. Issues to consider in Graphics: Misanchuk, E., Schwier, R. & Boling, E. (in press). Visual design for instructional multimedia

38. Visual Graphics for Instructional Design Text Should also be simple “An overabundance of fonts or colors can distract rather than assist learning” Levie, W.H. & Lentz, R. (1982). Effects of text illustrations: A review of research. Educational Communications and Technology Journal, 30 (4), 195-232.

39. Consistency & Simplicity Do NOT use more than three (3) font variations: Size Typeface Effects

40. Consistency & Simplicity Do NOT use more than three (3) font variations: Size Typeface Effects …by the way notice the Focus

41. Powerful Presentations using Creative Media for Instructional Design with maximum Impact & Effect Strategy & Tactics Using both graphics and text “The Whole is More Than the Sum of Its Parts” Wertheimer, M. (1924). Gestalt theory. Social Research, 11, translation of lecture at the Kant Society, Berlin.

42. Gestalt Theory figures adapted from examples in: Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Englewood Cliffs, NJ: Prentice Hall

43. 4 PROXIMITY

44. PROXIMITY proximity or closeness creates a bond between people and between elements on a page. How close together or far apart elements are placed suggests a relationship (or lack of) between otherwise disparate parts.

45. Gap between Texts Gap between Graphics Gap between Texts and Graphics PROXIMITY

46. Gap between Texts Gap between Graphics Gap between Texts and Graphics [ Do a suitable space within object ]

47. 5 EMPHASIS

48. EMPHASIS

49. [ You should have one main item ]

50. 6 REPETITION