19 Factors That Impact Compositional Balance

Imagine a boulder leaning too far over the cliff’s edge. Seeing that boulder you think it should come crashing down the mountainside. It’s out of balance and you feel the tension of the impending crash. A similar feeling happens in your visitors when the composition of your design is visually out of balance.

In a couple of previous posts I talked about visual balance and in each I briefly mentioned the idea of visual weight in order to achieve visual balance. There’s more to visual balance than I mentioned in those previous posts and I thought the topic deserving of its own post.

Composition 8 by Kandinsky (above) is a study in visual weight, direction, and balance. Notice the small circle just above the center. It’s the optical center for the work.

What is Visual Balance?

Visual balance (PDF) results from 2 major factors, visual weight and visual direction. If you think about objects in the real world it’s not hard to understand.

Consider the image below of a small block and a large block on a lever.

You likely see the larger block as being much heavier than the smaller block. Note too how your eye is attracted more toward the color red, giving additional visual weight to the block.

The main force acting on the large block is gravity which is acting downwards. There’s tension because you’d expect the large block to move down on the lever. The blocks in the image are out of balance based on the relative weights of the blocks and the direction of the forces acting on them.

While I described the image above in terms of what the image is depicting physically, the same thing is happening visually. The blocks are out of balance based on their visual weight and visual direction.

• Visual Weight– The perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of your viewer.
• Visual Direction – The perceived direction of the visual forces. It’s the direction we think an element should be moving if it was given a chance to move based on the forces acting on it.

Optical Center

Objects and elements balance around a point. In the image of the blocks it’s the fulcrum of the lever. On a page it’s the optical center. The optical center is a point that attracts the viewer’s eye unless other visual elements pull the eye elsewhere.

By default a reader’s eye will naturally start in the upper left and proceed toward the lower right, passing through the optical center. Naturally in a country that reads from right to left you would reverse things a bit.

Every shape has a geometric center. Draw 2 lines from corner to corner on a rectangle and the point where the lines meet is the geometric center. The optical center is slightly above the geometric center.

When designing you should balance your elements around the optical center and not the geometric center.

14 Factors that Influence Visual Weight

Many factors affect the perceived visual weight of your design elements and these will be summarized in the table below. Some are obvious and some not so obvious.

Most of these factors come from the work of Rudolph Arnheim, a noted author of the psychological principles of art. I’ve mixed in some other factors I discovered during my research, though many are related to Arnheim’s work and mainly add a little more detail.

Remember that visual weight is a measure of how much something attracts your eye. If you keep that in mind some of the factors below will make more sense.

Factor	Effect
Size	Larger objects appear visually heavier than smaller objects
Shape	Objects of regular shape appear heavier than irregularly shaped ones
	Objects of compact shape are visually heavier than those not compact
Form & Space	Positive forms weigh more than negative space. A large space can be balanced against a smaller positive form.
Isolation	Objects isolated in a space appear heavier than those surrounded by other elements
Density	Packing more elements into a given space gives more weight to that space. Multiple small objects can balance one larger object
Color	Red seems to be heaviest color while yellow seems to be lightest. In general warmer colors appear heavier than cooler colors.
	High-Intensity colors appear heavier than low-intensity ones. A small area of bright color can counterbalance a larger area of dull neutral color.
Value	A darker object will have more weight than a lighter object. The higher the value-contrast (between object and background), the heavier the weight of the object*
Intrinsic Interest	Complex, intricate, or peculiarly shaped objects appear visually heavier than objects not possessing these features.
Texture	An element with more complex texture is heavier visually than one with a simple texture or no texture at all. A block of text has the quality of a rough texture
Volume	3-dimensional volumes carry more mass and visual weight than 2-dimensional surfaces
Depth	The greater the depth of field of an area, the greater the visual weight it carries.
Perceived physical weight	An element that looks like a car will appear heavier than an element that looks like a feather.
Location/Position	The visual weight of an object increases in proportion to its distance from the center (or dominant area) of the composition.
	A large object placed near the center can be counterbalanced by a smaller object placed near the edge
	An object in the upper part of a composition appears heavier than an object in the lower part.
	Objects on the right of the composition appear heavier than those on the left
Orientation	Vertical objects appear heavier than horizontal objects. A diagonal orientation carries more visual weight than a horizontal or vertical one.

^*An interesting point about value is that while darker elements look heavier, experiments have shown they actually felt lighter in what’s considered the brightness-weight illusion. It’s not something we’ll worry about in our designs, but I thought it interesting.

Keep in mind that visual weight is a combination of all of the above. Your largest element on the page may also have the lightest value. Another element that’s smaller, but also bright red in color may carry more visual weight as a result.

