Principles of Design: Visual Hierarchy, Contrast, Alignment and More
•
1 like•363 views
This document discusses principles of design including size, color, contrast, alignment, repetition, proximity, density and whitespace, continuation. It provides examples of how a website uses bold text to create a visual hierarchy, employs colors to categorize information, contrasts header and footer sections, creates repetitive yet attention-grabbing elements, and spaces out content for easier reading.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Principles of Design: Visual Hierarchy, Contrast, Alignment and More
- 10. u
- 11. SIZE. The use of BIG, bold type adds a level of order to this otherwise chaotic design. The eye should naturally move from big elements down to the smaller elements.
- 12. COLOR. The Spectra Viewer site uses colors to represent different news categories, so it’s easy to find a particular type of information based on the color key.
- 13. CONTRAST. The contrast between the light, airy header section and dark, earthy footer creates a distinct hierarchy of information.
- 14. ALIGNMENT. The use of BIG, bold type adds a level of order to this otherwise chaotic design. The eye should naturally move from big elements down to the smaller elements.
- 15. REPETITION. The Virgin site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention (like the red quote text).
- 16. PROXIMITY. The left “content” column is clearly separated in proximity from the sidebar widget space. Meta-data within a blog post is placed in close proximity of that post and further from other posts, reinforcing a sense of “belonging”.
- 17. DENSITY AND WHITESPACE. By spacing elements out and keeping plenty of whitespace on the page, this design makes it easier for people to roam around and find the small, densely packed boxes of content.
- 18. CONTINUATION. Continuation is a principle that is demonstrated when the eye is propelled from one object to another by implied movement. In this example, the bomb grabs our attention first because it is a strong form. The fuse on the top has a curve that moves across then down. It almost forces the user’s eyes to move along the fuse and jump to the greeting text that is anchored on a high contrast text-block with a slight green backdrop.