Visual Weight and Visual Direction. Visual Compensation.
Caution, that’s a lot of text!
Every single element in any composition, including a web page, has a certain degree of visual attraction. The higher this degree, the more attention the element attracts. The impact of these forces may also extend to neighboring elements, predetermining the movement of the user’s eye on the page.
This phenomenon is commonly referred to as “visual weight”, and the direction this force takes is “visual direction”. Understanding these concepts is very important if you want to have a hierarchy, fluidity, rhythm, balance and of course conversion in the design of your branding.
Visual weight
Physical weight is a measure of gravity, but two-dimensional objects, such as web pages, have no mass, and therefore do not have any physical weight. Visual weight is a measure of the force with which it affects the user’s attention: the more an element attracts the eye, the greater its visual weight. Visual weight is derived from size, color and shape. Controlling combinations of these characteristics allows you to control the weight. Red is more eye-catching than blue; large elements are more likely to be noticed than smaller ones. As a consequence, a large red element has more visual weight than a small blue one.
How to measure visual weight?
There is no absolute way to accurately measure the visual weight of an item. You can use your experience and opinion to choose from several elements one with more weight, or to understand what can increase the weight of a particular object. Learn to trust your eyes: the areas of the composition that catch your attention the most have the most weight.
Here are some of the characteristics and a description of how changing them will affect the visual weight of an element:
Size. Larger items have more visual weight than smaller items.
Color. Warm colors tend to weigh more than cool colors, which recede into the background. Red is considered heavy, while yellow is relatively light.
Color Saturation. Darker elements have more weight than lighter elements.
Position. Elements at the top of a composition weigh more than those below. Elements in the foreground have more weight than background details.
Texture. Items with texture visually weigh more than items without texture. Texture adds dimensionality, which greatly increases the object’s visibility.
Form. Items with a regular shape have more weight.
Orientation. Vertical objects are heavier than horizontal ones. Diagonal elements are the heaviest.
You can’t limit everything to the characteristics described above. You can use additional properties to control the visual weight.
Density. The denser the arrangement of elements in a certain area, the more weight the group has.
Empty space. Empty space has no visual weight, so any object surrounded by empty space has more weight than a similar object placed among other elements.
Interest. Some things are more interesting than others. The more complex and interesting the element, the more attention it will attract. Also of great importance is the personal interest of the user. If he is passionate about cars, a car in the background of the city will be more interesting to him than the buildings in the background, but if his passion — architecture, then the car will recede into the background.
Not all features contribute equally to the change in visual weight. Most people will notice the color of an item before they determine the shape. Keep in mind that visual weight is a combination of the above features.
Visual Weight and Gestalt
Let’s look at how visual weight can affect the gestalt of a group.
Gestalt is a group of principles of visual perception developed in the 1920s by German psychologists. Gestalt principles are based on the theory that “an organized whole is perceived as something more than the sum of its parts.
Figure-Background. Visual weights can be used to separate the main figure and the background image. Use tools that increase the element weight for the central object and try to lighten the background.
Similarity and Contrast. You can use visual weight to emphasize the proximity of elements. Objects with the same visual weight are perceived as similar.
Centers of Gravity. Elements located at key points in a composition usually have more weight.
Past Experience. The user’s past experience determines how much he will be interested in a particular element and, consequently, determines how visually heavy this or that object is for that user.
Visual direction
If visual weight characterizes the strength of drawing attention to a particular location, visual direction tells you how effectively one object shifts attention to another. Think of it as the possible direction of an object if all the images suddenly shifted.
Visual direction serves a function similar to visual weight: it tries to get you to notice a particular part of the composition, but while weight says “Look here!”, direction says “Look there!”
As with visual weight, you can measure an object’s visual direction by changing its characteristics:
Element Shape. The shape of each of a group of elements is capable of creating a guiding axis that must have a common direction for the entire group.
Element placement. You can use the visual weight of elements to draw attention to an adjacent object.
Element. An arrow, pointing finger, or directional gaze suggests looking in a certain direction.
Movement. An item can literally go all the way through your design, and its movement will have direction.
Structural Skeleton. Every composition has a structural skeleton, along whose axes the main visual forces are directed.
Structural skeletons
In his book Art and Visual Perception: Psychology from a Creative Perspective, Rudolf Arnheim proposed the idea of the existence of a structural skeleton in every composition.
The idea is that each canvas has a structural network of visual forces. Certain points in a composition will attract our gaze even if there is nothing there.
The center and four corners of the rectangular canvas act as eye magnets. The strong magnet is in the center, although it is not the geometric center of the composition. Rather, attention will be drawn to the optical center, and it is located just above the true geometric center. The points located between the corner and the geometric center have more visual power, also the points located between the middle of each side of the canvas and its center can be referred to such visual centers.
You can use a structural skeleton by placing key objects in the visual centers, thereby increasing the visual weight of those objects.
Visual Direction and Gestalt
You can think of visual direction as real or imaginary lines that lead from one element to another: naturally, these lines should not be visible to the user.
— Connectivity. The lines connecting the elements have direction. The gaze creates an imaginary line between the eye and everything it looks at.
— Continuation. This principle refers to elements along a line or curve as if they were moving in the direction of the line or curve.
General Composition Guide
Another concept of visual direction is that each composition will have a dominant direction, whether horizontal, vertical, or diagonal.
— Horizontal direction makes the composition calm and stable.
— Vertical direction adds a sense of formality and balance.
— Diagonal direction suggests movement and action.
The dominant direction of the composition will establish the direction of most elements or perhaps a few key elements. The direction will help establish the overall mood of the composition in accordance with its overall meaning.
It is quite possible that the composition has no dominant direction: for example, the number of elements of horizontal and vertical rows may be equal. In this case, the dominant direction is determined by the peculiarities of the composition display and the subjective opinion of the user.
Summary
The visual weight of an element is a measure of how much the element draws the viewer’s eye. A visually heavy element is better at attracting attention. Visual direction is perceived as the direction of the visual forces that act on the element, or the force with which it points toward other objects.
You can control these characteristics of composition elements using their shape, color, and other properties. Also, the location of the object relative to other objects and the “canvas” has a huge impact on visual weight and direction.
Visual Compensation
Visual compensation — the ability to equalize the visual weight of an object relative to other elements, depending on the color of the shape and location of that object.
The example there is really trivial and not interesting.
If you ask any designer, “What is optical compensation?” — he will answer that it is when a circle is made larger than a square to make it look like they are the same size.
This is basic knowledge, and any beginner’s course starts with it.
And in practice, this principle is most often applied as described when you want to put something round together with something not round in the layout: add an icon to the beginning of the line or, for example, align the avatar with the description block. In such cases, the round element is made slightly larger and shifted up a couple of pixels to the left to compensate for the optical loss of weight.
But what if this principle were applied more broadly? Where there is nothing round, but one element can also lose weight relative to another element equally. For example, in shapes:
Forms can be different, but most often they consist of two equally important parts: a set of fields and a block with an action. The simplest form is a single field with a button.
The field and button are the same height, have the same weight, and work well with each other.
The form can be vertical and consist of several fields and a button. As on the authorization, for example. Here, too, everything is the same size and works well.
But the richer the set of fields becomes, the more it begins to “eat up” the weight of the block with the action. And if in a small form the weight of the button was equal to the entire set of fields, in a large form its weight becomes equal to a single field. This weakens the perception of the button as the culmination of the form.
This is better seen in the real example:
Here it is good to remember the principle of optical compensation and take a similar path: increase the weight of the button by increasing its height relative to the form fields.
Yes, this is not exactly optical compensation. The prerequisites are different. There are no optical illusions here, we are only working with visual weight. And even though the solution is the same (increase in size), the principle, for clarity’s sake, would be correctly called “visual compensation.
If you are lucky (or unlucky) and your project has a library of elements, it is enough to take from it a button one size larger. If the form fields are of size S, then the button is M, if the fields are M, then the button is L. The principle is simple.
If your project doesn’t have a library of items, this is a good excuse to start building it. Just with the most basic element — the button. The size difference in height can be from 8 to 16 pixels — as you see fit.
Many designers, for some reason, rely too much on rules they once read or design principles described by someone before them, taking them so literally that they don’t even try to look at their work with their own eyes.
DISCLAIMER: Some materials in the form of text and images is taken from the Internet for educational purposes. The author decided to collect a collection of rules and basic knowledge necessary in graphic design. The materials are not used for commercial purposes.
