Visual weight & direction

Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.

We refer to this force as visual weight and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.

Note: This is the fourth post in a series on design principles. You can find the first three posts in the series here:

• Design Principles: Visual Perception and the Principles of Gestalt
• Design Principles: Space and the Figure-Ground Relationship
• Design Principles: Connecting and Separating Elements Through Contrast and Similarity

Visual Weight

Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight. Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.

In the previous post in this series I talked about primitive features, or the intrinsic characteristics of an element, such as size, color and shape. In that post I mentioned how, through these features, you can show contrast and similarity between elements.

For example, contrasting elements by making one very big and the other very small makes it clear that the elements are different.
Controlling the combination of these features is how you control visual weight. Red tends to attract the eye more than blue, and larger elements attract the eye more than smaller ones. A large red object carries more visual weight than a small blue object.

The sum of these characteristics or primitive features is what determines an element’s visual weight. It’s not any one feature, but rather their combination that determines the visual weight of an element. Some combinations of features will attract the eye more than others. To create elements of different visual weight, you would use different combinations of primitive features.

How do you measure visual weight ?

There’s no way I know of to precisely measure the visual weight of a design element. You use your experience and judgment to determine which elements have greater or lesser weight. Develop an eye and then trust it. The areas of a composition that attract your eye are those that have greater visual weight. Learn to trust your eye.

This doesn’t mean that you have to randomly try things and see what attracts your eye the most and the least. You can isolate each characteristic to know that something bigger weighs more than something smaller, for example. It’s in the combination of features that your eye will help.

Fortunately, others have isolated and tested these characteristics. Below are some of the characteristics you can change on any element and a description of how changing them will either increase or decrease the element’s visual weight.