More Related Content
Similar to Visual Principles (20)
Visual Principles
- 2. Goals of Visual Design1. Ensure legibility 2. Reduce effort (cognitive load) 3. Increase active engagement 4. Focus attention Example: http://www.kidsknowit.com/ Example: http://pbskids.org/
- 3. Role of Visual Design Reference Iconic symbol Motivate Attention Elicit emotion Simplify Storage/Retrieval Organize Illustrate relationships Increase comprehension Audience ConsiderationsVisual Literacy level
- 4. Age/Development (section vs. whole)
- 5. Culture
- 7. Preference Effectiveness Practice time Decode: View Critique Analyze Encode: Create Produce Sequence
- 8. Visual Design Processes Procedures Elements What visual and verbal components will enhance the display? Patterns What underlying pattern(s) will you choose for the elements? Arrangement How will you arrange the elements within the pattern?
- 9. Visual ElementsAnalogic Writing a Narrative Essay Realistic Organizational
- 10. Verbal ElementsLettering Style Serif ("feet") - printed text San Serif (no "feet") - online text Limit 4 (bold, italic, fonts, etc.) Size Lowercase - 1/2" = every 10 feet of viewing distance Spacing O P T I C A L S P A C I N G Color Contrast Audience needs
- 12. Have you ever read a document where the author hasdecided to center a long-ish block of text (kind oflike I am doing here?) Isn't it a little harder to read thistext when it's centered than it would be if it were left-justified?We might argue that it is just a matter of convention, thatwe are just used to reading text that is left justified. Butthe principle of alignment suggest that creating astrong implied line connecting objects on the pagecreates cohesion.
- 13. Pattern Establish an underlying pattern to decide how the viewer's eye will flow across your display. Major factors that affect the overall look: alignment of elements
- 14. shape
- 15. balance
- 16. style
- 17. color scheme and appealAlignment Placing elements within a display so they have clear visual relationship to one another.Right hand alignment
- 18. Grids keep complex alignments all lined up.
- 19. It's okay to break alignment when it serves a specific purpose such as to intentionally create tension or draw attention to a specific element of the page. (Also an example of asymmetical balance.)
- 20. Rule of Thirds, Shape and Balance "Rule of Thirds" - elements arranged along any of the one-third dividing lines take on importance and liveliness. Shape - use a pattern that attracts and focuses attention. Balance - balance is achieved when the "weight" of the elements in a display is equally distributed.
- 21. all over balance rule of thirds and asymmetrical balance
- 22. use of shape
- 23. Color Scheme Complementary colors lie opposite each other on a color wheel. Analogous colors lie next to each other on the color wheel.Warm colors exciteCool colors calm
- 24. Color Appeal Cheerios uses complementary colors to appeals to consumers. The main colors are warm, exciting colors. Johnson's uses analogous cool colors to appeal to consumers.
- 25. ArrangementProximity - put related elements close together. Directionals - are used to direct the viewers to "read" the display in a particular sequence. Contrast - Dark figures show up best on light grounds and light figures show up best on dark grounds. Consistency - Be consistent in use of elements on computer screens, overhead slides, or handouts. Examples http://coe.sdsu.edu/eet/articles/designprin1/start.htm
- 27. Visual Planning ToolsStoryboard Lettering, Size, Spacing Drawing, Sketching, Cartooning
- 29. Visual Application Challenge With your group, create a visual to utilize in your final class project using the principles discussed.
- 30. ReferencesHeinich, R, Molenda, M, Russell, J.D., & Smaldino, S.E. (Ed.). (2002). Instructional media and technologies for learning: visual principles. Columbus, Ohio: Merrill Prentice Hall.