In this example, the power of saturated colors to attract one’s attention is used as an efficient design technique. Instead of using a background of a saturated color, the button is colored blue, helping direct attention to the right areas in a website.


Correct Applications of Saturation in Visual Weight 


Here is an example of saturation applied incorrectly in a website. When a bright and highly saturated color is chosen as a background, it strains the eyes and users have a harder time maintaining their gaze, eventually leading to lower website traffic.

Incorrect Applications of Saturation in 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

Haverford College in Pennsylvania

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.






Color in 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

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.


Learn Before

Related

Learn After