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.

kandinsky-composition-8.jpg

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.

Tension created by two blocks on fulcrum being visually unbalanced

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.

The optical center is located just above the geometric center

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.

Using size, shape, volume, value, color, and perceived phsyical weight to show visual-weight

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.

structural network showing the  forces are strongest along axes and centers

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.

Taylor & Ives, home page design

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 PointsFocal 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.

old-guard.jpg

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.

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

Interior Design

Vincent Van Gogh's Starry Night

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.

Download a free sample from my book, Design Fundamentals.

7 comments

  1. Regarding color weight: could you comment on the effect of background color? For example, yellow is extremely lightweight on a white background, but on a black background, I find it has much greater optical weight. Is color contrast the real determinant of color’s visual weight?

    • What you’re seeing with the yellow text is the value-contrast

      The higher the value-contrast (between object and background), the heavier the weight of the object.

      The contrast is greater when the yellow text is on the black background so it the text itself has a higher optical weight when it’s on the black background.

      Does that make sense?

  2. Andy, good point. Every color by itself have no value, all depends on the context (background color and color of surrounding elements). In this case the background is white, a perfect grey (50% black) would be the perfect environment to compare colors.

    I also wanted to add another variable for web designers: the screen resolution. The website you put like example (http://oldguard.co.uk/) donĀ“t work for small screen resolutions since one of the 2 elements (green dot and gray dots) are out of the screen, loosing the weight effect.

    Nice reading!

    • Thanks Sergio. You know I never even thought to check the Old Guard site on a smaller screen. Never even occurred to me that some of the elements would move off screen.

      Maybe I need to start looking at more of the sites I link to on my iPad to see how they look there. :)

      Thanks for helping with Andy’s question too.

Leave a Reply

Your email address will not be published.

css.php