lipton presentation information design

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.


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)


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


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.


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.


6/17

Photo Sizes

The same rule thatapplies to font size

applies to photosizing. Biggerheadshots forexample

emphasize theimportance of oneperson over theothers.


7/17


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.


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.


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.


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.


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


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.


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.


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.


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.


17/17

References:

Lipton, Chapter 1: How humans (almost)universally perceive, Pages 15-28.

All images came from Google images.

By Andrea Kennedy

lipton presentation information design

Documents