1 / 48

ABC’s R’ US to the Rescue

ABC’s R’ US to the Rescue. JOANNE BERISWILL. The Benefits of Quality Visual Design. Quality visual design can help… focus attention increase interest increase efficiency increase instructional effectiveness. Lesson Objectives. By the end of this lesson, you will be able to…

efrem
Télécharger la présentation

ABC’s R’ US to the Rescue

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related