To understand balance, think of the balance beam. When objects are of equal weight, they are in balance.	Symmetrical balance
If you have several small items on one side, they can be balanced by a large object on the other side.	Asymmetrical balance
	Asymmetrical balance (position)

Definition

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. Visual balance works in much the same way. It can be affected not only by the size of objects, but also their value (i.e.. lightness or darkness, termed visual weight).

Introduction of additional elements into simple figure/ground relationship greatly increases complexity. An understanding of visual balance is an essential aspect of good design. Balance is achieved through an equilibrium in visual weight.

Some explanations

balance--real or implied
asymmetry: opposite sides of a dividing line or central boundary are not equal
balance: (in art) an aesthetically pleasing integration of elements; a physical equilibrium
central axis: a straight line with respect to which a body or figure is symmetrical
dynamic equilibrium: when two sides of the dividing line are not symmetrical but are still balanced
functional: used to contribute to the development or maintenance of a larger whole
geometric form: of or relating to simple geometric shapes (straight lines, circles, squares)
horizontal axis: a line or a plane that is parallel to the horizon line
informal balance: balance that is not symmetrical
radial balance: balance in circular space; spherical space
representation: an artistic likeness or image
symbol: a sign, token, or thing that signifies something beyond itself
symmetry: opposite sides of the dividing line or central boundary are equal
visual imbalance: lack of balance visually; the state of being out of equilibrium

Balance in Nature
We can find examples of balance in nature, such as trees, flowers, animals, insects, etc. Nature is different than art; it is not motivated by aesthetics, but by function. Balance in nature serves a similar purpose by providing strength, stability, etc.

Nautilus shell

The logarithmic spiral can be constructed geometrically, yet it provides the basis for countless beautiful forms produced by the growth of living organisms throughout the natural world.

Types

Symmetrical balance / Formal balance

Asymmetrical balance / Informal balance / Occult balance

Radial balance (circular pattern / part of Symmetrical balance)

Symmetrical (Formal) Balance

