ABC’s R’ US to the Rescue

1. ABC’s R’ US to the Rescue JOANNE BERISWILL

2. The Benefits of Quality Visual Design Quality visual design can help… • focus attention • increase interest • increase efficiency • increase instructional effectiveness

3. Lesson Objectives By the end of this lesson, you will be able to… • Describe the components of the ABC’s R’ US visual design model • Apply the ABC’s R’ US visual design model to an actual real-world design challenge

4. Visual Characteristics The visual characteristics of elements include… • Color • Line • Position • Shape • Size • Style (typography & texture)

5. ABC’s R’ US • Alignment • Balance • Contrast • Chunking • Repetition (theme) • Utility • Simplicity

6. Alignment: Definition Alignment is … • The arrangement of visual elements either vertically or horizontally

7. Alignment: Types Horizontal Alignment • TOP • MIDDLE • BOTTOM Vertical Alignment LEFT CENTER RIGHT

8. Alignment: Example 1 • TOP • MIDDLE • BOTTOM LEFT CENTER RIGHT

9. Alignment: Example 2 • TOP • MIDDLE • BOTTOM LEFT CENTER RIGHT The sales cycle involves three distinct phases. These phases are included in the SCR sales process. In order to take advantage of this process, you will need to follow the steps outlined in the pages which follow. This process has been proven to increase sales by 500% after the initial training period has passed.

10. Alignment: Example 3 • TOP • MIDDLE • BOTTOM LEFT CENTER RIGHT Internet The Internet is used for information dissemination, collaborative work, and international commerce.

11. Balance: Definition Balance is… • the equal weight of visual elements based upon size and darkness

12. Balance: Types Types of Balance: • side to side • top to bottom

13. Balance: Example 1 Tech News ----------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------

14. Balance: Example 3

15. Balance: Example 2 ----------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------

16. Contrast: Definition Contrast = Opposites Contrast uses… • differences in color, size, style, or thickness to draw attention to visual elements and to increase legibility.

17. Contrast: Example 1 Simple From Oracle Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter. Simple From Oracle Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter. Simple From Oracle Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter. Simple From Oracle Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter.

18. Contrast: Example 2 Amazing Title Text text text text text text text text text text text text text.

19. Chunking: Definition Chunking focuses upon… • the placement of similar elements into visual “zones.”

20. Chunking: Example

21. Chunking: Example

22. Repetition/Theme: Definition Repetition refers to… • the consistent use of element forms (i.e., fonts, sizes, styles, colors) and • the consistent use of visual imagery (metaphor) to support the content.

23. Repetition/Theme: Example

24. Repetition/Theme: Example

25. Repetition/Theme: Example

26. Utility: Definition Utility addresses… • where the user is located within the instructional product and • where the user can interact with the product

27. Utility: Example

28. Utility: Example

29. Utility: Example

30. Utility: Example

31. Simplicity: Definition Simplicity addresses… • using only the key features that are needed to support the instruction

32. Simplicity: Example

33. Simplicity: Example

34. Clarification Alignment Balance Contrast Chunking Repetition (theme) Utility Simplicity CLEAR OR A LITTLE FUZZY?

35. The Costa Rica Project

36. ABC’s R’ US Alignment Balance Contrast Chunking Repetition (theme) Utility Simplicity

37. Simplicity A B C C R U S

38. Utility (Content) A B C C R U S

39. Utility (Location) A B C C R U S

40. Utility (Navigation) A B C C R U S

41. Repetition (Theme) A B C C R U S

42. Chunking A B C C R U S

43. Contrast A B C C R U S

44. Balance A B C C R U S

45. Alignment A B C C R U S

46. Alignment A B C C R U S

47. Finished Product A B C C R U S

48. http://www2.msstate.edu/~jeb559/presentations/Beriswill_ABCsRUS.pptxhttp://www2.msstate.edu/~jeb559/presentations/Beriswill_ABCsRUS.pptx http://www2.msstate.edu/~jeb559/presentations/Beriswill_ABCsRUS_Handout.doc