Submit Search
Upload
Edward Tufte and Information Design for the Web
•
23 likes
•
22,070 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
Yik Yak Growth Strategy by Victoria Young
Yik Yak Growth Strategy by Victoria Young
Victoria Young
Tufte envisioning designing_data
Tufte envisioning designing_data
Hoàng Trần Hữu
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
Lewis Lin 🦊
How to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 Steps
Lewis Lin 🦊
Anchorman 2 Changed what it Means to Be a Movie
Anchorman 2 Changed what it Means to Be a Movie
Gary Vaynerchuk
Brand Box 4 - What's The Big Idea? The Marketer's Ultimate Toolkit
Brand Box 4 - What's The Big Idea? The Marketer's Ultimate Toolkit
Ashton Bishop
How to Master Product Management Case Studies by fmr Groupon PM
How to Master Product Management Case Studies by fmr Groupon PM
Product School
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
Recommended
Yik Yak Growth Strategy by Victoria Young
Yik Yak Growth Strategy by Victoria Young
Victoria Young
Tufte envisioning designing_data
Tufte envisioning designing_data
Hoàng Trần Hữu
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
Lewis Lin 🦊
How to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 Steps
Lewis Lin 🦊
Anchorman 2 Changed what it Means to Be a Movie
Anchorman 2 Changed what it Means to Be a Movie
Gary Vaynerchuk
Brand Box 4 - What's The Big Idea? The Marketer's Ultimate Toolkit
Brand Box 4 - What's The Big Idea? The Marketer's Ultimate Toolkit
Ashton Bishop
How to Master Product Management Case Studies by fmr Groupon PM
How to Master Product Management Case Studies by fmr Groupon PM
Product School
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
The Birth Of A Grand Strategist By Waqar Riaz
The Birth Of A Grand Strategist By Waqar Riaz
Waqar Riaz
Product Validation With Product Discovery
Product Validation With Product Discovery
Hengki Sihombing
2-Hour Design Sprint Agenda
2-Hour Design Sprint Agenda
Brooke Katalinich
Mobile Apps: How to Survive in the Mindful Era
Mobile Apps: How to Survive in the Mindful Era
Mozza
Build Features, Not Apps
Build Features, Not Apps
Natasha Murashev
GPU Computing for Data Science
GPU Computing for Data Science
Domino Data Lab
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Digital Surgeons
Web UI Design Patterns 2014
Web UI Design Patterns 2014
Lewis Lin 🦊
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
Fabernovel
BBDO Belgium - Agency of the Year
BBDO Belgium - Agency of the Year
BBDO Belgium
Extended project review
Extended project review
chantellleee
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Adobe
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
JovaMatttos
Strategic Planning & the Importance of Consumer insights
Strategic Planning & the Importance of Consumer insights
Karen Saba
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Mozza
31 Best Growth Hacking Resources
31 Best Growth Hacking Resources
Stephen Jeske
Product Design Sprint
Product Design Sprint
Baris Erkol
The Dictionary of Brand by Marty Neumeier
The Dictionary of Brand by Marty Neumeier
Liquid Agency
HOW Design Live 2017: Sketchnote Masterclass
HOW Design Live 2017: Sketchnote Masterclass
Mike Rohde
Where to find better ideas? +10 categories to explore with examples
Where to find better ideas? +10 categories to explore with examples
Board of Innovation
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
ttt fff
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Shivakumar Viswanathan
More Related Content
What's hot
The Birth Of A Grand Strategist By Waqar Riaz
The Birth Of A Grand Strategist By Waqar Riaz
Waqar Riaz
Product Validation With Product Discovery
Product Validation With Product Discovery
Hengki Sihombing
2-Hour Design Sprint Agenda
2-Hour Design Sprint Agenda
Brooke Katalinich
Mobile Apps: How to Survive in the Mindful Era
Mobile Apps: How to Survive in the Mindful Era
Mozza
Build Features, Not Apps
Build Features, Not Apps
Natasha Murashev
GPU Computing for Data Science
GPU Computing for Data Science
Domino Data Lab
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Digital Surgeons
Web UI Design Patterns 2014
Web UI Design Patterns 2014
Lewis Lin 🦊
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
Fabernovel
BBDO Belgium - Agency of the Year
BBDO Belgium - Agency of the Year
BBDO Belgium
Extended project review
Extended project review
chantellleee
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Adobe
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
JovaMatttos
Strategic Planning & the Importance of Consumer insights
Strategic Planning & the Importance of Consumer insights
Karen Saba
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Mozza
31 Best Growth Hacking Resources
31 Best Growth Hacking Resources
Stephen Jeske
Product Design Sprint
Product Design Sprint
Baris Erkol
The Dictionary of Brand by Marty Neumeier
The Dictionary of Brand by Marty Neumeier
Liquid Agency
HOW Design Live 2017: Sketchnote Masterclass
HOW Design Live 2017: Sketchnote Masterclass
Mike Rohde
Where to find better ideas? +10 categories to explore with examples
Where to find better ideas? +10 categories to explore with examples
Board of Innovation
What's hot
(20)
The Birth Of A Grand Strategist By Waqar Riaz
The Birth Of A Grand Strategist By Waqar Riaz
Product Validation With Product Discovery
Product Validation With Product Discovery
2-Hour Design Sprint Agenda
2-Hour Design Sprint Agenda
Mobile Apps: How to Survive in the Mindful Era
Mobile Apps: How to Survive in the Mindful Era
Build Features, Not Apps
Build Features, Not Apps
GPU Computing for Data Science
GPU Computing for Data Science
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Web UI Design Patterns 2014
Web UI Design Patterns 2014
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
GAFANOMICS Season 2: 4 superpowers to outperform in the Network Economy
BBDO Belgium - Agency of the Year
BBDO Belgium - Agency of the Year
Extended project review
Extended project review
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Adobe Digital Insights -- Podcast & Audiobook Insights 2019
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
Tabela-ADEGRAF-2021-2022-WEB-MAR2021-1.pdf
Strategic Planning & the Importance of Consumer insights
Strategic Planning & the Importance of Consumer insights
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
31 Best Growth Hacking Resources
31 Best Growth Hacking Resources
Product Design Sprint
Product Design Sprint
The Dictionary of Brand by Marty Neumeier
The Dictionary of Brand by Marty Neumeier
HOW Design Live 2017: Sketchnote Masterclass
HOW Design Live 2017: Sketchnote Masterclass
Where to find better ideas? +10 categories to explore with examples
Where to find better ideas? +10 categories to explore with examples
Recently uploaded
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
ttt fff
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Shivakumar Viswanathan
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
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
SwaraliBorhade
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
ssuser7cb4ff
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
neelspinoy
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
F dds
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
Sumit Lathwal
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
katerynaivanenko1
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
F La
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Rishabh Aryan
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
D SSS
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
z xss
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
vaibhavkanaujia
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
Fi L
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
diploma 1
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
jennyeacort
Recently uploaded
(20)
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
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
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
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