THE PRINCIPLES OF     DESIGN  BALANCE AND PROXIMITY
LESSON OVERVIEWIn this lesson, you will:1. Explore the principle of balance as it relates to    web design, and2. Explore ...
GUIDING QUESTIONSRespond to the questions below in the DiscussionForum by creating a New Thread and labeling itBalance and...
BALANCE• Balance, as it relates to web design, is the  distribution of items on a page  • Text  • Images  • Navigation but...
TYPES OF BALANCE1. Symmetrical2. Asymmetrical3. Radial
SYMMETRICAL BALANCE• Imagine a line drawn down the middle of the  screen • Do the items balance from one side to the other...
ASYMMETRICAL BALANCE• If a designer wants to create asymmetrical  balance, some prior planning takes place.• Images can be...
RADIAL BALANCE• Balance is created around a central point • Resembles a circle• Helpful to show connections and unity betw...
ALIGNMENT• Another way to achieve balance is through  alignment.• Alignment is the orientation of the text• Four types •  ...
LEFT ALIGNMENT• Common in European cultures  • We see it every day• Left margin is flush; right margin is jagged• You will...
RIGHT ALIGNMENT• This type of alignment is common in Arab cultures  where text is read from right to left.• Opposite of le...
CENTER ALIGNMENT• Common for titles and headings• Both margins are jagged• Balances text but difficult to read
JUSTIFIED ALIGNMENT•   Common in newspapers and magazines•   Both margins are flush•   Extra space between letters and wor...
PROXIMITY• Measure of distance between things• Larger distances between unlike items• Smaller distances between related it...
WHITE SPACE• White space is the area without text or images• Created by proximity• White space can be used to organize a s...
GESTALT THEORY               THE WHOLE I S GR E ATER TH AN THE SUM OF THE P AR TSGR OUPI NG I DEAS OR I MAGES TOGETHER CR ...
LESSON REVIEWYou should be able to answer the followingquestion(s) more completely.1. How are balance and proximity applie...
ASSIGNMENT• Analyze your site according to its use of balance  and proximity based on what you have just learned.• Be sure...
Upcoming SlideShare
Loading in …5
×

Balance & Proximity

1,729 views

Published on

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

Balance & Proximity

  1. 1. THE PRINCIPLES OF DESIGN BALANCE AND PROXIMITY
  2. 2. LESSON OVERVIEWIn this lesson, you will:1. Explore the principle of balance as it relates to web design, and2. Explore the principle of proximity as it relates to web design
  3. 3. GUIDING QUESTIONSRespond to the questions below in the DiscussionForum by creating a New Thread and labeling itBalance and Proximity1. If an adult sits on one end of a teeter-totter, how can small children balance the teeter-totter?2. When you walk into an environment, what do you assume about the individuals who are seated in the same area?
  4. 4. BALANCE• Balance, as it relates to web design, is the distribution of items on a page • Text • Images • Navigation buttons• A Web site might appear unbalanced if one side of the screen is loaded with large, dark text or images. • The side where these elements are located may seem heavy.• The opposite holds true for smaller, lighter text, and images.
  5. 5. TYPES OF BALANCE1. Symmetrical2. Asymmetrical3. Radial
  6. 6. SYMMETRICAL BALANCE• Imagine a line drawn down the middle of the screen • Do the items balance from one side to the other?• This type of balance is common in nature• Consider the example with your own face.• Is this screen balanced?
  7. 7. ASYMMETRICAL BALANCE• If a designer wants to create asymmetrical balance, some prior planning takes place.• Images can be balanced through size and intensity of color • Ex: One large and darker image on one side can be balanced by several smaller, lighter images on the other side.
  8. 8. RADIAL BALANCE• Balance is created around a central point • Resembles a circle• Helpful to show connections and unity between items
  9. 9. ALIGNMENT• Another way to achieve balance is through alignment.• Alignment is the orientation of the text• Four types • Left • Right • Centered • Justified
  10. 10. LEFT ALIGNMENT• Common in European cultures • We see it every day• Left margin is flush; right margin is jagged• You will find left alignment of text in the book and many of the other printed materials that you use.• Since we read left to right, left alignment is natural to us.
  11. 11. RIGHT ALIGNMENT• This type of alignment is common in Arab cultures where text is read from right to left.• Opposite of left alignment • Left margin is jagged; right margin is flush.
  12. 12. CENTER ALIGNMENT• Common for titles and headings• Both margins are jagged• Balances text but difficult to read
  13. 13. JUSTIFIED ALIGNMENT• Common in newspapers and magazines• Both margins are flush• Extra space between letters and words• It is important to select alignment to fit the audience, and purpose of the site.
  14. 14. PROXIMITY• Measure of distance between things• Larger distances between unlike items• Smaller distances between related items
  15. 15. WHITE SPACE• White space is the area without text or images• Created by proximity• White space can be used to organize a space and is similar to the organization of a rectangle. • In text, think about how we separate paragraphs. We either indent to show a new idea or create a blank line between paragraphs and ideas. • Both of these create white space to organize the material and signal that the material is switching ideas.
  16. 16. GESTALT THEORY THE WHOLE I S GR E ATER TH AN THE SUM OF THE P AR TSGR OUPI NG I DEAS OR I MAGES TOGETHER CR EATES A STR ONGER MESSAGE TH A N THE SUM OF SEP AR ATE I DEAS
  17. 17. LESSON REVIEWYou should be able to answer the followingquestion(s) more completely.1. How are balance and proximity applied to Web design?
  18. 18. ASSIGNMENT• Analyze your site according to its use of balance and proximity based on what you have just learned.• Be sure to include the WHY for each principle. • Why did the designer use this form of balance? • Why did the designer use proximity this way?

×