Gestalt Design Principles and InfographicsPresentation Transcript
Gestalt Design Principles
How the Mind Organizes Visual Data
The triangle is not
really drawn, but
we see it because
of the cut-outs
and placement of
Stare at this picture, and you will begin to see a
spotted dog sniffing the ground.
Apply Gestalt Theory to Influence
How the Viewer “Reads” the Visual
• Figure/Ground Relationship
• Proximity and Alignment
• Common Fate
Similarity / Anomaly
Similarity occurs when objects look similar to one another. People often
perceive them as a group or pattern. Anomaly uses the principle of
similarity but alters one figure to draw attention to difference.
Figure and Ground
The eye differentiates an object from its surrounding area. A form, silhouette, or
shape is naturally perceived as figure (object), while the surrounding area is
perceived as ground (background).
your eye to
square as an
Continuation occurs when the eye is compelled to move through one object and
continue to another object. Continuation creates movement and depth.
Example of Continuation and Depth
Example of an
the principle of
Image placement can also create
depth as in this flyer.
So much centered text, however,
is difficult to read.
Limit centered text to major
Use the principle of proximity
and alignment for other textual
Example of Image Creating Depth
Closure occurs when an object is incomplete or a space is not
completely enclosed. If enough of the shape is indicated, people
perceive the whole by filling in the missing information.
Although the photograph the Panda on the right provides realism,
the graphic design of the Panda on the left creates an emphasis by
Most of us notice the graphic Panda first or even if we notice it
second, it stands out to us more than the photograph.
Closure can also be used to reinforce a concept in a clever way. Notice
how the brand “Spartan” is presented in the graphic as both a Greek
warrior, complete with helmet, and a man swinging a golf club.
Proximity and Alignment
Proximity occurs when elements are placed close together and/or use shape, color,
font, and alignment to create unity. Notice how these blocks would tend to be
perceived as a group.
Proximity can be governed by alignment that is symmetrical.
Visual Hierarchy: when we look at visual information, we look
for hierarchy because it helps us sort what is most important.
The size of objects, shape, and color, and placement provide
cues that help us notice those things that are most important
and others that are supplemental.
Which circle did you notice first? Which one draws your attention more?
What conclusions can you draw based on your response to the two circles?
We also look for patterns as well as similarity and
difference to make sense of what we are seeing.
Most of us will view the square as more important than the circles.
The focal point in a design governs the visual hierarchy and should draw the viewers
interest while it also helps them understand what they are looking at.
The focal point in this infographic is the large image of corn. Notice how the designer
applied principles of alignment and proximity for text and other supporting images.
The design tips that follow were adapted from gomediazine tutorials. Links to the full tutorials
are in bblearn.
Limit the Number of Colors and
Use a Range of Values
Value is the level of brightness or
level of color saturation.
Limit the number of colors, but choose a
range of values in these.
Create Contrast by Changing Color Values
not Color Difference
Color Difference: The red and blue
colors have the same value, and
the effect is jarring to the eyes.
The text seems to vibrate.
Color Value: Same color in the
background and text, but the values are
different, so it does not vibrate but
creates an easy to read text.
Limit the Number of Fonts to Two:
One for headings and one for text copy.
Use Grids to Design a Balanced Composition
Tips for Working with Grids
• Don’t confine page elements to individual grid units. Text and
images can span several grid units. You can also make some
• Leave some grid units empty, or use them for accents such as small
photos, adjacent caps, headlines, and so on.
• Use your gutters and margins. Extending some images and
headlines into the bleed area can add interest to a layout.
• If you are not using software that allows you to create grids and
make these visible as you do the layout, just check your layout by
drawing grid lines on your infographic.
I’ve drawn some grid lines
on this infographic to
illustrate how the designer
created sections that are
These rhinos face
they are also
across from one
another, and they
span the same
number of grid
sections creating a
Again, I’ve drawn a few lines here to show you how this infographic is
using a grid layout. Notice how the sections of corn span the same
space as each section of the textual information.
Keep in Mind
• Infographics are designed for the web.
• Viewers prefer to scroll down a web page rather than across.
– That’s why so many infographics are longer than they are wide or
designed to be viewed without scrolling.
– You can create your infographic in a Word file and change the margins
using the custom setting. The maximum length in word is about 22,”
but that works well.
– In bblearn, you will also find links to cloud computing tools for creating