Edward Tufte & Information Design For the Web
Dilbert Another Day in Cubicle Paradise
“
The fundamental task of the information architect is to make the information understandable. The goal is to clarify.
Richard Saul Wurman Digerati
“
Insights into gr graphical aphical design are to be gained, I believe, from theories of what makes for excellence in art, architecture, and prose.
The Visual Display of Quantitative Information
Outline
Information design principles Application to Web design
Tufte’s Information Design Principles
1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Abov Above e all else, els e, show the data
Principle 1
Graphics reveal data
“
Often the most effective way to describe, explore, and summarize a set of numbers is to look at pictures of those numbers. ...
Visual Display of Quantitative Information
“
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.
Visual Display of Quantitative Information
96
Principle 2
To clarify, add detail
“
Information-sensitive designs Information-sensitive are exacting and laborious, requiring a deep appreciation of the particular content at hand.
Visual Explanations 148
Principle 3
Small multiples invite comparisons
Tufte iPhone Video:
“
Multiple images reveal repetition and change, pattern and surprise the defining elements in the idea of information of information..
Visual Explanations 105
Principle 4
The “smallest effectiv ef fective e difference”
“
Now what can be eliminated?
Frank Lloyd Wright
Principle 5
Above all else, show the data
“
It is all right to decorate construction, but never construct decoration.
Robert Venturi Learning from Las Vegas
Tufte’s Information Design Principles
1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Abov Above e all else, els e, show the data
Application to Web Web Design
1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Abov Above e all else, els e, show the content
“
Design is largely an exercise in creating or suggesting contrasts contr asts ... in an effort ef fort to convey meaning.
Andy Rutledge A List Apart
Application 1
Design reveals data
Application 1a
Contrast reveals data
Application 1b
Contrast reveals information
Andy Rutledge A List Apart
“
Information consists of differences that make a differenc dif ference. e.
Envisioning Information 65
5
1
2
3
4
6
Application 2
To clarify, add detail
1 List your bits 2 Figure out which bits relate 3 Assign priorities 4 Design each bit 5 Assemble bits 37Signals An Introduction to Using Patterns in Web Design
Scan annotated content invent.
Application 3
Employ the smallest effective difference
tutorial9.net
tutorial9.net
Dan Cederholm simplebits.com
Doug Bowman stopdesign.com
“
I’ve never liked the adage Less is more... more... I say Less is better , which is neither cute nor clever, but almost always true.
John Gruber Independent Days
Application 4
Design from the inside,, out inside
Warren Parsons Photo
“
Copywriting is interface design. Great interfaces are written. ... Good writing is good design.
37Signals Getting Real
Application 5
Above all else, show the content
“
In an architecture of content, content, the information becomes the interface.
Visual Explanations 146
“
Aesthetics matter: attractive things work better.
Donald Norman Interactions Magazine
Applications to Web Design
1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Abov Above e all else, els e, show the content
“
‘Make it look good!’ That’s not what we think design is. It’s not just what it looks and feels like. Design is how it works. works.
Steve Jobs NYTimes Magazine
Thank you
This has been a Sprocket House production.
