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.


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

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