Weighing and Directing your Website Elements to Strike Visual Balance

Look at the big rock on the cliff’s edge in the image below. You think it might come crashing down. It is out of balance and you experience the tension of the impending crash. The users may experience similar feelings when the composition of the web page design is out of balance.

Much of what we have been discussing in the previous blogs about dots, whitespace, forms, lines, depth have been leading to visual weight, visual direction, and visual balance.

In this blog we will discuss:

• Visual Weight
• Visual Direction
• Visual Balance
• Examples

Visual Weight

Every element on a web page exerts some visual force that attracts the eyes of the viewers. The greater this force is, the more attracted viewer’s eyes are. We refer to this force as visual weight.

Physical weight is a measure of the force that is exerted by gravity on an object, however, two-dimensional objects such as elements on a web page do not have mass or any physical weight. Visual weight is the measure of the force exerted by an element to attract the eyes. Two-dimensional objects attract attention. The more an element attracts the viewer’s eyes, the greater is its visual weight.

Visual weight as an attribute is derived from a combination of many other possible attributes a design element might have. Many factors affect the perceived visual weight of the design element and most of these factors come from the work of Rudolph Arnheim. Some of these are:

• Size: larger elements have more visual weight than smaller elements.

• Shape: Elements with regular shape appear to be heavier than objects with an irregular shape. The irregularity gives a sense of mass being removed from a regular shape.

• Value: Dark elements have more visual weight than light elements.

• Colour: Warm colours like pink, red and orange advance into the foreground and weigh more than cool colours like green and blue that recede into the background. The colour red is considered to be the heaviest colour and yellow the lightest.

• Position: Website elements that are located higher in the layout are perceived to weigh more than elements that are located lower in the layout. The further away the element is from the centre or the dominant area of the layout, the greater its visual weight would be. Elements in the foreground carry more weight than elements that are present in the background.

• Texture: Textured elements appear to be heavier than non-textured elements since texture gives them a three-dimensional look.

• Orientation: Vertical objects appear to be heavier than horizontal objects. Diagonal elements carry the most weight.

• Depth: The greater the depth of an element, the greater is its visual weight.

Kadinsky’s composition uses design elements with a variety of visual weights. The dark circles in the upper left corner of the layout carries most of the weight. It is the darkest and largest element in the layout that is located at a higher rate in the composition. It has a regular shape with some whitespace around it and it overlaps with the red circle that draws the viewer’s attention.

Visual Direction

Just like how the visual forces that attract the eye’s of the viewer are known as visual weight, the direction in which the forces act and direct the eye’s of the viewer to the next location is known as visual direction. It is the perceived direction of visual forces.

We can equate visual weight with what attracts the viewer’s eyes the most or “look at me!”, we can equate visual direction with where an object leads our eyes to or “Look over there!”. The area where the viewer’s eye is led gains more attention.

As with visual weight, we can modify the characteristics of an element to suggest different directions, for example:

• Shape of element: The shape of an element might create an axis that is suggestive of direction.



• Location of an element: The visual weight of an element either attracts or repels its surrounding elements thus giving a sense of direction and movement.



• Subject matter of an element: an arrow, a finger or a gaze of the eye suggests direction.

What is Visual Balance?

Have a look at the image below and observe the large and small block on the lever

It is likely that you must have perceived the larger block in red colour being much heavier than the smaller block. Also note how our eyes get attracted to the colour red, giving it additional weight.

The dominant force acting on the red coloured block is gravity that is acting downward. You may perceive the larger block to move down on the lever. The blocks in the image may seem visually unbalanced based on the relative weights of the block and the direction of the forces acting upon them.

While we discussed the image above in physical terms, the same imbalance is perceived visually. The human visual system perceives the blocks to be out of balance in their visual weight and visual direction.

Hence, visual balance is a result of two major factors, visual weight and visual balance.

Examples

Now that we have understood the concept of visual weight and visual direction, let us check out some examples

The graphics on this design have a sense of depth because of the difference in size of the elements that increases its visual weight. Although the logo carries less weight because of the size and the menu overpowers in terms of visual weight. But it is vital to point out how the colour red in the header section draws attention.

The grid on the graphics “our services” has one of the highest visual weight because:

• The grid is red in colour that draws the viewer’s attention
• The grid has whitespace around it
• The grid sits in contrast with its background making it stand out.

Here the dominant visual direction is horizontal as the main heading, navigation bar and other elements are also horizontal.

The example shown above contains mostly all textual content. The main header “ This Sociological Life” contains the most visual weight since it is the largest piece of text and has local whitespace around it. Followed by this is the second header “Research on academic blogging: what does it reveal?” that has the most visual weight.

The words in orange and blue colour have some weight because of the contrast it has with the background, although the cool colour does not gain much attention.

The content box with the least visual weight is the text box on the right hand side “Follow blog via email”. This makes sense because the viewer’s focus is most likely directed towards the article and not the sidebar. Users tend to selectively attend to web pages and ignore the spaces where ads are usually popper to reduce their cognitive load.

The visual direction of the layout is vertical because of its long columns down the page. The whitespace between the two sections creates a vertical line further directing the composition.

Summary

All elements in a website design layout possess some visual weight and a visual direction to that force. Visual weight is a measure of how the eye of a visitor is attracted to something and visual direction is a measure of where the eye is led. A number of factors affect each and by a combination of these we balance the elements in the website layout.

Hence, the designers must learn to control the visual weight and visual direction of the design that would further lead to greater control over several other design principles, and strike a visual balance.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]