Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual weight and direction to their potential movement and suggesting where you should look next.

The capacity of designer depends not only on the professional tools they are using but on the experience, understanding of the UI/UX guidelines and such basic things as visual weight and direction.

We refer to this force as visual weight and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.

Graphic design will save the world right after rock and roll does.David Carson

Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight. Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.


In the previous post in this series, we talked about primitive features, or the intrinsic characteristics of an element, such as size, color, and shape. In that post, we mentioned how, through these features, you can show contrast and similarity between elements. Also, check our top-15 tips to create a jaw-dropping UX to improve your quality to the next level.

For example, contrasting elements by making one very big and the other very small makes it clear that the elements are different.
Controlling the combination of these features is how you control visual weight. Red tends to attract the eye more than blue, and larger elements attract the eye more than smaller ones. A large red object carries more visual weight than a small blue object.

The sum of these characteristics or primitive features is what determines an element’s visual weight. It’s not any one feature, but rather their combination that determines the visual weight of an element. Some combinations of features will attract the eye more than others. To create elements of different visual weight, you would use different combinations of primitive features.

There’s no way we know of to precisely measure the visual weight of a design element. You use your experience and judgment to determine which elements have greater or lesser weight. Develop an eye and then trust it. The areas of a composition that attract your eye are those that have greater visual weight. Learn to trust your eye.

The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.Paul Rand

This doesn’t mean that you have to randomly try things and see what attracts your eye the most and the least. You can isolate each characteristic to know that something bigger weighs more than something smaller, for example. It’s in the combination of features that your eye will help.


Fortunately, others have isolated and tested these characteristics. Below are some of the characteristics you can change on any element and a description of how changing them will either increase or decrease the element’s visual weight. Remember that is always better to try than not to try, check all the common mistakes designers make to avoid wasting your time.

Need some help?

Contact us at hello@mentalstack.com and we will provide you with a detailed estimation of timing and price for your project. Give us a call at +1844.880.5473 and we will give you a solid plan of turning your idea into reality.