Orgnization

Introduction to Visual Design Principles

John Speare

TCOM 205 – Fall 2015

Principles not rules

• The goal is to compose with a rhetorical intent: creating information/message in a way that responds to the needs of the info producers and users

• There is no agreement on a single, authoritative set of principles of design

• Gestalt offers a framework that we can apply to the practice of visual design

What is Gestalt Theory

• Gestalt theory focuses on the mind’s perceptive

processes

• The word "Gestalt" has no direct translation in English,

but refers to "a way a thing has been gestellt ; i.e.,

‘placed,’ or ‘put together’";

• Common translations include "form" and "shape"

Acknowledgement: This slide is from University of Southern Mississippi; likely author is Claire L. Hamilton, ASID. Retrieved Oct 6, 2013 from http://ocean.otr.usm.edu/~w135249/pdf/id140/theory.ppt

What is Gestalt Theory

• Gestalt theorists

followed the basic

principle that the whole

is greater than the sum

of its parts.

• In viewing the "whole,"

a cognitive process

takes place – the mind

makes a leap from

comprehending the

parts to realizing the

whole.

Acknowledgement: This slide is from University of Southern Mississippi; likely author is Claire L. Hamilton, ASID. Retrieved Oct 6, 2013 from http://ocean.otr.usm.edu/~w135249/pdf/id140/theory.ppt

Some Gestalt principles

Figure-Ground: figure is focus; ground is “background”

Symmetry: parallel or balanced composition of elements

Similarity: conceptually related elements are presented in consistent visual shapes

Closure: distinct and intentional grouping to reinforce or contrast conceptual meaning

Proximity: elements that are closer to each other are related conceptually, those that are further apart are dissimilar

Continuation: alignment of elements provides conceptual and hierarchical relationships

Squinting

Figure-Ground

• Figure is the main focus of the picture – The bottles of orange juice and

fruit are the main focus

• Ground is the background supporting the figure – The blurriness of the background

emphases the main focus to be the orange juice

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

Symmetry

Each info “bucket” is presented in a common schema.

Readers figure out the schema on one bucket, then apply it to each subsequent bucket.

Parallel configuration of information suggests stability and harmony. It also encourages efficient scanning.

Violation of symmetry principle contrasts the hierarchical nature of this particular information. Why do that in this scenario?

Symmetry is shown with: • Harmony of common colors

• orange, yellow, blue and green

•Balance and Unity • The two bottles next to each other center the focus with same size and shape

• Each bottle has an open faced orange and the fruit next to example of what fruit is added to the specific bottle

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

Similarity Headings: experience buckets; bold/sans-serif

Subheadings: degrees, titles; bold/serif

Other examples of similarity: • Fonts: size, serif, bold, and

italics • Date presentation • others? • Identify violations

• The bottle style and size express that they are both orange juice

• The labels are similar in style, different colors are expressed in an identical design pattern

• Open faced orange is placed by both bottles blending with the appropriate fruit

• Use of larger text to emphasize the main point of ad

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

Closure

Use of white space and strong alignment enclose conceptually related content.

• The pair of bottles create a square associating their connection

• Blurry background separates the picture from of main focus that is crisp

• The block of text introducing the orange juice is inclusive even though it is not in a standard sentence format

• The enlarged and bold text highlight the main point of ad at the bottom

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

Proximity

Line heights reinforce relationship and hierarchy between conceptual elements

Non-standard formatting is normalized by use of proximity

• The pineapple is placed next to the orange juice with pineapple flavor

• The mangos are placed next to the orange juice with mango flavor

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

Continuation

Use of closure and continuation create a strong visual edge. • Eases scanning.

Portrays stability, reliability.

• Formatting error is obvious here.

Stacking vertical lines of continuation reinforces conceptual hierarchies.

Continuation associates related elements across whitespace.

• The sunny atmosphere seems endless

• The pineapple, tree and orange are cut off by the edge of picture yet are still recognizable

• Table placement is as if the reader where to be sitting at the table

This slide is from Cody Deyo’s “Gestalt” presentation, ENGL 205, 2013

It’s all about principles… not about the tools

Resume: ASCII version

Image source: http://gormansupply.com/2011/07/hand-painted-signs-attract-business/