13 visual designprinciples_hierarchy
0 likes647 views
The document discusses visual hierarchy, which refers to the order of importance of the visual elements on a page. It lists some key principles for establishing visual hierarchy, including contrast, size, saturation, texture, alignment, proximity, density/whitespace, and repetition. The document provides links to additional slideshare resources on understanding and applying visual hierarchy principles in web design. It also briefly mentions affordance, which relates to how design elements provide clues about their interactive functionality.
13 visual designprinciples_hierarchy
- 1. Whats wrong with this?
- 2. What do you need to Q know/learn to fix this kind of problem? A Visual hierarchy
- 3. Visual hierarchy What is it? Where can I get some?
- 4. Contrast
- 5. Size
- 6. Saturation
- 7. Texture
- 8. Contrast
- 9. Visual hierarchy toolbox Contrast Alignment Size Proximity Color & saturation Density / White space Texture Repetition Salience (bottom- Gestalt principles of up visual attention) visual perception
- 10. Visual hierarchy How?
- 16. Visual hierarchy more? http://www.slideshare.net/antikano/understanding-visual-hierarchy-in-web-design http://www.slideshare.net/stephenpa/see-what-i-mean http://www.slideshare.net/tbisaacs/see-what-i-mean-pt-2-case-studies
- 17. click here Is this clickable? How does it work?
- 18. affordance How does it work? What is it for?
- 22. show & tell Visual hierarchy Contrast Alignment Size Proximity Color & saturation Density / White space Texture Repetition
Editor's Notes
- #2: Information design no clear hierarchy. Not clear whats most important. Hard to see, understand, find information. Give handout with this and iPhone screens. Spend 10 minutes sketching solutions on how to present this info on an iPhone app. Show 2-3 solutions on docucam.
- #3: Information design no clear hierarchy. Not clear whats most important. Hard to see, understand, find information. Give handout with this and iPhone screens. Spend 10 minutes sketching solutions on how to present this info on an iPhone app. Show 2-3 solutions on docucam.
- #12: No visual hierarchy vs. visual hierarchy. It guides the eye, points out what to look at first, second, third. What tools are used here? Proximity/ white space, alignment, color, color saturation, size.
- #13: What techniques are used here to achieve visual hierarchy? How is color used? Why is color used this way? (whats important).
- #19: Quality of an object that allows an individual to perform an action. Communicate that possibility to perform the action.
- #22: United iPhone app. Critique: visual hierarchy & affordances. What are areas/chunks? How does the app indicate clickability? How do you know whats most important? Divided into top for regular navigation and bottom for important, immediate actions.