Symmetrical balance is mirror image balance.
In this two halves of a design are identical.
If you draw a line down the center of the page, all the objects on one side of the screen are mirrored on the other side (they may not be identical objects, but they are similar in terms of numbers of objects, colors and other elements. Sometimes they are completely identical (often seen in architecture).

Symmetrical balance can be achieved through bilateral or radial symmetry. Shapes are repeated on either side of a vertical axis.

Look at this drawing of the Cathedral of Saint-Pierre in Angouleme, France. You can draw a line down the middle of the front face, and everything on either side would be mirror image.

Mario Botta
San Francisco Museum of Modern Art, 1995
Photo: Richard Barnes

Approximate symmetry

There is a variant of symmetrical balance called approximate symmetry in which equivalent but not identical forms are arranged around the fulcrum line.

Su Xinping
Tower of the Century, 1996
Oil on canvas, 76 x 153 in.
San Francisco Museum of Modern Art
Fractional and promised gift of Vicki and Kent Logan

Asymmetrical (Informal) Balance

Asymmetrical balance occurs when several smaller items on one side are balanced by a large item on the other side, or smaller items are placed further away from the center of the screen than larger items. One darker item may need to be balanced by several lighter items.

In asymmetrical Balance unlike objects have equal visual weight or eye attraction. Two sides are not exactly symmetrical, but the resulting image is still balanced. Informal balance is more dynamic than formal balance and normally keeps the learner's attention focused on the visual message.

Here, the two halves of the composition have equal visual weight but uneven distribution, tends to be more dynamic.

It is possible to balance a heavy weight with a cluster of lighter weights on equal sides of a fulcrum; in a picture, this might be a cluster of small objects balanced by a large object. It is also possible to imagine objects of equal weight but different mass (such as a large mass of feathers versus a small mass of stones) on equal sides of a fulcrum. Unequal weights can even be balanced by shifting the fulcrum point on our imaginary scale.

Although asymmetrical balance may appear more casual and less planned, it is usually harder to to use because the artist must plan the layout very carefully to ensure that it is still balanced. An unbalanced page or screen creates a feeling of tension, as if the page or screen might tip, or things might slide off the side, just as the unbalanced balance beam would tip to one side.

Ways to create visual balance

by color

by value

by shape

by position

by texture

by eye direction

Radial Balance

The third type of balance is radial balance, where all elements radiate out from a center point in a circular fashion. It is very easy to maintain a focal point in radial balance, since all the elements lead your eye toward the center. 

Katharina Fritsch
Kind mit Pudeln (Child with Poodles), 1995-96
plaster of Paris, foil, polyurethane, and paint
San Francisco Museum of Modern Art
Fractional and promised gift of Vicki and Kent Logan

Balance by Axis

Horizontal Balance
Vertical Balance
Radial Balance
Diagonal Balance

Techniques of Visual Balance

Symmetry - to ensure balance

Alignment - to establish visual relationships

Optical Adjustment - for human vision

Negative Space - shaping the display

Symmetry - to ensure balance

Symmetry in all its forms has a universal aesthetic appeal.

Symmetry ensures balance and clear organization.
This sometimes cause lack of visual interest. But the goal is effective visual communication and not to excite or entertain.

Beauty as a result of balance or harmonious arrangement. Ratio of 1:1 is the basis of all symmetry and is inherently satisfying.

Symmetry can be achieved by - repetition, rotation, reflection (mirror image).
One can identify an axis - vertical or horizontal. Vertical symmetry is more predominant in human perception.
Information on axis should be balanced.
Take a squint test.

Symmetry is historically prominent. Asymmetry is recent.

The Chinese yin-yang symbol depends on rotational symmetry to evoke the impression of duality visible in its pair of opposing yet complementary forces.

Axial symmetry is used to create balanced dialogue layouts.

Formal Balance

Informal Balance

Unbalanced

Alignment - to establish visual relationships

Alignment works best with items that have straight edges, especially rectangles. Rectangles are the most economical shapes to trim pictures into so pictures are most often seen in that format. Text is made of letters of varying shapes that form lines and blocks that act as rectangles. Most formats are also rectangles.

Aligned elements reduce complexity of display, because the display is cleaner and more understandable.

Alignment can be used to establish hierarchy.

Alignment is an important mean to establish relationships among elements regardless of their individual roles. Alignment creates attraction even when one is far away from the display.

There are two major types of alignment: edge and center.

EDGE ALIGNMENT
Any object with flat edge(s) can be used for edge alignment. Rectangles are especially well suited for this since they have four flat edges to align. Their right angels also give a sense of order to a composition using them.

Axially symmetrical layouts ensure acceptable balance in these secondary window layouts. (a-NeXTStep and b-Open Look GUI)
Axis of symmetry in (a) diagonal, (b) vertical

Common Errors
(a) Haphazard layout: The most common problem of visual organization is - the failure to establish or reinforce logical relationships among components by establishing spatial relationships within the design.
This original window layout (a) suffers from poorly organized structure in which weak relationships are established within the major component groups and practically none are established across groups. Note especially the distracting effect of the varying widths of the vertically stacked buttons.

(b) The existing design was improved considerably by reorganizing its contents and establishing stronger relations among the elements.
Alignment was used to create a strong vertical axis along which the primary fields were positioned, as well as a subordinate axis on the right-hand side of the window for secondary controls.

The redesigned layout of a window application shows the effectiveness of aligning elements to simplify display.
By re-factoring the haphazard group of five buttons at the bottom of the window (a) into two buttons and three settings - and aligning the resulting groups - the functional organization of the tool is greatly clarified.

Optical Adjustment - for human vision

For Human vision, Visual balance is perceptional rather than physical.

One can do optical adjustment to compensate for differences in shape, contour or size.

Optical adjustment applies to alignment, scaling and spacing.
Curved elements must project slightly farther beyond the margin than linear elements, while more acute angles must project even further to achieve the same effect.
The more the acute angle, more compensation is needed to maintain the proper alignment.

In Optical spacing, the rule is to equalize the area rather than the distance between the elements.
In typography, tightest spacing if reserved for adjacent characters with curved edges or horizontally projecting strokes. Widest spacing is for pairs with adjacent vertical strokes.

Visual Center
The visual center of a computer screen, located just above the screen's true center, is the focal point. Elements are placed to take advantage of the focus. Place elements requiring maximum viewer attention closer to the visual center. Arrange other objects to balance the composition.

Proper alignment of curvilinear elements to the typographic baseline and the x-height of a font requires compensation for optical effects. Curves must extend slightly beyond the point of physical alignment to create the appearance of alignment.
(after Ruder, 1981)

With physically equivalent scaling, rounded or acute forms appear too small relative to rectangular elements.

Extending rounded or acute elements slightly beyond the target dimension produces optically equivalent scaling.

Optical spacing in typography depends not on equalizing the distance between characters (a),
but on equalizing the area in the counter form between characters (b).
Due to their larger counter forms, characters with curved edges must be spaced more tightly than those with straight edges.

Negative Space - shaping the display with

Clients want to fill as much information as possible on the screen / display area.
To direct the user's eye, the so called "empty regions" are required.

Negative space (white space in print design), is not wasted space. It describes the figurative qualities of the ground on which the figure appears.

Negative space is required for proper figure-ground integration as well as for the effective manipulation of local compositional dynamics.

It is used to direct user's attention. The eye is directed to each major stopping point - the cues.

It is used to focus the viewer's attention.

Chunking of information, spatial separation of information chunks, which elements in which chunk to be bigger for focus and increasing white space around critical elements creates the best effects.

Posters designed by Josef Muller-Brockmann for the Musica Viva series.
Alignment and use of negative space has been used to show the structure and relationship of objects.

Emphasis on the Title

Modular widget set. Alignment and negative space on the left is used.

Balance
Illustration by M.C.Escher - (illusion created by Ambiguous figure/ground)

Rule of Thirds
Borrowing from photography, Another screen composition technique divides the screen into thirds. Elements of import are placed at the intersections of the grids and other screen elements arranged around them. This composition method is used extensively in photography. The dimensions of 35mm photographs are similar to those of computer monitors, so this technique lends itself to screen design.(Heinich, Molenda, Russell & Smaldino, 1996.)

http://www.kodak.com/global/en/consumer/education/programs/composition/photoProgramComp3rd1.shtml

The Golden Ratio

The Ancients' love of rhythm and proportion is still apparent in the (a) Parthenon, Athens and the (b) Temple of Concorde, Agrigento, Sicily.

The Golden Section was used to govern the overall proportions of the facade - as well as many of the internal structural relationships - in the sacred architecture of classical Greece.
The Parthenon is widely recognized as the most perfect example of centuries old tradition.

The Golden Section is formed by sweeping the diagonal from the lower midpoint of the square to the baseline, where it forms the longer side of a rectangle, whose height is the unit square. Research shows that this ratio to be the most pleasing, when viewed as a simple rectangle, of many possible alternatives. - Barratt, 1980.
It shares the property of dynamic symmetry with similarly constructed ratios like the "root2" rectangle used in the classic page layout schemes developed by medieval monks. This property allows the rectangle to be recursively subdivided into even-smaller copies of itself, each retaining the same proportion.

The nautilus shell personifies the golden ratio on the one, two and three-dimensional planes. One-dimensionally is the linear spiral, which is based on the golden ratio. Two-dimensionally, with area, the shell itself can be contained in a golden proportioned rectangle; and three-dimensionally each chamber has approximately 1.618 times more volume than the chamber preceding it.

Each segment is 1.618 times longer than the previous segment, whether it is the hand, pentagon or spiral that is been measured.

Classic layout schemes for book designs are carefully constructed to ensure harmonious relationships between parts.
This example establishes a dynamic symmetry in which the proportions of copy area, page, and the spread are identical. (Ratio of "Root2" - 1:1.5).

Case Studies

Web page design

is largely a matter of balancing the power of hypermedia Internet linkages against the ability to imbed graphics and motion media within networked Web pages.

Some home or menu pages function more like the covers of books or magazines. The idea is to draw the user into the material with a combination of text descriptions and interesting graphics related to the subjects:

Graphic has been reduced from the original size.   www.apple.com

The screen is smaller than a printed page
Graphic designers often create page grids that look great on their extra-large monitors, forgetting that most users cannot display more than about half of the typical Web page at any one time, and only 10% of Web surfers ever scroll the page.

Width of page graphics
Computer screens are typically smaller than most books or magazines. A very common mistake in Web design is spreading the horizontal width of your page graphics beyond the area most viewers can fit on their 14-15 inches display screens.

Graphic dimensions for web pages
Web page graphics should not be more than 535 pixels wide or more than about 320 pixels high, or the graphic will be too wide to print on letter size or A4 paper. Microsoft's otherwise excellent home page is too wide for many standard office monitors:

Graphic has been reduced from the original size.   www.microsoft.com

The following size recommendations are based on the typical dimension of a Web browser on a 14 inch or 15 inch Macintosh or Windows 95 screen:

Design grids for HTML pages

The grid is one of the most important design tools (especially important for translating a design to a web environment). Grids provide a consistent way of handling diversity, and relationships between text and imagery. The design becomes coherent when text and imagery are organized in a grid. It is easier for a user to follow consistency.

The grid gives a sense of order and constraint > discipline, and provides symmetry and repetition.

Consistency and predictability

A carefully organized design grid that is consistently implemented across a range of pages will aid your users in quickly finding the information they want, and will increase the reader's confidence that they are using a thoughtfully organized collection of information:

Modular widget set. Alignment is used.

Scroll arrows in (a) suffer from poor integration between figure and ground. The arrows are off-center and thus asymmetrical with respect to their ground, because their width ia an odd number of pixels, while the ground has an even number.

Blunting and centering the arrow leads to improved integration.

Icons and logos

Circle and star fused together in the classic identity symbol for Mercedes-Benz.

Internal consistency is apparent. (orthographic views and abstraction)

Balance in Icons

Variation in position and orientation.

Bold, simplified, symmetrical imagery for effective corporate identity.

Japanese Gardner's secateurs.

Some Examples

Open Balance