The Principles of Design: Balance and Proximity LESSON 8 Module 3: Designing for Communication The Principles of Design: Balance and Proximity

Lesson Overview In this lesson, you will: Explore the principles of balance and proximity Lesson 8 Overview

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? Use the guiding questions as a class starter, allowing the students time to answer the questions in their journal. Discuss student answers to the questions.

Balance The distribution of things Text Images Navigation buttons Guiding question: the teeter-totter Balance is the distribution of items. In a Web site, balance is the distribution of such things as text, images, and navigation. 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. Think back to the guiding question at the beginning of class. How can a group of children balance a teeter-totter with an adult on one end? One larger adult can be balanced by several smaller children on the other end. This same idea works with Web design. One larger, darker image can be balanced on the other side by several smaller, lighter images.

Balance Symmetrical Asymmetrical Radial There are three types of balance that can be achieved on a Web site: symmetrical, asymmetrical, and 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? There are three types of balance that can be achieved on a Web site: symmetrical, asymmetrical, and radial.

Asymmetrical Balance Planning is required Teeter-totter example Images can be balanced through size and intensity of color If a designer wants to create asymmetrical balance, some prior planning takes place. Think back to the teeter-totter question. One large and darker image on one side can be balanced by several smaller, lighter images on the other side. This is the same concept as asymmetrical balance. A designer can place a larger, darker image on one side of the screen with several smaller, lighter images on the other side to balance things out. Instructor: Feel free to add elements to design an asymmetrical slide.

Radial Balance Balance around a central point Resembles a circle Helpful to show connections and unity Radial balance is balance that is created around a central point. Radial balance will usually resemble a circle. This type of balance is useful when trying to connect items or to show unity between the items.

Alignment Orientation of the text Four types Left Right Centered Justified Another way to achieve balance is through alignment. Alignment is the orientation of the text. There are four types of alignment, two of which create a sense of balance. The four types of alignment are left, right, centered, and 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. Left alignment is most commonly used in European cultures. You see left alignment every day in the print material that you read. In left alignment, the left margin of the text is flush while the right margin is jagged.

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. Right alignment is most commonly used in Arab cultures. It is the opposite of left alignment. In right alignment, the left margin is jagged while the right margin is flush.

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. Center alignment is commonly used for titles and headings. In center alignment, both the left and the right margins are jagged. Center alignment is a way to easily balance text but is difficult to read.

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. Justified alignment is commonly found in newspapers and magazines. In justified alignment, both the left and right margins are flush. To accomplish this extra spacing may be added between words and letters to create flush margins.

Proximity Measure of distance between things Larger distances between unlike items Smaller distances between related items Proximity is the measure of distance between things and can be used to send a message. Remember the question from the beginning of class. When you walk into class and choose to sit far away from someone who is unlike you, you might be sending a message. A large distance between objects sends the message that they are unlike too. Objects that are grouped together are seen as similar.

White Space Area without text or images Created by proximity Used to organize An idea that is related to proximity is white space. White space is an area without text or images. This is the space 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.

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 White space and proximity are also parts of the Gestalt Theory which states that the whole is greater than the sum of the parts. By grouping information or images together, a greater idea is created than if the information or images were separate from each other. The right image adds proximity to the image. What design principle could have been used to enhance the image even more? (Answer: A line or arrow connecting the steps.)

Assignment Use the selected Web site Analyze it according to the principles of balance and proximity Write a justification for each principle Discuss the assignment as listed above. Students should be given time in class to complete work on the Principles Assessment Project. This gives the classroom teacher time to evaluate the level of student understanding of the assignment and to make changes or clarifications as needed. Remind students of the due date for the assignment.

Lesson Review How are balance and proximity applied to Web design? This is the last slide of the presentation.