MSPTC_Logo_small.jpg

Proportion


Page Content:


Definition
Harmony
Symmetry
Balance
Size
Creating Proportion
Resources


Definition
Proportion is the relationship of two or more elements in a design and how they compare with one another. Proportion is said to be harmonious when a correct or desirable relationship exists between the elements with respect to size, color, quantity, degree, or setting. Good proportion adds harmony, symmetry, or balance among the parts of a design.

Illustration with relevant visual elements:


Harmony

The effective use of proportion in design is often referred to as harmony, a relationship in which the various elements of the composition appear as if they belong together in size and distribution.

bad-proportion.gif
good-proportion.gif
Source: http://www.bluemoonwebdesign.com/art-lessons-7.asp















Observe how the various elements in Jules Cheret’s Folies-Bergere poster give it a balanced, more complete look. The flowing costume on the left side is in proportion with the hair and leg in the right-hand side.

0000-0566-4~Folies-Bergere-La-Loie-Fuller-Posters.jpg





Symmetry

Symmetry indicates a mirror reflection in which one side of the image is identical to the other. You probably recognize DaVinci’s Virtuvian Man (bottom-left). Notice how the artist used proportion to give the appearance of symmetry in the drawing. DaVinci used the observations made by the Roman architect Vitruvius about the proportions of the human body in his own drawing. If you cut the image in half, one side is identical to the other.

Modern design uses these same concepts. The advertisement below (on the right) uses symmetry to grab your attention. The designer uses symmetry to make it appear as if all the fruit in the yogurt being advertised is all "one fruit." There is also good used of color proportion, which is discussed in more detail below.

image004.jpg

yogurt.jpg


Balance

When elements are out of proportion, they tend to look awkward or unbalanced.

Proportion is usually not noticed until it is wrong. When the relative size of two elements being compared is out of balance, they are said to be "out of proportion". If a person had a head larger than their entire body, we would say that they were out of proportion. Caricature images like the one below are often out of proportion in this way.

caricature-2.jpg

Most often, proportion is relevant to discussions of size—specifically, the size of one element compared to another. Look at the Maxfield Parrish painting on the left. Notice how the painting appears to have many layers.

Parrish accomplishes this by mastering the comparative sizes of the girl and the rock she’s sitting on in the foreground, and the mountains in the background.

parris12.jpg


















Color

Color proportion refers to how varying hues or color values compare with one another. In these instances, certain color choices and competing areas of color impact the unity of the composition or the disunity of it.

color_proportion.gif

Creating Proportion

Artists and designers use a variety of rules in creating and ensuring proportion, depending on the subject or context. For instance, the human head is divided into six equal blocks: The forehead is in the upper two blocks. The eyes fall just below the first horizontal line with the bottom of the nose just above the second horizontal line. The mouth is in the center of the lower two blocks. For figure drawing, the body is divided into lengths equal to seven and one half human heads - using the head of the subject.

Graphic designers often use the "Rule of Thirds". The page is divided into nine equal sized blocks by placing two vertical lines and two horizontal lines evenly spaced on the page. The key elements or points on the page are placed at one or more of the four intersections of the lines with the most important in the top left intersection to take advantage of the natural "F" eye movement. Examples and a more detailed explanation can be viewed at: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

Resources:


"Applying Devine Proportion to Web Designs", Smashing Magazine, May 29, 2008: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
"Art Lesson: The Principles of Good Design - Proportion", Blue Moon Original Oil Paintings: http://www.bluemoonwebdesign.com/art-lessons-7.asp
"Drawing/Sketching", About.com: http://drawsketch.about.com/library/weekly/aa121202a.htm