Submit Search
Upload
Edward Tufte and Information Design for the Web
•
23 likes
•
22,069 views
S
sprocketeer
Follow
Reprise of my 2009 presentation for Refresh the Triangle
Read less
Read more
Design
Report
Share
Report
Share
1 of 96
Download now
Download to read offline
Recommended
Tufte envisioning designing_data
Tufte envisioning designing_data
Hoàng Trần Hữu
Effective Data Visualization (David Giard)
Effective Data Visualization (David Giard)
ITCamp
Front series A deck
Front series A deck
Mathilde Collin
Mixpanel - Our pitch deck that we used to raise $65M
Mixpanel - Our pitch deck that we used to raise $65M
Suhail Doshi
LaunchRock
LaunchRock
500 Startups
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Digital Surgeons
Beer Brand Naming Archetypes 2017
Beer Brand Naming Archetypes 2017
Brand Acumen
How to Design a Logo
How to Design a Logo
Fiverr
Recommended
Tufte envisioning designing_data
Tufte envisioning designing_data
Hoàng Trần Hữu
Effective Data Visualization (David Giard)
Effective Data Visualization (David Giard)
ITCamp
Front series A deck
Front series A deck
Mathilde Collin
Mixpanel - Our pitch deck that we used to raise $65M
Mixpanel - Our pitch deck that we used to raise $65M
Suhail Doshi
LaunchRock
LaunchRock
500 Startups
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Digital Surgeons
Beer Brand Naming Archetypes 2017
Beer Brand Naming Archetypes 2017
Brand Acumen
How to Design a Logo
How to Design a Logo
Fiverr
Think Like A Growth Hacker
Think Like A Growth Hacker
Tim Homuth
Clubhouse: Viral Growth Lessons
Clubhouse: Viral Growth Lessons
Yannick Steinmann
The investor presentation we used to raise 2 million dollars
The investor presentation we used to raise 2 million dollars
Mikael Cho
Foursquare's 1st Pitch Deck
Foursquare's 1st Pitch Deck
Rami Al-Karmi
ZAG
ZAG
dia 5
Intercom's first pitch deck!
Intercom's first pitch deck!
Eoghan McCabe
SEOmoz Pitch Deck July 2011
SEOmoz Pitch Deck July 2011
Rand Fishkin
Front Series B Deck
Front Series B Deck
Mathilde Collin
500 Demo Day Batch 19: Shearshare
500 Demo Day Batch 19: Shearshare
500 Startups
Uber pitch deck
Uber pitch deck
Donatella Cambosu
Tinder Pitch Deck
Tinder Pitch Deck
Ryan Gum
Growth Hacking
Growth Hacking
Mattan Griffel
task.ly pitch deck
task.ly pitch deck
Dmitry Gorshkov
Acquire New Users with Better Activation
Acquire New Users with Better Activation
Conrad Wadowski
Y Combinator Pitch Deck Template For Startup Founders
Y Combinator Pitch Deck Template For Startup Founders
AA BB
The slide deck we used to raise half a million dollars
The slide deck we used to raise half a million dollars
Buffer
Linkedin Series B Pitch Deck
Linkedin Series B Pitch Deck
Joseph Hsieh
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
AA BB
Business Strategy + Brand Strategy
Business Strategy + Brand Strategy
VCU Brandcenter
The Creative Brief: An Introduction
The Creative Brief: An Introduction
edward boches
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
uasjlagroup
More Related Content
What's hot
Think Like A Growth Hacker
Think Like A Growth Hacker
Tim Homuth
Clubhouse: Viral Growth Lessons
Clubhouse: Viral Growth Lessons
Yannick Steinmann
The investor presentation we used to raise 2 million dollars
The investor presentation we used to raise 2 million dollars
Mikael Cho
Foursquare's 1st Pitch Deck
Foursquare's 1st Pitch Deck
Rami Al-Karmi
ZAG
ZAG
dia 5
Intercom's first pitch deck!
Intercom's first pitch deck!
Eoghan McCabe
SEOmoz Pitch Deck July 2011
SEOmoz Pitch Deck July 2011
Rand Fishkin
Front Series B Deck
Front Series B Deck
Mathilde Collin
500 Demo Day Batch 19: Shearshare
500 Demo Day Batch 19: Shearshare
500 Startups
Uber pitch deck
Uber pitch deck
Donatella Cambosu
Tinder Pitch Deck
Tinder Pitch Deck
Ryan Gum
Growth Hacking
Growth Hacking
Mattan Griffel
task.ly pitch deck
task.ly pitch deck
Dmitry Gorshkov
Acquire New Users with Better Activation
Acquire New Users with Better Activation
Conrad Wadowski
Y Combinator Pitch Deck Template For Startup Founders
Y Combinator Pitch Deck Template For Startup Founders
AA BB
The slide deck we used to raise half a million dollars
The slide deck we used to raise half a million dollars
Buffer
Linkedin Series B Pitch Deck
Linkedin Series B Pitch Deck
Joseph Hsieh
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
AA BB
Business Strategy + Brand Strategy
Business Strategy + Brand Strategy
VCU Brandcenter
The Creative Brief: An Introduction
The Creative Brief: An Introduction
edward boches
What's hot
(20)
Think Like A Growth Hacker
Think Like A Growth Hacker
Clubhouse: Viral Growth Lessons
Clubhouse: Viral Growth Lessons
The investor presentation we used to raise 2 million dollars
The investor presentation we used to raise 2 million dollars
Foursquare's 1st Pitch Deck
Foursquare's 1st Pitch Deck
ZAG
ZAG
Intercom's first pitch deck!
Intercom's first pitch deck!
SEOmoz Pitch Deck July 2011
SEOmoz Pitch Deck July 2011
Front Series B Deck
Front Series B Deck
500 Demo Day Batch 19: Shearshare
500 Demo Day Batch 19: Shearshare
Uber pitch deck
Uber pitch deck
Tinder Pitch Deck
Tinder Pitch Deck
Growth Hacking
Growth Hacking
task.ly pitch deck
task.ly pitch deck
Acquire New Users with Better Activation
Acquire New Users with Better Activation
Y Combinator Pitch Deck Template For Startup Founders
Y Combinator Pitch Deck Template For Startup Founders
The slide deck we used to raise half a million dollars
The slide deck we used to raise half a million dollars
Linkedin Series B Pitch Deck
Linkedin Series B Pitch Deck
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
Dropbox: $15K VC investment turned into $16.8B. Dropbox's initial pitch deck
Business Strategy + Brand Strategy
Business Strategy + Brand Strategy
The Creative Brief: An Introduction
The Creative Brief: An Introduction
Recently uploaded
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
uasjlagroup
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
F dds
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
ssuser7cb4ff
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
Aginakm1
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
kojalkojal131
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
katerynaivanenko1
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Shivakumar Viswanathan
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
F dds
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
AayushChavan5
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
jdkhjh
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
workingdev2003
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
mapanig881
Design principles on typography in design
Design principles on typography in design
nooreen17
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
rioverosanniejoy
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
z xss
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .ppt
DoaaRezk5
Recently uploaded
(20)
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
Design principles on typography in design
Design principles on typography in design
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .ppt
Edward Tufte and Information Design for the Web
1.
Edward Tufte & Information
Design For the Web © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
2.
Dilbert Another Day
in Cubicle Paradise
3.
“
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
4.
5.
“
Insights into graphical 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 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
6.
7.
Outline Information design principles Application
to Web design © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
8.
Tufte’s Information Design
Principles 1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Above all else, show the data © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
9.
Principle 1 Graphics reveal data ©
2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
10.
11.
12.
13.
“
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 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
14.
15.
16.
17.
18.
“
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 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
19.
20.
Principle 2 To clarify, add
detail © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
21.
22.
23.
24.
25.
26.
“
Information-sensitive designs are exacting and laborious, requiring a deep appreciation of the particular content at hand. Visual Explanations 148 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
27.
Principle 3 Small multiples invite
comparisons © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
28.
Tufte iPhone Video: http://www.edwardtufte.com/ bboard/q-and-a-fetch-msg? msg_id=00036T
29.
“
Multiple images reveal repetition and change, pattern and surprise—the defining elements in the idea of information. Visual Explanations 105 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
30.
Principle 4 The “smallest effective
difference” © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
31.
32.
33.
34.
35.
36.
“
Now what can be eliminated? Frank Lloyd Wright © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
37.
Principle 5 Above all
else, show the data © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
“
It is all right to decorate construction, but never construct decoration. Robert Venturi Learning from Las Vegas © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
48.
Tufte’s Information Design
Principles 1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Above all else, show the data © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
49.
Application to Web
Design 1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Above all else, show the content © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
50.
“
Design is largely an exercise in creating or suggesting contrasts ... in an effort to convey meaning. Andy Rutledge A List Apart © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
51.
Application 1 Design reveals data ©
2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
52.
Application 1a Contrast reveals data ©
2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
53.
Application 1b Contrast reveals information ©
2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
54.
Andy Rutledge A
List Apart
55.
“
Information consists of differences that make a difference. Envisioning Information 65 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
56.
1
2 3 4 5 6
57.
Application 2 To clarify, add
detail © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
58.
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
59.
Scan annotated content invent.
60.
61.
62.
63.
64.
65.
66.
67.
Application 3 Employ the
smallest effective difference © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
68.
tutorial9.net
69.
tutorial9.net
70.
Dan Cederholm simplebits.com
71.
Doug Bowman stopdesign.com
72.
73.
“
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 sprockethouse.com 12 March 2011 Chapel Hill, NC
74.
Application 4 Design from
the inside, out © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
75.
Warren Parsons Photo
76.
77.
78.
79.
80.
“
Copywriting is interface design. Great interfaces are written. ... Good writing is good design. 37Signals Getting Real © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
81.
Application 5 Above all
else, show the content © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
82.
83.
84.
85.
86.
87.
88.
“
In an architecture of content, the information becomes the interface. Visual Explanations 146 © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
89.
90.
91.
92.
93.
“
Aesthetics matter: attractive things work better. Donald Norman Interactions Magazine © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
94.
Applications to Web
Design 1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Above all else, show the content © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
95.
“
‘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 sprockethouse.com 12 March 2011 Chapel Hill, NC
96.
Thank you This has
been a Sprocket House production. © 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC
Download now