View
224
Download
0
Category
Preview:
Citation preview
8/14/2019 Lipton Presentation Information Design
1/17
How Humans PerceiveLipton
All minds perceivedifferently but youcan predict and
therefore controlwhat and how yourreaders view bycreating layouts that
are in line withinherent humanbehavior.
For example, on this slide,this will be the last thingthat you read because youwill start at the top left with
the enlarged andemphasized title, move tothe authors name, thenbegin with the first column,followed by this column.This is the backwards Nshape that we naturallyfollow.
8/14/2019 Lipton Presentation Information Design
2/17
The Basics:
Humans tend to look for
order and unity. Anything that
lacks order in visual
displays tends to make us
uncomfortable. Just like withPangea, the human mind tends
to mentally group individual
parts to form a whole.
(Lipton 15)
8/14/2019 Lipton Presentation Information Design
3/17
Important Guidelines for
Layout: Dont include
everything you
know Group related
information
Use space
Use style
Emphasize whatsmost important
Arrange informationfrom most importantto least
Align elements
Separate foregroundand background
Use clear and legibleimages
8/14/2019 Lipton Presentation Information Design
4/17
The Gestalt Principles
Gestalt means FORM inGerman. Liptoninterprets the
psychological term inregard to the similarityprinciple and applies itto the way thathumans perceiveinformation whenviewing designedproducts.
For example, weregard items thatLOOK alike as BEING
alike. We expectboth of thesecolumns to give usinformation aboutgestalt principles
because they lookthe same and bothfollow the headingabove.
8/14/2019 Lipton Presentation Information Design
5/17
SIZE
Size is the mostimportant noticeablegraphic trait. (17)
Humans expect thingsthat are bigger to bemore important.
When there is a changein font size, we expect it
to mean something.
A viewer wouldexpect this
sentence to bemore importantthan those thatcame before it.
8/14/2019 Lipton Presentation Information Design
6/17
Photo Sizes
The same rule thatapplies to font size
applies to photosizing. Biggerheadshots forexample
emphasize theimportance of oneperson over theothers.
8/14/2019 Lipton Presentation Information Design
7/17
8/14/2019 Lipton Presentation Information Design
8/17
Alignment
Pages designed with agrid gives projects asense of order and
unity, and helps readersfind things (19).
Each of these slides hasbeen set up in a grid-
like form to make thematerial moreaccessible.
Words that arent
aligned or bouncelike these canannoy and alienate
the reader and
contribute to the
chaos ofthe page.
8/14/2019 Lipton Presentation Information Design
9/17
Proximity
Things that are near oneanother are assumed tobe related. This appliesto headings, text,
photos and captions. Images are assumed to
correspond to thecaptions closest tothem, not just to the
text on the page.
Snapdragons are myfavorite type of flower.
I also like dragons thathave snapped.
8/14/2019 Lipton Presentation Information Design
10/17
Backgrounds and
Foregrounds SIZE: Big fonts have goodcontrast. Avoid fine print tricks.
COLOR: Black on white iseasiest on the eyes. For warm,bright graphics however, use
dark backgrounds to make themstand out.
WEIGHT: Make the font heavywith uniform bold stroke toseparate foreground but avoidbeing illegible by being too thick.
BACKGROUND: Keep itquiet, solid and avoid shiftingimages/gradients.
THIS CONTRASTSMUCH BETTER
AGAINST THEBACKGROUND
than this thinner,lighter font does,even though thebackground iswhite.
8/14/2019 Lipton Presentation Information Design
11/17
Encourage a Direction
Direction or continuationcan be encouragedthrough objects such as a
thick bar at the top ofevery page whichencourages horizontalmovement, as was usedon each of these slides.
Maintaining the samefont, color scheme andrelative layout on each
page imposescontinuity and lets theviewer know that all ofthe material is cohesiveand related.
8/14/2019 Lipton Presentation Information Design
12/17
L.A.T.C.H.L.A.T.C.H. is an
anagram
used by Lipton to
describe the following:
Location Alphabet
Time
Category
Hierarchy
This system is used to organize
information in ways that might bemore accessible to the reader thannatural layouts catered to humanperception. For example, finding arestaurant by the type of food they
serve, rather than by alphabeticallistings of names such as The Eatery,Modern Eats, and Pamelas, whichtell you nothing about the foodserved.
Chinese Italian Mexican
8/14/2019 Lipton Presentation Information Design
13/17
How We Perceive Words
We read through aseries of eye jumps,pauses and backtracks,
with each saccadecovering seven to nineletters of text (30).
In order to support this
text should do thefollowing:
Support aconsistent,comprehensivereading (jumping)pace.
Use consistent,legible type.
Use appropriatecontrast and wordspacing.
8/14/2019 Lipton Presentation Information Design
14/17
How We Perceive Color
To our eye, red looks closerand bigger and blue looksfather away and smaller. As
you can see in the top leftcorner, the blue looks like itfalls behind the red.
Because of this trick to theeye, red tends to work bestin foregrounds and bluebest in backgrounds.
The color yellow doesntstand out very well onwhite unless it has morered in it, like this.
Using adjacent colors likered and orange create aharmonious design, whilecolors with highercontrast would include
colors without inbetween elements, likered and yellow.
8/14/2019 Lipton Presentation Information Design
15/17
Shimmer Effects
Avoid pairing bright red with
bright blue which will give you
a distracting shimmering effect
which the eye cant focus on.
To avoid this shimmering,
put another color in
between the
complimentary colors or
use different intensities.
Other shimmeringeffects can come from
pairing complimentarycolors such asred/green,yellow/purple, and
orange/blue.
Its best to avoid thesame intensity for any
two colors because itmight make it hard forthe audience todistinguish between
them.
8/14/2019 Lipton Presentation Information Design
16/17
Symbols
Some symbols areunderstood almostuniversally such as
restroom signs, trafficlights and Stop signs.
However some symbolscan be misconstrued soyou have to be sure your
audience is familiar withthe symbol you areusing.
If you are going to includesymbols, its best to borrowalready existing onesbefore creating new ones,
which can createconfusion.
If you do start fromscratch, it is important toteach your reader what thesymbols mean and remind
them every time that youuse them.
8/14/2019 Lipton Presentation Information Design
17/17
References:
Lipton, Chapter 1: How humans (almost)universally perceive, Pages 15-28.
All images came from Google images.
By Andrea Kennedy
Recommended