180 likes | 221 Views
Dive into the principles of balance and proximity in web design. Understand symmetrical, asymmetrical, and radial balance, as well as alignment techniques like left, right, center, and justified. Learn how proximity and Gestalt theory influence user experience. Apply these concepts to analyze and justify web designs effectively.
E N D
The Principles of Design: Balance and Proximity LESSON 8 Module 3: Designing for Communication
Lesson Overview • In this lesson, you will: • Explore the principles of balance and proximity
Guiding Questions If an adult sits on one end of a teeter-totter, how can small children balance the teeter-totter? When you walk into an environment, what do you assume about the individuals who are seated in the same area?
Balance The distribution of things Text Images Navigation buttons Guiding question: the teeter-totter
Balance Symmetrical Asymmetrical Radial
Symmetrical Balance Imaginary line drawn down the middle of the screen Do the items balance from one side to the other? This balance is common in nature Consider the example with your own face Is this screen balanced?
Asymmetrical Balance Planning is required Teeter-totter example Images can be balanced through size and intensity of color
Radial Balance Balance around a central point Resembles a circle Helpful to show connections and unity
Alignment Orientation of the text Four types Left Right Centered Justified
Left Alignment Common in European cultures We see it every day Left margin is flush; right margin is jagged The first and most common type of alignment in European cultures is left alignment. You will find left alignment of text in the book and many of the other printed materials that you use. In left alignment, items create a flush left edge. Since we read left to right, left alignment is natural to us.
Right Alignment Common in Arab cultures Opposite of left alignment Left margin is jagged; right margin is flush. Right alignment is just the opposite. The items create a flush right edge. This type of alignment is common in Arab cultures where text is read from right to left.
Center Alignment Common for titles and headings Both margins are jagged Balances text but difficult to read The third alignment produces a jagged left and right edge, center alignment. You have often seen center alignment used for titles.
Justified Alignment Common in newspapers and magazines Both margins are flush Extra space between letters and words The fourth alignment produces a flush left and right edge and is most often found in magazines and newspapers. This type of alignment is known as justified alignment. Extra space is added between words and letters to spread the text evenly across the space. It is important to select alignment to fit the audience, and purpose of the site.
Proximity Measure of distance between things Larger distances between unlike items Smaller distances between related items
White Space Area without text or images Created by proximity Used to organize
Gestalt Theory The whole is greater than the sum of the parts Grouping ideas or images together creates a stronger message than the sum of separate ideas
Assignment Use the selected Web site Analyze it according to the principles of balance and proximity Write a justification for each principle
Lesson Review • How are balance and proximity applied to Web design?