1

Gestalt Design Principlesand Infographics

© 2014 Karen L. Thompson, University of Idaho

2

Gestalt Theory: How the Mind Organizes Visual Data

The triangle is not really drawn, but we see it because of the cut-outs and placement of the circles.

Stare at this picture, and you will begin to see a spotted dog sniffing the ground.

3

Components of Gestalt Theory Applying these Influence How the Viewer

“Reads” the Visual

• Similarity/Anomaly• Figure/Ground Relationship• Continuation• Closure• Proximity and Alignment• Common Fate

4

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.

5

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).

The dark background encourages your eye to see the square as an opening.

6

Effective figure/ground relationship. Competing figure/ground relationship.

7

Continuation

Continuation occurs when the eye is compelled to move through one object and continue to another object. Continuation creates movement and depth.

8

Example of Continuation and Depth

9

Example of an infographic using the principle of continuation.

10

Image placement can also create depth as in this flyer.

So much centered text, however, is difficult to read.

Limit centered text to major titles.

Use the principle of proximity and alignment for other textual information.

Example of Image Creating Depth

11

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 using the Gestalt principle of closure.

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

12

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.

13

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.

14

Proximity can be governed by alignment that is symmetrical.

15

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?

16

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.

17

The focal point in this data-driven infographic is the large image of corn. Notice how the designer applied principles of alignment and proximity for text and other supporting images.

18

Design Tips

The design tips that follow were adapted from gomediazine tutorials. Links to the full tutorials are in bblearn.

19

Limit the Number of Colors andUse 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.

20

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.

21

Limit the Number of Fonts to Two:One for headings and one for text copy.

22

Use Grids to Design a Balanced Composition

23

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 gridlines visible.

• 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.

24

I’ve drawn some grid lines on this infographic to illustrate how the designer created sections that are balanced.

These rhinos face opposite directions, but they are also placed diagonally across from one another, and they span the same number of grid sections creating a symmetrical composition.

25

I’ve drawn some grid lines over this infographic that is visualizing data about losing biodiversity in the world.

Notice how the creator has used principles of proximity, alignment, and a focal point. All aspects of this infographic are well-balanced.

26

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.

27

Creating Your Infographic• For this project, your infographic should be aimed at

visualizing data in an interesting way.

• So, avoid just inserting traditional graphic representations (bar charts, line charts, pie charts etc. into your infographic).

Notice how this infographic is visualizing data by applying a metaphor “degrees of disaster.”

28

Creating Your Infographic continued

It isn’t wrong to include traditional graphics such as bar, line, or pie charts in your infographic, but do so in a way that is visually interesting.

Notice how the creator of this infographic used images and color to create data visualizations about social tools Americans use in emergencies.

29

Think Outside the BoxThe creator of this infographic converted statistics about natural disasters to visual representations.

It’s easy to see that the wildfires in Russia during 2010 were a lower scale of devastation than floods in Australia that same year.

30

Tools for Infographics

• Use a Cloud Computing Tool. In bblearn, you will find links to free tools for creating infographics.

• Use PowerPoint. You find templates for creating infographics using PowerPoint by doing a search. NOTE: PowerPoint limits the length of the infographic.

• Use Word. You can change the margins in Word to a maximum length of 22.”

31

Keep This in MindFirst, you do not have to be a design ace at using visual software such as PhotoShop to create your infographic.

With some adjustment to the margins, you can use a Word document file and Word Shapes etc. to create an infographic. I have also posted links to free infographic creator tools in bblearn.

Second, if your skill level in producing the infographic is poor (i.e. you know what you want to do but can’t quite pull it off), I will take that into consideration when grading.

For me to do that, however, requires you to fully explain your design choices. This is why you are asked to write a memo report about those design choices.