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

Complexity - Visual Weight


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

Haverford College in Pennsylvania

A web page consists of elements that directly attract visual attention towards itself in the eye of the viewer. Each element has varying degrees of exertion of such a power, but in general, the more this power is exerted, the more visual attention is directed toward that particular element. These elements also have other forces that suggest to the user where they should look next, thus helping guide their direction of vision. This force is referred to as “visual weight”, and guides the direction of vision as “visual direction”. These concepts are important in thinking about user flows, rhythms and balance in a website’s layout.


Visual Direction

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

Measuring Visual Weight

"If visual weight is about attracting the eye to a particular location, then visual direction is about leading the eye to the next location. Visual direction is the perceived direction of visual forces. Think of it as the direction you would expect an element to move if it were in motion."

To control the visual direction of a website, there are several factors to consider: 

• Shape of element

• Location of elements

• Subject matter of element

• Movement

• Structural Skeleton



Learn Before

Related

Learn After