edward tufte and information design for the web (mar 11)
DESCRIPTION
Edward Tufte & Information Design For the Web© 2011 NATHAN HUENINGsprockethouse.com12 March 2011Chapel Hill, NCDilbert 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© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC“Insights into graphical design are to be gained, I believe, from theories of what makes for excellence in art,TRANSCRIPT
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Edward Tufte &Information DesignFor the Web
Dilbert Another Day in Cubicle Paradise
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
The fundamental task of the information architect is to make the information understandable. The goal is to clarify.
Richard Saul Wurman Digerati
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
The Visual Display of Quantitative Information
Insights into graphical design are to be gained, I believe, from theories of what makes for excellence in art, architecture, and prose.
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Information design principles
Application to Web design
Outline
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Graphics reveal data
To clarify, add detail
Small multiples invite comparisons
“Smallest effective difference”
Above all else, show the data
1
2
3
4
5
Tufte’s Information Design Principles
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Graphics reveal data
Principle 1
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Visual Display of Quantitative Information
Often the most effective way to describe, explore, and summarize a set of numbers... is to look at pictures of those numbers.
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Visual Display of Quantitative Information 96
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
To clarify, add detail
Principle 2
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Information-sensitive designs are exacting and laborious, requiring a deep appreciation of the particular content at hand.
Visual Explanations 148
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Small multiples invite comparisons
Principle 3
Tufte iPhone Video:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00036T
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Multiple images reveal repetition and change, pattern and surprise—the defining elements in the idea of information.
Visual Explanations 105
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
The “smallest effective difference”
Principle 4
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Now what can be eliminated?
Frank Lloyd Wright
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Above all else,show the data
Principle 5
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
It is all right to decorate construction, but never construct decoration.
Robert Venturi Learning from Las Vegas
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Graphics reveal data
To clarify, add detail
Small multiples invite comparisons
“Smallest effective difference”
Above all else, show the data
1
2
3
4
5
Tufte’s Information Design Principles
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Design reveals content
To clarify, add detail
Design from the inside, out
Smallest effective difference
Above all else, show the content
1
2
3
4
5
Application to Web Design
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Andy Rutledge A List Apart
Design is largely an exercise in creating or suggesting contrasts ... in an effort to convey meaning.
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Design
Application 1
reveals data
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Contrast
Application 1a
reveals data
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Contrast
Application 1b
reveals information
Andy Rutledge A List Apart
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Information consists of differences that make a difference.
Envisioning Information 65
1 23 4
5 6
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
To clarify, add detail
Application 2
List your bits
Figure out which bits relate
Assign priorities
Design each bit
Assemble bits
1
2
3
4
5
37Signals An Introduction to Using Patterns in Web Design
Scan annotatedcontent invent.
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Employ the smallest effective difference
Application 3
tutorial9.net
tutorial9.net
Dan Cederholm simplebits.com
Doug Bowman stopdesign.com
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
I’ve never liked the adage Less is more... I say Less is better, which is neither cute nor clever, but almost always true.
John Gruber Independent Days
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Design from the inside, out
Application 4
Warren Parsons Photo
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Copywriting is interface design. Great interfaces are written. ... Good writing is good design.
37Signals Getting Real
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Above all else,show the content
Application 5
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
In an architecture of content, the information becomes the interface.
Visual Explanations 146
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Aesthetics matter: attractive things work better.
Donald Norman Interactions Magazine
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
Design reveals content
To clarify, add detail
Design from the inside, out
Smallest effective difference
Above all else, show the content
1
2
3
4
5
Applications to Web Design
“
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
‘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.
Steve Jobs NYTimes Magazine
© 2011 NATHAN HUENING 12 March 2011 Chapel Hill, NCsprockethouse.com
This has beena Sprocket House production.
Thank you