Web Design 

 Lynx Users:Press Return (Enter) to skip the Menu below and jump down to start of page info

Design Theory

Site Design

Page Design

Multimedia & Web Page Design Principles: Balance

MultiMedia

Teacher Resources

Table of Contents

Home Page



Copyright © 1999 by Bonnie Skaalid

Balance

 

To understand balance, think of the balance beam. When objects are of equal weight, they are in balance. If you have several small items on one side, they can be balanced by a large object on the other side. Screen balance works in much the same way. It can be affected not only by the size of objects, but also their value (ie. lightness or darkness, termed visual weight).

Formal or Informal Balance

Formal balance is symmetrical, with the items on one side of the screen being similar in shape, size and color to the items on the other side of the screen. Formal balance is usually much easier to design - Check the photograph below, which is the Rotunda, Music Room , Halifax, 1794 from John Bland's Canadian Architexture Collection. Notice the symmetry of the house - even the wings on either end are balanced.

Pic: Rotunda, Music Room,Halifax

Informal balance is usually asymmetrical, with several smaller items on one side being balanced by a large item on the other side, or smaller items being placed further away from the center of the screen than larger items. One darker item may need to be balanced by several lighter items. (A more extensive description of ways to create informal balance is found in the section on classic graphic design balance)

When a screen is not balanced, it creates a feeling of tension, as if the screen might tip, or things might slide off the side, just as the unbalanced beam would tip to one side. As Mullet and Sano [1] discuss, many 20th Century typographic designers "discovered the greater vitality and inherent visual interest provided by active, asymmetric layouts"(p. 103). But they caution that creating asymmetric layouts is much more difficult to do, and depends on careful placement to compensate for the differences in size, position and value of the major elements of a design.


[1] Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Englewood Cliffs, NJ: Prentice Hall.
 

MM & Web Page Design Principles: [Simplicity] [Consistency] [Clarity] [Balance] [Harmony & Unity]

Page Design:[Multimedia & Web Page Design Principles] [Screen Design Research] [Screen Resolution & Size] [Writing Style]

Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]