Gestalt Design Principles

link

Introduction

I will be speaking about the Gestalt design principles and how they relate to graphic design. Gestalt means 'unified whole,' a common way to also describe graphic design where elements are arranged in such a way that the end design looks more connected, coherent, and complete. When we look at visual information, our brains cannot take it all in, so we sort out what is most important. For example, our eyes pay attention to color value, meaning our brains focus on brightly colored objects when they are surrounded by a duller background since it makes the objects pop out, letting our brain choose the more important element. For this reason, I have colored important terminology in a higher color value (bright red) than the rest of my text so you will notice and hopefully remember the key words. However, if everything is brightly colored, then our brains cannot sort out what is the most important, making the picture appear to shake and our brains hurt. As a result, good graphic design uses ideas like this to accentuate vital elements without overwhelming the brain. Gestalt principles take advantage of the eye's basic cues to exemplify design, but before we get into his key ideas, let us understand where his principles come from.

History

During the 1920s German Psychologists, such as Max Wertheimer, Wolfgang Kohler, and Kurt Koffka, hypothesized theories about visual perception: the specific arrangements of elements that let viewers group different objects into a single design. Over the next thirty years, these theories were developed even further, catalyzed by Rudolf Arnheim's book, Art and Visual Perception: A Psychology of the Creative Eye. In Arnheim's book, he summarizes the six Gestalt principles below.

Principles

Similarity

It is important to incorporate similarities throughout design, for like elements are not seen as individual objects, but rather as a pattern or group. A simple illustration can be created by a series of similar, but separated, elements. In the pictures below, the one to the left is not just a mass of recycling symbols, but also a villainous mask. Using this principle, the graphic design artist was able to portray recycling, evil, and its connection in a nice design. Our mind picks out the important elements, revealing the shape of a mask. However, the middle picture has an anomaly, the shorter girl. She is different since she is surrounded by taller people, grabbing our attention. The album cover to the right uses a combination of similarities, all pictures are of the same person, and anomalies, each picture has the person making a different facial expression. In these designs there are repetitions of similar objects: recycling symbols and people.

link                                                                           link                                                                       link

link

                                                                                                                                       
In this example, there are similarities between the Pepsi logo and the smiles, but anomalies between the different expressions. This design uses Gestalt's principle to exemplify that Pepsi brings all different smiles to people.

Continuation

                    link                                                                        link                                                     link

This is the principle that involves the path your eye follows.  As seen in the
images above,it is natural to follow specific patterns. For example, in the

link

picture to the left, your eye naturally follows the light blue path, and in the middle picture, your eye makes up the most obvious path to connect the two dotted paths which is hidden by the black rectangle; the path is a straight line, not a billion loops, under the rectangle. As for the image to the right, when you see two curvy lines of the same color, you naturally assume they are two lines crisscrossing on top of each other, not two separate lines connecting at a point. Graphic design draws your attention by using your natural eye direction. Since you only absorb the important information, continuity makes the job easier by showing viewers what the artist thinks is vital, which will hopefully be remembered after a quick glance. In the picture directly to the right, your eye continues in the direction of the design and you see Waldo. In the picture below, the continuity draws your eye to the soccer ball, making you associate it with the word "UMBRO."

link

Closure

link

This principle incorporates the technique of using gaps in figures. Your mind will supply the information to connect the pieces and fill in the composition. Since your brain tries to decrease the amount of information it takes in, it groups the pieces and gaps into a unit. Humans have a tendency to see closed shapes, so closure is in affect when an object is incomplete or its interior space is not fully closed. However the viewer perceives the shape by filling in the missing information. In the surrounding pictures, a sphere, dog, fork, bottles, and square are not drawn, but can be seen since they are blocked off, grouped, and cut out by surrounding elements.Some approach this idea by drawing lines to correctly place objects, and later they erase the boundaries to create the illusion of a closed figure.

link                                                                      link                                                                        link

Proximity and Alignment

link

link

The relationship of one object to another is important when creating design. When certain objects are close, they are grouped together. This principle was also mentioned under "similarities," referring to the recycling symbols. There not only was a repetition of symbols, but they were also considered a unit, the villainous mask. The birds to the right are perceived as a person because of their proximity whereas the birds to the left are perceived as separate units since their proximity does not

link

form any pattern. Similarly, the black blocks in the image below are so far apart that they cannot be considered a unit. However, the images below and to the left contain the same number of circles, but their proximity is different, making their figures different: a square verses lines. Moreover, the images below and to the right are perceived the same, a square, even though they are made up of different elements since they have the same proximity. Also depending on proximity, objects can give the illusion of depth; the triangles in the picture above become smaller and further away, appearing as if they are off in the distance. Many approach this principle as if the objects were placed on a grid, where grouped elements would follow the same lines on the grid and be within only a few blocks on the grid.                                                  

     link                                                                   link                                                   link

Figure/Ground

link

This concept uses the idea of light and dark shading to make specific images pop, similar to how I color coded the terminology. Objects in the foreground are seen as the figures and the surrounding area is called the ground. There can by ambiguity, where the designer intentionally allows some figures and ground to not fully express their roll as a form, shape, or silhouette. However, there is

link

always this tendency to see, focus, and separate the figures and ground. The background can either help accentuate the figure or be another figure entirely. In the above picture, you can perceive the figure to be two turtles or the ground to be the liberty bell. However in the figure to the left, the ground helps exemplify the figure, tree. Although the tree essentially ends when its black branches morph into the surrounding area, you can still see the tree with the help of the ground to create negative space. The background provides the visual cues to see the figure. In the image below, the figures on the left side of the picture are white while the figures on the right side of the picture are black, but in the middle the figures mold into the ground, where it becomes ambiguous. It is uncertain to which color is the ground and figure because they do not stay constant throughout the image, as well as, where the ground and figures change roles for they morph in and out of one another. The appearance of the figure and ground, though they look simple, play a large role in graphic design.

link

Symmetry and Order

Symmetry and order are important in a composition in order to avoid a sense of disorder or imbalance. This way, viewers can focus on the design's message and construction rather than trying to locate the missing element or fix the problem. You can apply symmetry and order by using techniques like the windmill (two to the left) where everything follows the same pattern in the shape of a circle, vertical flip (middle), and horizontal mirror (right), providing your viewer with a sense of harmony. Great graphic design uses combinations of these Gestalt design principles.

                  link                                                       link                                                link                                              link

Terminology

1) Unified Whole: a design that is connected, coherent, and complete; goal in graphic design;
    separate parts that create the sense of a grouped composition.

2) Color Value: amount of light released from a color; relative value on a grey scale.

3) Anomaly: a different object surrounded by similar elements, making the unique shape stick out.

4) Path: direction the design makes your eye follow.

5) Interior Space: the gap inside of a figure, which, in the principle of closure, is not bound.

6) Grouping: certain objects are so close that they are perceived as a unit.

7) Ambiguity: there is uncertainty if some figures and ground are a form, shape, or silhouette.

8) Windmill: repeating a pattern in the shape of a circle.

9) Vertical flip: flipping an image over the y-axis.

10) Horizontal mirror: reflecting an image over the x-axis.

11) Perception: how we interpret design.

12) Figure: shape that an object or group of objects illustrate.

References

1. Since I did not make the pictures presented in this blog post, a link to where I found each picture is provided as the picture's caption.

2.  http://www.creativebloq.com/graphic-design/designer-s-guide-gestalt-theory-10134960

3. http://www.slideshare.net/thompsonkaren/gestalt-design-principles-and-infographics-15828783