Improving Your Designs With Gestalt Principles: Figure / Ground
Figure-ground refers to the relationship between an object and its surround. Similarity. Gestalt theory states that things which share visual characteristics such . The strongest proximity relationships are those between overlapping subjects, but just a simple example of figure-ground principle, a gestalt design principle. Figure–ground organization is a type of perceptual grouping which is a vital necessity for recognizing objects through vision. In Gestalt psychology it is known as identifying a figure from the background. Figure–ground reversal may be used as an intentional visual design technique in which an existing image's foreground.
Examples[ edit ] The most famous example of figure—ground perception is probably the faces—vase drawing that Danish psychologist Edgar Rubin described. If the two curvy edges between the black and white regions are assigned inward then the central white region is seen as a vase shape in front of a black background.
No faces are perceived in this case. On the other hand, if the edges are assigned outwards, then the two black profile faces are perceived on a white background and no vase shape is perceived.
The human visual system will then settle on either of the interpretations of the Rubin vase and alternate between them. Functional brain imaging shows that when people see the Rubin image as a face, there is activity in the temporal lobe, specifically in the face-selective region   Perceptual process[ edit ] How does the brain decide in a visual scene which item is the figure and which are part of the ground?
This perceptual decision can be based on many cues, all of which are of a probabilistic nature.
The designer's guide to Gestalt Theory | Creative Bloq
For instance, size helps us distinguish between the figure and the ground, since smaller regions are often but not always figures. Object shape can help us distinguish figure from ground, because figures tend to be convex. Movement also helps; the figure may be moving against a static environment.
There is value in doing competitive reviews to get ideas on the design paradigms and patterns used in a given product space, but this has limitations. Giving yourself a framework to think about design will make it easier for you to understand the why, and allow you to more easily and confidently create your own designs.
The Gestalt principles give you this framework. To do this, the brain perceives objects as either foreground elements things to focus on because they need our attention or background elements things that provide context, but are not as important. Creating contrast Hero images, often with a clear call to action CTA button, are currently one of the most common patterns for landing page design.
Moosehead uses a hero image with a clear foreground and background, conveyed using size, colour, and level of detail: The text the figure is white with a thin grey border and is very large, both of which make it stand out in front of the image the ground.
The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate - Gestalt Principles (3)
The contrast of the white text on the darker background also draws the eye. The background image is greyscale and has been blurred wherever there is text to ensure that the text is clearly the focus.
All of these things work together to make it clear that the text is the figure and the image is the ground. Heineken uses a movie as the background of their hero banner: Three elements immediately jump out: The box on the top right is obviously a foreground element: Notice how the background under the image is primarily blue and dark yellow, providing contrast with the border, making it pop.