4. gestalt
information design principals
some typographic principals
5. information design is the study and practice
of bringing clarity and comprehensibility to
visual materials that are meant to direct,
teach, explain, or otherwise inform.
Ronnie Lipton
19. FIGURE/GROUND
Inctium sinctat voluptatur? Inctium sinctat voluptatur?
Arumquam ellaut aruptam sum Arumquam ellaut aruptam sum
is alit dolores dolore aut es is alit dolores dolore aut es
diaspic aturepe porro comnis- diaspic aturepe porro comnis-
tio conseni musam, sunt officie tio conseni musam, sunt officie
ndicid ndicid
LOW CONTRAST HIGH CONTRAST
make the content stand out from the background
20. serif OR sans serif / we read best what we read most
Typefaces communicate
contrast between thick and thin strokes is hard to read
minimal contrast and is easier to read
23. SIGNAL TO NOISE RATIO
information = signal
everything else = noise
24. SIGNAL TO NOISE RATIO
minimize pattern and line thickness
remember figure/ground
33. LET’S TRY IT OUT
make a graphic of “I will survive” using the LATCH method
First I was afraid Go on now go walk out the door It took all the strength I had
I was petrified just turn around now not to fall apart
Kept thinking I could never live ‘cause you’re not welcome anymore kept trying hard to mend
without you by my side weren’t you the one who tried to hurt me the pieces of my broken heart
But I spent so many nights with goodbye and I spent oh so many nights
thinking how you did me wrong you think I’d crumble just feeling sorry for myself
I grew strong you think I’d lay down and die I used to cry
I learned how to carry on Oh no, not I Now I hold my head up high
and so you’re back I will survive and you see me
from outer space as long as I know how to love somebody new
I just walked in to find you here I know I will stay alive I’m not that chained up little person
with that sad look upon your face I’ve got all my life to live still in love with you
I should have changed my stupid lock I’ve got all my love to give and so you felt like dropping in
I should have made you leave your key and I’ll survive and just expect me to be free
If I had known for just one second I will survive now I’m saving all my loving
you’d be back to bother me for someone who’s loving me
34. SURVIVED!
LEARNED TO CARRY ON
GREW STRONG
NIGHTS SPENT FEELING SORRY FOR MYSELF
CRYING & MENDING HEART
AFRAID/PETRIFIED
35. WHAT INFOGRAPHIC SHOULD I USE?
bivariate (one thing is compared to another)
use a table
multivariate (more than two variables are
compared) choose a chart
Quantitative or Qualitative
39. BAR CHARTS
APRIL
MAY
SALES $US
JULY
TROLLS GNOMES BILLYGOATS
good for comparing numeric quantities
compares like to like most easily
40. LINE GRAPH
SALES $US
TROLLS
GNOMES
BILLY GOATS
APRIL MAY JULY
show development / relative position over time
emphasize the yearly trend instead of comparison
41. PIE CHART
example by Seth Godin
bar chart implies importance
pie chart shows extent of the troll problem in proportion
42. DESIGNING TABLES
one dataset per table!
notice information, NOT the table structure
decrease the noise
make the background behave
43. DESIGNING TABLES
use dashes or ellipses for missing data
tints help the eye read across or down
se fonts with open counters / no serifs
u
never horizontally scale type
45. DESIGNING BAR CHARTS
don’t always need a frame or increment marks
differences of height should be discernible
type should be in proportion to the data
47. PIE CHARTS
don’t use an ellipse—it distorts the data
don’t use busy patterns or 3D effect
make sure colors are tonally contrasting
48. LINE GRAPHS
background and labels should not overwhelm the lines
the scale should allow us to see variation
without exaggerating the data
53. This presentation was created for non-profit educational purposes. These image credits are best guess based on
where they were sourced, some have been passed around the internet a lot and the original is hard to identify. If any
of the copyright holders wish me to remove images please contact me directly on: anitra@anitraland.com
Image Credits:
Page 1: New Yorker Cartoon, by Paul Noth
Page 6: Apple Inc
Page 7: AP
Page 8: AP
Page 11: USGS
Page 12: Yuism.org
Page 13: Education Database Online
Page 14: Wikipedia (Photographer Unknown)
Page 15 L-R: Shutterstock / learning solutions magazine / designer unknown
Page 16: Julian Weidenthaler
Page 17: mrkism.com
Page 18: Megadesign
Page 23: Screen Grab from TV screen, Author Unknown
Page 24: via Presentation Zen, photographer unknown
Page 25: Seth Godin
Page 28: Apple Inc
Page 29: Wikipedia Commons
Page 30: Good Magazine
Page 31: Squidspot.com
Page 32: Designer Unknown
Page 36: Seth Godin
Page 37: GoBeyondweb.com
Page 41: Idea and image by Seth Godin
Page 44: Pew Internet / Designer unknown
Page 45: Bons Design Helsinki
Page 46: Huffpost Politics
Page 47: Seth Godin / Author Unknown
Page 48: AP