Visual Weight
Under Construction
Coming in 2025!
Reference -
Visual Weight
Considering their relative size, a basketball and a bowling ball appear to weigh the same. However, our experience tells us otherwise. We know that the physical weight of a bowling ball is much heavier than a basketball.
In design, however, we are limited to our perception. Although they differ in physical weight, the image above remains visually balanced because both objects compete for our attention equally.
Visual weight is the perceived weight of an element in your design. It is a measure of how much an element stands out compared to those around it.
Factors of Visual Weight
Visual weight can be altered by the size, color, contrast and/or the density of an element. Assuming all else is equal, let’s see how each of these factors have an impact on visual weight.
Visual Weight by Size
Size is the most obvious factor that contributes to visual weight. In the image below, the left square carries more visual weight than the right square.
Visual Weight by Color
Color is a less obvious contributor to visual weight. Our perception of color is relative to the colors around it. In the example below, the red square demands our attention, giving it more visual weight than the yellow square. However, as we’ll see in the next example, this is not always true.
Visual Weight by Contrast
By using the same colored squares as the previous example, we can see how contrast can drastically change our perception of color. A darker red background reduces contrast for the left square and increases contrast for the right square. This effectively switches our focus to the yellow square.
Visual Weight by Density
Despite both squares having the same overall size, color, and contrast, the right square has more visual weight due to it’s perceived density. This example illustrates how white space can play a role in creating balance.
In each of these examples, we can see how slight changes to the size, color, contrast, or density can affect the visual weight of an element on your page. As we’ll see below, these factors can be combined to help establish a sense of balance with your design.
