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
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
yuu sss
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Yantram Animation Studio Corporation
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
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
yuu sss
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Yantram Animation Studio Corporation
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
neelspinoy
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
CarolTelles6
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
DanielTamiru4
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
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
zdzoqco
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
marckustrevion
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
kojalkojal131
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
MaryamAfzal41
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
Fi sss
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
F dds
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
mrchrns005
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
nhjeo1gg
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
Aginakm1
Recently uploaded
(20)
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
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