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.
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.
|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.
|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.
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 Rules of Composition: Visual Weight
- Visual weight and balance in photography
- Visual Weight Tutorial (PDF)
- 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.
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.
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?
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.
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.
lots of knowledge here for a self teaching designers here……..(Head explode)
I’m glad you liked the post. Sorry if I made your head explode. I hope it’s not too messy where you are now. Even more I hope your head is still in one piece. 🙂
This is an article that all designers or artists should read because it has great compositional tips! Thank you.
excellent post thanks!
Mr. Bradley, I am a mathematics student and the design principles of visual weight and visual balance seem that they could be augmented with mathematical principles (i.e. mathematical optimization). To your knowledge has this been done before?
Not that I’m aware, though I think it would be interesting to try. One difficulty I can foresee is visual weight is going to be subjective to a certain degree. For example I might see one color a little brighter than you so for me the element with that color would have more visual weight. Similarly we might both land on a page with a different goal and so one image might be more appealing to one of us than the other increasing its visual weight for that person.
I’m not sure how you would do it, but I think it could be interesting to try to apply some math to visual weight.
I’m a self taught photographer and learning and writing about composition. I am studying it from the neural activity in brain and visual illusions. Your article is very helpful in clarifying some of my doubts regarding hierarchy in visual weight.
I’m glad I could help.
Rudolf Arnheim is The Man! Once our eyes are opened to the Psychology of Visual Perception, our viewing is enlivened, enhanced, and ideas, even beyond those he and you offer, may flow as we examine our visual experience. To the students who would show to and discuss with him their art or design work, he was always positive and always encouraged them to “keep working”
I remember not being sure whether or not to buy the book, but I have to say I learned as much about design from reading it than just about any other source. I can imagine him being positive like that after reading the book. He comes across like a genuine and caring person.