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 f.
1. 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,
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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/
10. http://johndogfood.com/resume/pdf/jspeare_CV.txt
I hope that you enjoy fishing at the river. You said that you
went lake fishing as a kid a lot, so lots of the info here may be
redundant with what you know and do. I'm not a professional
angler, but I've done a lot of fishing on the river so I'll tell you
what I've learned and what works well for me. I really like
catching Rainbow trout. They're super feisty when you catch
them and they're yummy. We no longer attempt to fillet them
when we eat them, instead, I hot smoke them after a few hours
of brining. After they are hot smoked, the spine lifts out of the
meat, taking most of the pin bones with it, and the brine process
assures a moist texture. I haven't done a bunch of fly fishing,
but this year I started to pick it up again and I've found that you
can catch rainbow in the shallower, faster sections with flies
better than with any other method I've tried. The deep slow
sections can be good for bass or walleye. But I use bait for
them. So I usually go out with two setups: a small spinning rod
and a fly rod. In all cases, I keep the gear super pared down so I
can travel easily. I ride a bike into the area I want to fish, then I
walk into the shore and work a section at a time. I have all my
gear in a small, single bag that I carry messenger-bag style.
Then I have a net that I carry over that. Aside from poles, I
only carry a small pouch of bait, some #5 split shot, flies,
floatant, needle-nose pliers, and a spare wedding ring. Often,
I'll fish for walleye on a static weighted line while I work a
section with the fly rod. It's important to note that this is
technically two-pole fishing and as such requires two licenses.
Be sure to pick up a Washington State Fish and Wildlife Guide
before you set out. There are daily limits and size restrictions
11. that determine what fish you can keep. These requirements
change according to season and to the location of the river you
are fishing. The walleye up here is legendary. Walleye is an
excellent fillet fish: it has the same basic anatomy of snapper or
rock fish, so filleting it down from the head across the backbone
to the tail yields a perfect little boneless steak. It's excellent
dusted with cornmeal and pan-fried in bacon fat in a hot cast
iron pan. Walleye like deep slow water and they want a long tail
on the worm. This kind of setup will scare the trout off usually.
However, for moderately fast sections with a bit of depth, you
can catch the monster rainbow with a bit more worm than
normal. For walleye, I've had the best luck just setting the
worm down on a deep section and keeping it still. Rainbows
don't generally go after that. If you're going to use bait with
Rainbow up here I'd use one of two methods - a #8 hook with a
bit of worm or a bit of worm on a wedding ring. The wedding
ring flashes and might stimulate an instinctual hit if the rainbow
are not otherwise interested. However, there are a few small
shore-hugging fast sections about 4 feet deep where you can
pretty much bank on a rainbow by using the wedding ring. If
you're just going with a hook/worm with rainbow mind your
weight. If you can see a shelf under the water after a fast
moving piece, then get your bait in just up-river and float the
worm over the shelf, don’t weight it. This is why I use split
shot: I can add or remove weight without fussing. The same
float method is obviously great for fly fishing those shelf
sections too. I just use simple stimulator dry flies for that. Keep
the fly on top of the water and watch for the deep section off
those shelves, if you float the fly across that enough times,
you’ll see them come and strike. For channels, where water is
emptying into a larger basin, I put just enough weight on there
to push down the bait without bouncing it. For those same
channels, you can get crazy hits with small mouth bass. These
tend to hit at around midday in the summer. They prefer a bit
more worm than the rainbow, but not as much worm as the
walleye. Small mouth bass are the most fun to catch because
12. they light up like crazy -- often launching out of the water when
you hook them. Not like walleye, which can be sort of surreal to
catch. Often it feels as if you’re hauling up an old branch the
weight is so dead. As they get to the surface they explode with
power. Anyway, bass are similar to walleye as far as filleting
and preparation.