Hue is a color property that has only been recently discovered by psychologists as affecting visual weight. Even when saturation and lightness are set equal in a frame, two colors, such as red and blue, can be perceived as having different visual weights. According to research, red and blue have similar visual weight, and there is no conclusive evidence as to which is heavier. However, studies still show in general that hue is an important factor in assessing visual weight.

Hue  - Color Weight

"Darker colors carry a lot more weight than lighter ones. Lightness and darkness are powerful tools for balancing designs." 


It is uncertain why we see darker colors as heavier than lighter colors. According to research, an image is perceived as more “natural” when the darker shade is at the bottom. If the perceptual system prefers heavier objects at the bottom and lighter ones at the top, this shows that screen layout should mimic the physical environment where gravity pulls heavier objects to the bottom.


Lightness/Darkness - Visual Weight

Saturation refers to the intensity and vividness of a color. Factors such as saturation play a role in visual weight in design layouts. Objects that are bigger, brighter, and more saturated have greater visual impact than smaller, darker, or faded elements. The bigger the brightness and saturation, the more the viewer’s eyes will tend to linger on that object

Saturation - Visual Weight

Color is a big part of design, and even in plain black, white, or gray designs, the lack of color makes a statement in itself. 

Down below are some colors that are studied to have varying visual weights, arranged from the heaviest to lightest:


1. Red (heaviest)

2. Blue

3. Green

4. Orange

5. Yellow (lightest)


Color has many properties that can affect an object’s visual weight relative to others in the design: 

1) saturation

2) brightness/darkness

3) hue.






Haverford College in Pennsylvania

User use their experiences and cognitive faculties to judge and put emphasis  on certain visual features. Accordingly, design science must follow the eye’s natural movements to understand what factors visual weight depends on.


• Size

• Color

• Value

• Position

• Texture

• Complexity

• Shape

• Orientation

• Density

• Local White Space

• Intrinsic Interest

• Depth

• Saturation

• Perceived physical weight

Measuring Visual Weight

https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/


https://www.webfx.com/blog/web-design/visual-weight-designs/


https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/


https://uxplanet.org/11-ways-to-add-more-visual-weight-to-ui-object-6aca19c7bc97


https://www.smashingmagazine.com/2015/04/design-principles-compositional-flow-and-rhythm/

Visual Direction / Visual Weight References

Color in Visual Weight

Size is an obvious visual weight factor: in the natural environment, an object that’s bigger than another, given that they are the same type of object, will naturally be heavier and take up more physical space than the other.


Size - Visual Weight


In the physical world, denser (or more compact) objects are heavier than less dense, more dispersed objects. We can achieve this concept in graphical representations by using less whitespace between objects.



Density/ Proportion  - Visual Weight

More complex shapes or patterns seem heavier visually when compared to plainer shapes. A simple object, like the one on the right in the image below, can be taken in and understood almost instantly, while the element to its left takes more time to process. And because an element takes more time to process, we must look at it longer and, thus, it occupies more of our attention.

Learn Before

Related

Learn After