5 Factors that Influence Visual Directions

There are several factors that affect visual direction, though not quite as many as those affecting visual weight. Where we can equate visual weight with what attracts our eye the most, we can equate visual direction with where an object leads our eye. That area where the eye is led gains more of our attention.

Once again I’ll summarize the factors in the table below.

Factor	Effect
Location of elements	The visual weight of an element attracts neighboring elements, imparting direction to them
Shape of element	The shapes of an object creates an axis that imparts directional forces in two opposing directions along that axis
Structural Skeleton	Objects appear to move along the structural axis of a design as a whole or parts of the design
Subject matter of an element	Objects in a design may naturally point in a direction. For example an arrow
	Objects opposing the intrinsic directional forces of an object can impart visual direction to other elements in the composition
Movement	Objects can be designed to appear moving in any direction

A couple more points worth mentioning. The center and the corners of the page are each magnets attracting the eye. The center is a little stronger, though, which means the point of balance between center and corner is a little closer to the corner than the center

Also because we generally read from left to right and move through a page from top left to bottom right any diagonal that runs from upper left to lower right is seen as descending. By contrast any diagonal that runs from lower left to upper right is seen as ascending. Naturally both would be reversed in cultures were reading is done right to left.

The Taylor & Ives home page above uses both visual weight and visual direction to create balance. The weight of the large and small red ampersands on the right are balanced by the navigation at the top and the text block down the left. The text block has a downward visual direction, which contributes to the two sides of the design balancing.

How Visual Weight and Direction Impact Design

Naturally visual weight and visual direction affect the balance of a composition, but understanding weights and direction give us greater control over a variety of design principles.

• Balance – Your composition needs to be in balance, whether symmetrical, asymmetrical, or radial. You’ll achieve this balance by placing elements of combined equal visual weight on either side of the optical center
• Dominance/Focal Points – Focal points are elements that attract the eye. They’re elements of greater visual weight. The dominant element of a design is the element with the greatest visual weight.
• Scale – is generally considered to be the relative size of different objects. Here we can consider it in the context of the relative visual weight of different objects.
• Proportion – is the relationship in scale between elements. Different proportions in a composition relate to different kinds of balance and can help establish visual weight and depth.
• Hierarchy – By creating a scale of focal points or elements of different visual weights you can create a hierarchy of design elements. The difference in visual weights is what makes certain elements stand out improving scanability.
• Flow – Through focal points, hierarchy, and visual direction you can lead the eye from one part of your design to the next. You’ll create a flow through your design.
• Depth – Elements with greater visual weight appear to move forward in a design while visually lighter elements recede into the background. We can use this understanding to create depth in a design.

For a practical example have a look at how Luke Wroblewski uses visual weights in the design of a web form.

Notice how visual weight is used in the Old Guard home page design above. In addition to being compositionally balanced the design uses the different weight circles to create hierarchy and flow. Similar for the text on the page. The design creates focal points and uses proportion and scale to achieve its hierarchy and flow.

Additional Resources

I drew a lot of information from the two PDFs below in writing this post and wanted to call your attention to them. The first is notes of Rudolph Arnheim’s work by Frederick F. Leymarie. The second is a PDF on map design, but it talks a great deal about visual weight, direction, and balance, as well as a variety of other design principles.

Both are relatively short and highly worth reading.

• Art and Visual Perception
• Map Design

And to show that we designers don’t have a monopoly on using these principles here are a few articles from the worlds of photography and interior design.

Photography

• Photography Rules of Composition: Visual Weight
• Visual weight and balance in photography
• Visual Weight Tutorial (PDF)

Interior Design

• Is Visual Weight Making Your Room Smaller?
• Using Visual Weight in Decorating
• Visual Weight
• Visual weight: when design is a balancing act

Van Gogh used visual weight and direction to created a balanced composition with a great amount of flow through it.

Summary

All elements in a design have a visual weight. They will also have a visual direction. Learning to control both will lead to greater control over several principles of design, most notably visual balance.

Visual weight as a measure of how much the eye is attracted to something and visual direction is a measure of where the eye is led. A number of factors affect each and through a combination of these factors we balance the elements in a composition. Some of these factors are obvious, some not so obvious, and one or two counterintuitive.

By default the point around which we balance a composition is the optical center, which sits slightly above the geometric center. The eye will naturally move through this optical center while viewing a composition unless you move this balance point through the principle of dominance.

One way you can gain a greater sense of visual weight, visual direction, and visual balance is to study your favorite works of art. Pay attention to the different elements in the composition and note which elements are being used to counterbalance others and how the combination of elements balances the composition as a whole.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.