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.

Haverford College in Pennsylvania

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

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

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.


Learn Before

Related