GESTALT THEORY
OVERVIEW
Gestalt is a general description for the concepts that make unity and variety possible in design. It is a German word that roughly translates as 'whole' or 'form'.
The study of gestalt originated in Germany in the 1920s. It is a form of psychology that is interested in higher order cognitive processes relative to behaviorism. The aspects of gestalt theory that interest designers are related to gestalt's investigations of visual perception, principally the relationship between the parts and the whole of visual experience. The visual world is so complex that the mind has developed strategies for coping with the confusion. The mind tries to find the simplest solution to a problem. One of the ways it does this is to form groups of items that have certain characteristics in common.
-paraphrased from http://daphne.palomar.edu/design/gestalt.html, accessed 23 Aug13 • All image sources below are linked to the picture. To see its source, click on the picture.
Gestalt is a general description for the concepts that make unity and variety possible in design. It is a German word that roughly translates as 'whole' or 'form'.
The study of gestalt originated in Germany in the 1920s. It is a form of psychology that is interested in higher order cognitive processes relative to behaviorism. The aspects of gestalt theory that interest designers are related to gestalt's investigations of visual perception, principally the relationship between the parts and the whole of visual experience. The visual world is so complex that the mind has developed strategies for coping with the confusion. The mind tries to find the simplest solution to a problem. One of the ways it does this is to form groups of items that have certain characteristics in common.
-paraphrased from http://daphne.palomar.edu/design/gestalt.html, accessed 23 Aug13 • All image sources below are linked to the picture. To see its source, click on the picture.
PROXIMITY
One Gestalt concept is Proximity, which states that when elements are placed close together, they are perceived as a group.
The example below shows 2 ways of organizing the six circles.
The example below shows 2 ways of organizing the six circles.
- In A, you should see 6 separate circles.
- B is still technically six circles, but you should also see ONE GROUP (that happens to form a triangle). In this case, it is achieved via their proximity. In other words, the six individual circles are close together and therefore, human beings will see them as a visual grouping in order to simplify the visual cha
This is what is meant by "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS". In B, we see the whole (the grouping that forms a triangle in this case) more than we see each individual part (six separate circles).
The photo below groups the 2 individuals walking near each other and separates the one walking the other way. FYI: this sample shows both proximity (the 2 girls are close together vs. the guy) and similarity (girls facing forward, guy facing the other way) to group in order to simplify the visual world. Instead of individual squares or people, our mind perceives separate groupings of individual things. We can still see the individual pieces, but our mind helps us to simplify our world by grouping. "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS."
The photo below groups the 2 individuals walking near each other and separates the one walking the other way. FYI: this sample shows both proximity (the 2 girls are close together vs. the guy) and similarity (girls facing forward, guy facing the other way) to group in order to simplify the visual world. Instead of individual squares or people, our mind perceives separate groupings of individual things. We can still see the individual pieces, but our mind helps us to simplify our world by grouping. "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS."
Though many Gestalt principles will overlap, be careful to not confuse Proximity with Similarity. For example in the photo below, the gentleman facing forward vs. those around him group by similarity (or one could think "he is facing the other direction, and is therefore DISsimilar from others around him"). However, they are all in one big group, so it doesn't illustrate Proximity very well.
If you get confused, try to imagine the items in the picture (people, nature, buildings, letters, etc.) as the simple squares vs circles. The guy facing you would be a circle surrounded by those around him as squares. The squares would group by similarity vs. the circle, but the proximity has no play here.
If you get confused, try to imagine the items in the picture (people, nature, buildings, letters, etc.) as the simple squares vs circles. The guy facing you would be a circle surrounded by those around him as squares. The squares would group by similarity vs. the circle, but the proximity has no play here.
SIMILARITY
Another Gestalt concept is Similarity, which states that things that are similar tend to be grouped together. They do not necessarily need to be physically grouped like proximity.
Both examples show grouping via similarity. In the first example, you can see the 24 circles and 40 squares individually, but your mind will more efficiently group and see lines of squares and 3 lines of circles. In the second example, you can see 36 separate squares and 13 separate circles, but your mind prefers to see it as 4 blocks with a crossed "line" made by the circles.
Remember that this is what is meant by "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS".
The image below uses similarity to group the produce. Though it is technically also proximity, the similarity aspect of color does the stronger grouping. We can still see the individual pieces of produce, but our mind helps us to simplify our world by grouping. "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS."
Remember that this is what is meant by "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS".
The image below uses similarity to group the produce. Though it is technically also proximity, the similarity aspect of color does the stronger grouping. We can still see the individual pieces of produce, but our mind helps us to simplify our world by grouping. "THE WHOLE IS GREATER THAN THE SUM OF ITS PARTS."
|
|
The example below allows us to group the similar shape and color of the toes of the shoes vs. the canvas bodies. (It also shows ambiguous Figure-Ground (see next section).
Images from: http://3.bp.blogspot.com/-NwJTIOFCwVQ/UFxsAhkXupI/AAAAAAAAALA/2CUqoEOwEBY/s1600/similarity.GIF
http://anudinam.org/wp-content/uploads/2012/06/Fruits.jpg
http://alisonjungj7510.files.wordpress.com/2012/02/unsystematic-b8cc68im0-204449-530-516.jpg
http://anudinam.org/wp-content/uploads/2012/06/Fruits.jpg
http://alisonjungj7510.files.wordpress.com/2012/02/unsystematic-b8cc68im0-204449-530-516.jpg
PRINCIPLE OF FIGURE-GROUND
The eye differentiates an object form its surrounding area. A form, silhouette, or shape is naturally perceived as figure(object), while the surrounding area is perceived as ground (background).
BASIC FIGURE-GROUND: All of the text on this page is Figure and the background white is Ground.
Balancing figure and ground can make the perceived image more clear. Using unusual figure/ground relationships can add interest and subtlety to an image. -paraphrased from http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
BASIC FIGURE-GROUND: All of the text on this page is Figure and the background white is Ground.
Balancing figure and ground can make the perceived image more clear. Using unusual figure/ground relationships can add interest and subtlety to an image. -paraphrased from http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
The tree is is the Figure in this photograph, while the sky is the Ground.
Consider what is Figure and what is Ground in this typographic layout.
AMBIGUOUS FIGURE-GROUND:
"Figure ground ambiguity is the visual illusion with two alternate viewpoints. This is similar to figure ground reversal, but the alternate image creates a totally different perception. In this version of figure ground, a pair of objects share a similar edge. This illusion is created by the inversion of figure and ground. A well-renowned figure example is Rubin’s Vase, developed by psychologist Edgar Rubin. In this image the black positive space forms two faces that appear to be ready to kiss, and the inverse negative space forms a vase. Visually the concentration on either the white or the black makes the illusion alternate between the vase and the faces." -http://605.wikispaces.com/Figure+Ground
"Figure ground ambiguity is the visual illusion with two alternate viewpoints. This is similar to figure ground reversal, but the alternate image creates a totally different perception. In this version of figure ground, a pair of objects share a similar edge. This illusion is created by the inversion of figure and ground. A well-renowned figure example is Rubin’s Vase, developed by psychologist Edgar Rubin. In this image the black positive space forms two faces that appear to be ready to kiss, and the inverse negative space forms a vase. Visually the concentration on either the white or the black makes the illusion alternate between the vase and the faces." -http://605.wikispaces.com/Figure+Ground
The photo below plays with ambiguous Figure-Ground, showing both a human skull and/or two astronauts in front of a planet.
Images from:
http://www.unesco.org/new/fileaadmin/MULTIMEDIA/HQ/ERI/images/mab2014_ecuador_03.jpg
https://maxboam.files.wordpress.com/2011/10/vog-sp1111-002.jpg
https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/
http://media-cache-ec0.pinimg.com/736x/db/ec/f9/dbecf97e33697d0657d82ccf02957870.jpg
http://www.unesco.org/new/fileaadmin/MULTIMEDIA/HQ/ERI/images/mab2014_ecuador_03.jpg
https://maxboam.files.wordpress.com/2011/10/vog-sp1111-002.jpg
https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/
http://media-cache-ec0.pinimg.com/736x/db/ec/f9/dbecf97e33697d0657d82ccf02957870.jpg
PRINCIPLE OF CLOSURE
Another principle of Gestalt is CLOSURE. For closure, the mind supplies the missing pieces to "close" a form, composition, etc.
In the image below, there is no actual lightbulb. The mind wants to close the shape formed by the hand while the hardware at the bottom aids in the suggestion of "lightbulb".
In the image below, there is no actual lightbulb. The mind wants to close the shape formed by the hand while the hardware at the bottom aids in the suggestion of "lightbulb".
The next well-known logo for World Wildlife Federation uses closure to create a panda bear.
The following are part of a designer's "Gestalphabet" where he uses human behaviorism to "close" the open forms in order to create a recognizable image. The viewer then sees A, B, C, and D when he has not actually used any of these letterforms.
Closure is often used in logos. The S in USA is formed by closure. The girls' faces in the Girl Scouts are formed by closure and Figure-Ground.
|
|
Images from:
http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/05/Gestalt-Closure.jpg
http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/image04.jpg
https://wordsarepictures.files.wordpress.com/2010/04/picture-31.png
http://sites.psu.edu/psych256fa14/wp-content/uploads/sites/14682/2014/09/usa-network.gif
https://journalism273.files.wordpress.com/2013/03/gslogo.gif?w=300&h=270
http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/05/Gestalt-Closure.jpg
http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/image04.jpg
https://wordsarepictures.files.wordpress.com/2010/04/picture-31.png
http://sites.psu.edu/psych256fa14/wp-content/uploads/sites/14682/2014/09/usa-network.gif
https://journalism273.files.wordpress.com/2013/03/gslogo.gif?w=300&h=270
LAW OF COMMON FATE and PRINCIPLE OF CONTINUITY
"The Gestalt LAW OF COMMON FATE states that humans perceive visual elements that move in the same speed and/or direction as parts of a single stimulus. A common example of this is a flock of birds. When several birds fly in the same direction, we normally assume that they belong to a single group. Birds that fly in a different direction do not appear to be included in the said group. A marching band is another example that usually exhibits the gestalt law of common fate. Below is yet another example showing this principle [as the bubbles are grouped together in their movement off the page]."
-- https://explorable.com/gestalt-laws-form-continuation-common-fate
-- https://explorable.com/gestalt-laws-form-continuation-common-fate
Common Fate is often confused with Gestalt's Principle of Continuity. Common Fate is more about suggested movement while Continuity is about resting objects that are not continuing dynamic movement.
"The principle of good continuity holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. In other words, individuals tend to group together as well as organize curves, lines and other forms that are found in similar directions. However, those that establish changes in direction may be perceived as different objects. The alignment of the objects or forms plays a major role for this principle to take effect. This principle is well used by educators in teaching young kids on how to write the letters of the alphabet as well as draw images. Below is an example showing the Gestalt law of good continuity [as you follow and connect the lines in the pattern though they don't actually connect."
-- https://explorable.com/gestalt-laws-form-continuation-common-fate
"The principle of good continuity holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. In other words, individuals tend to group together as well as organize curves, lines and other forms that are found in similar directions. However, those that establish changes in direction may be perceived as different objects. The alignment of the objects or forms plays a major role for this principle to take effect. This principle is well used by educators in teaching young kids on how to write the letters of the alphabet as well as draw images. Below is an example showing the Gestalt law of good continuity [as you follow and connect the lines in the pattern though they don't actually connect."
-- https://explorable.com/gestalt-laws-form-continuation-common-fate
Below is the iconic album cover for The Beatles Abbey Road. This shows both Common Fate and Continuity. The 4 band members walking the same direction shows Common Fate. (Consider what would happen if one were walking the other way. This would be using the Law of Common Fate via violation of it.) The law of Continuity is used on the smaller broken white lines in the middle of the street (not the crosswalk). We continue those as one line. It is easy to confuse the Law of Common Fate and Continuity. But in this case, the 4 band members are only Law of Common Fate while the lines in the street could be argued to show both.
Images from:
http://www.adorama.com/alc_images/article13706_3.jpg
http://www.barbaradelong.com/wp-content/uploads/2013/11/08162.jpg
http://cookusart.com/images/1/beatles-abbey-road/beatles-abbey-road-05.jpg
http://www.adorama.com/alc_images/article13706_3.jpg
http://www.barbaradelong.com/wp-content/uploads/2013/11/08162.jpg
http://cookusart.com/images/1/beatles-abbey-road/beatles-abbey-road-05.jpg