The  best layout  feature with…
Visual Graphics for Instructional Design require a few standard rules
ONTRAST LIGNMENT IMPLICITY ROXIMITY MPHASIS EPETITION
1 CONTRAST
CONTRAST Color Image   Typography (font) Visual Graphics for Instructional Design
[ Distinguish the contrast ] Color Image   Typography (font) Visual Graphics for Instructional Design
cont rast hard to see Visual Graphics for  Instructional Design
contrast Must be high contrast to be easily seen Visual Graphics for Instructional Design
Low contrast is for  camouflage
Easiest way to check high contrast is if picture has clear definition when in black & white
This is grey scale black & white
This is pure high contrast black & white
Low contrast pictures are  not clear  in black & white
typography Desktop publishing graphics Theories of multimedia animation Information Processing Learning Theories of Constr...
2 ALIGNMENT
ALIGNMENT Text1 Images Text2
[ Arrange in a parallel order ] Text1 Images Text2
Focus Graphic Layout Proportion The focus of the visual stimuli must very clearly  reflect  and  emphasize  its objective ...
balance can be symmetrical Visual Graphics for Instructional Design
 
 
 
OR balance can be  a symmetrical Visual Graphics for Instructional Design
a symmetrical balance
 
Center focus alignment is most Powerful but beware of poor division of information because it can cause disruption in read...
Center focus alignment  is most Powerful but beware of poor division of information because it can cause disruption in rea...
But beware!  Center Focus Alignment is NOT good for multiple layer or long presentations. Center Focus tends to imply “ se...
However,  the  Forced Justify _ alignment _ is very difficult to control, as you may   find _ funny _ gaps _ in _ between ...
Visual Graphics for Instructional Design best rule to remember…
3 SIMPLICITY
SIMPLICITY
SIMPLICITY <ul><li>Keep your  message  simple </li></ul><ul><li>Use text and graphics absolutely necessary to get your poi...
[ Simplify your presentation ]
Simplicity is the best policy “ Superfluous graphics can interfere with understanding” Anglin, G., Towers, R., & Levie, H....
Visual Graphics for Instructional Design Graphics four functions:  Levie, W.H. & Lentz, R.  (1982). Effects of text illust...
Issues to consider in Graphics: Misanchuk, E., Schwier, R. & Boling, E.  (in press). Visual design for instructional multi...
Text Should also be simple “ An overabundance of fonts or colors can distract rather than assist learning” Levie, W.H. & L...
Consistency & Simplicity Do  NOT  use more than three (3) font variations: Size Typeface Effects
Consistency & Simplicity Do  NOT  use more than three (3) font variations: Size Typeface Effects … by the way notice the F...
“ The Whole is More Than the Sum of Its Parts” Wertheimer, M.  (1924). Gestalt theory. Social Research, 11, translation of...
figures adapted from examples in:  Mullet, K. & Sano, D.  (1995). Designing visual interfaces: Communication oriented tech...
4 PROXIMITY
PROXIMITY proximity or closeness creates a bond between people and between elements on a page. How close together or far a...
PROXIMITY Gap between Texts Gap between Graphics Gap between Texts and Graphics
[ Do a suitable space within object ] Gap between Texts Gap between Graphics Gap between Texts and Graphics
5 EMPHASIS
EMPHASIS
[ You should have one main item ]
6 REPETITION
REPETITION Color Consistency Standardizes Font Type Related Shapes and Images
[ Use repetition only if you need ] Color Consistency Standardizes Font Type Related Shapes and Images
Always remember CASPER…. Thank you to: My Lecture PN Firuz H.Husin, My friend Zana, JU ICT Gombak, and others.
Upcoming SlideShare
Loading in …5
×

6308 Casper Presentationupdated2

3,106 views
2,991 views

Published on

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,106
On SlideShare
0
From Embeds
0
Number of Embeds
456
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

