Gestalt and Design: Figure-Ground
Similar to last week, this weeks principle explores the relationship between positive and negative space — the figure-ground principle
Figure-Ground
When focusing attention on a focal point(figure) the rest of the scene is filtered out and becomes the background.
Most visual elements have two sides and either side can be the object (figure) or background (ground). There are three main figure-ground relationships — stable, reversible, and ambiguous
In a stable relationship, there is an obvious difference between the figure and the ground. In the picture above, the circle is the object of focus whereas the background is shapeless and behind the circle.
In a reversible relationship, the figure and ground attract equal attention and the focal point is interchangeable depending on how it is looked at. It creates tension. The lines above could be perceived with either the dark blue lines or light blue being in front depending on where the focus is.
In an ambiguous relationship, it’s difficult to determine where the focal point is and separate the figure from the ground. This relationship often creates abstract patterns and illusions, such as the image above. It can be seen as either a woman’s face or a saxophone player.
The hero image above shows a stable relationship between the figure and the background. The colorful, vibrant phone is the obvious focal point with attention drawn to it against the white background.
Placement is also used as a way to separate an element from the background. The image above contains depth in which the figure is placed towards the bottom and appears closer whereas the top part seems further away and becomes part of the background.
Contrast is extremely powerful when creating figure-ground relationships. Image A above shows a car in the desert, with the car being the obvious focal point. However, when given an overlay in image B, the image loses its contrast and the focal point now blends in and becomes a part of the background.
Overlays are often used with popups in order to redirect the focus as seen in the image below.
A stable relationship is created here that brings attention to the popup. The black overlay is able to accomplish two things. For one, it increases the contrast between the background and the popup. It also reduces the contrast between the contents of the page, which was the former focus, in order to refocus attention on the modal.
Ambiguous relationships are often seen in logo design. In the example above, the images can be either a shell or a dolphin, depending on how it is looked at.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
- https://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.html
Check out the other articles in the Gestalt and Design series