6308 Casper Presentationupdated2

  1. 1. The best layout feature with…
  2. 2. Visual Graphics for Instructional Design require a few standard rules
  3. 3. ONTRAST LIGNMENT IMPLICITY ROXIMITY MPHASIS EPETITION
  4. 4. 1 CONTRAST
  5. 5. CONTRAST Color Image Typography (font) Visual Graphics for Instructional Design
  6. 6. [ Distinguish the contrast ] Color Image Typography (font) Visual Graphics for Instructional Design
  7. 7. cont rast hard to see Visual Graphics for Instructional Design
  8. 8. contrast Must be high contrast to be easily seen Visual Graphics for Instructional Design
  9. 9. Low contrast is for camouflage
  10. 10. Easiest way to check high contrast is if picture has clear definition when in black & white
  11. 11. This is grey scale black & white
  12. 12. This is pure high contrast black & white
  13. 13. Low contrast pictures are not clear in black & white
  14. 14. typography Desktop publishing graphics Theories of multimedia animation Information Processing Learning Theories of Constructivism But sometimes you purposely want confusion
  15. 15. 2 ALIGNMENT
  16. 16. ALIGNMENT Text1 Images Text2
  17. 17. [ Arrange in a parallel order ] Text1 Images Text2
  18. 18. Focus Graphic Layout Proportion The focus of the visual stimuli must very clearly reflect and emphasize its objective Visual Graphics for Instructional Design . Focus on 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. 19. balance can be symmetrical Visual Graphics for Instructional Design
  20. 23. OR balance can be a symmetrical Visual Graphics for Instructional Design
  21. 24. a symmetrical balance
  22. 26. Center focus alignment is most Powerful but beware of poor division of information because it can cause disruption in reading Graphic Layout Proportion
  23. 27. Center focus alignment is most Powerful but beware of poor division of information because it can cause disruption in reading Focus Division of Information Graphic Layout Proportion
  24. 28. 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 . Graphic Layout Proportion
  25. 29. However, the Forced Justify _ alignment _ is very difficult to control, as you may find _ funny _ gaps _ in _ between text that cannot be controlled. Graphic Layout Proportion
  26. 30. Visual Graphics for Instructional Design best rule to remember…
  27. 31. 3 SIMPLICITY
  28. 32. SIMPLICITY
  29. 33. SIMPLICITY <ul><li>Keep your message simple </li></ul><ul><li>Use text and graphics absolutely necessary to get your point across. </li></ul><ul><li>Superfluous graphics can interfere with understanding. </li></ul><ul><li>Overabundance of fonts or colors can distract. </li></ul>
  30. 34. [ Simplify your presentation ]
  31. 35. 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. Visual Graphics for Instructional Design
  32. 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. helping poor readers by adding pictorial clues to decode text compensatory pictures increase comprehension to improve recollection and retention, or to provide information that is not otherwise available cognitive pictures enhance enjoyment or affect emotions and attitudes affective pictures or graphics attract attention to the material or direct attention within the material attention
  33. 37. Issues to consider in Graphics: Misanchuk, E., Schwier, R. & Boling, E. (in press). Visual design for instructional multimedia Larger pictures have more impact however, it is necessary to balance the need to have a graphic which is large with technical limitations, such as download time or computer capacity Size Users from other cultures may be offended by certain colors or graphics Culture Graphics should be as simple as possible and complexity should be added only where absolutely required Complexity Simplified drawings are better instructional aids since they focus attention on the salient points under construction Realism An essential picture which cannot be removed without harming comprehension Germaneness
  34. 38. 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. Visual Graphics for Instructional Design
  35. 39. Consistency & Simplicity Do NOT use more than three (3) font variations: Size Typeface Effects
  36. 40. Consistency & Simplicity Do NOT use more than three (3) font variations: Size Typeface Effects … by the way notice the Focus
  37. 41. “ 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. Powerful Presentations using Creative Media for Instructional Design with maximum Impact & Effect Strategy & Tactics Using both graphics and text
  38. 42. figures adapted from examples in: Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Englewood Cliffs, NJ: Prentice Hall Gestalt Theory
  39. 43. 4 PROXIMITY
  40. 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.
  41. 45. PROXIMITY Gap between Texts Gap between Graphics Gap between Texts and Graphics
  42. 46. [ Do a suitable space within object ] Gap between Texts Gap between Graphics Gap between Texts and Graphics
  43. 47. 5 EMPHASIS
  44. 48. EMPHASIS
  45. 49. [ You should have one main item ]
  46. 50. 6 REPETITION
  47. 51. REPETITION Color Consistency Standardizes Font Type Related Shapes and Images
  48. 52. [ Use repetition only if you need ] Color Consistency Standardizes Font Type Related Shapes and Images
  49. 53. Always remember CASPER…. Thank you to: My Lecture PN Firuz H.Husin, My friend Zana, JU ICT Gombak, and others.

×