Submit Search
Upload
Edward Tufte and Information Design for the Web
•
23 likes
•
22,093 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
MCJ Edward Tufte Notes
MCJ Edward Tufte Notes
McGarrah Jessee
Lessons From Edward Tufte
Lessons From Edward Tufte
Mika Aldaba
Data visualization in a nutshell
Data visualization in a nutshell
David Alayón
Report on Beautiful Evidence by E. Tufte
Report on Beautiful Evidence by E. Tufte
hckingmtuedu
Data visualization
Data visualization
Subarna Natarajan
Data Visualization Design Best Practices Workshop
Data Visualization Design Best Practices Workshop
JSI
Brief introduction to data visualization
Brief introduction to data visualization
Zach Gemignani
Recommended
Tufte envisioning designing_data
Tufte envisioning designing_data
Hoàng Trần Hữu
MCJ Edward Tufte Notes
MCJ Edward Tufte Notes
McGarrah Jessee
Lessons From Edward Tufte
Lessons From Edward Tufte
Mika Aldaba
Data visualization in a nutshell
Data visualization in a nutshell
David Alayón
Report on Beautiful Evidence by E. Tufte
Report on Beautiful Evidence by E. Tufte
hckingmtuedu
Data visualization
Data visualization
Subarna Natarajan
Data Visualization Design Best Practices Workshop
Data Visualization Design Best Practices Workshop
JSI
Brief introduction to data visualization
Brief introduction to data visualization
Zach Gemignani
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Amanda Makulec
Airbnb Case Study - Design Thinking
Airbnb Case Study - Design Thinking
SaishAdlak
Data visualization introduction
Data visualization introduction
ManokamnaKochar1
Data stories - how to combine the power storytelling with effective data visu...
Data stories - how to combine the power storytelling with effective data visu...
Coincidencity
Data Visualization - What can you see? #baai17
Data Visualization - What can you see? #baai17
Eugene O'Loughlin
Storytelling with Data Visualization
Storytelling with Data Visualization
Kurtosys Systems
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
Piktochart
5 Data Visualization Pitfalls
5 Data Visualization Pitfalls
Data IQ Argentina
The Importance of Data Visualization
The Importance of Data Visualization
Centerline Digital
Evolution of Design & Service Design
Evolution of Design & Service Design
Challis Hodge
Storytelling with Data - See | Show | Tell | Engage
Storytelling with Data - See | Show | Tell | Engage
Amit Kapoor
The Future Of Data Visualization
The Future Of Data Visualization
FITC
Visual Design with Data
Visual Design with Data
Seth Familian
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
Hunter Whitney
Data Storytelling: The only way to unlock true insight from your data
Data Storytelling: The only way to unlock true insight from your data
Bright North
Data Visualization & Data Storytelling
Data Visualization & Data Storytelling
彭其捷 Jack
UX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Joan Lumanauw
Best Practices for Killer Data Visualization
Best Practices for Killer Data Visualization
Qualtrics
Big data case study collection
Big data case study collection
Luis Miguel Salgado
How to Visualize Data Like a Pro
How to Visualize Data Like a Pro
24Slides
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
HyderabadDolls
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
HyderabadDolls
More Related Content
What's hot
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Amanda Makulec
Airbnb Case Study - Design Thinking
Airbnb Case Study - Design Thinking
SaishAdlak
Data visualization introduction
Data visualization introduction
ManokamnaKochar1
Data stories - how to combine the power storytelling with effective data visu...
Data stories - how to combine the power storytelling with effective data visu...
Coincidencity
Data Visualization - What can you see? #baai17
Data Visualization - What can you see? #baai17
Eugene O'Loughlin
Storytelling with Data Visualization
Storytelling with Data Visualization
Kurtosys Systems
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
Piktochart
5 Data Visualization Pitfalls
5 Data Visualization Pitfalls
Data IQ Argentina
The Importance of Data Visualization
The Importance of Data Visualization
Centerline Digital
Evolution of Design & Service Design
Evolution of Design & Service Design
Challis Hodge
Storytelling with Data - See | Show | Tell | Engage
Storytelling with Data - See | Show | Tell | Engage
Amit Kapoor
The Future Of Data Visualization
The Future Of Data Visualization
FITC
Visual Design with Data
Visual Design with Data
Seth Familian
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
Hunter Whitney
Data Storytelling: The only way to unlock true insight from your data
Data Storytelling: The only way to unlock true insight from your data
Bright North
Data Visualization & Data Storytelling
Data Visualization & Data Storytelling
彭其捷 Jack
UX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Joan Lumanauw
Best Practices for Killer Data Visualization
Best Practices for Killer Data Visualization
Qualtrics
Big data case study collection
Big data case study collection
Luis Miguel Salgado
How to Visualize Data Like a Pro
How to Visualize Data Like a Pro
24Slides
What's hot
(20)
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Data Visualization: Impact, Intrigue, Value Add for APLIC 2014
Airbnb Case Study - Design Thinking
Airbnb Case Study - Design Thinking
Data visualization introduction
Data visualization introduction
Data stories - how to combine the power storytelling with effective data visu...
Data stories - how to combine the power storytelling with effective data visu...
Data Visualization - What can you see? #baai17
Data Visualization - What can you see? #baai17
Storytelling with Data Visualization
Storytelling with Data Visualization
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
5 Data Visualization Pitfalls
5 Data Visualization Pitfalls
The Importance of Data Visualization
The Importance of Data Visualization
Evolution of Design & Service Design
Evolution of Design & Service Design
Storytelling with Data - See | Show | Tell | Engage
Storytelling with Data - See | Show | Tell | Engage
The Future Of Data Visualization
The Future Of Data Visualization
Visual Design with Data
Visual Design with Data
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
"Introduction to Data Visualization" Workshop for General Assembly by Hunter ...
Data Storytelling: The only way to unlock true insight from your data
Data Storytelling: The only way to unlock true insight from your data
Data Visualization & Data Storytelling
Data Visualization & Data Storytelling
UX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Best Practices for Killer Data Visualization
Best Practices for Killer Data Visualization
Big data case study collection
Big data case study collection
How to Visualize Data Like a Pro
How to Visualize Data Like a Pro
Recently uploaded
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
HyderabadDolls
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
HyderabadDolls
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
Amil baba
In Saudi Arabia Jeddah (+918761049707)) Buy Abortion Pills For Sale in Riyadh
In Saudi Arabia Jeddah (+918761049707)) Buy Abortion Pills For Sale in Riyadh
ahmedjiabur940
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
gragchanchal546
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
Office Furniture Plus - Irving
Bhubaneswar🌹Vip Call Girls Chandrashekharpur ❤Heer 9777949614 💟 Full Trusted ...
Bhubaneswar🌹Vip Call Girls Chandrashekharpur ❤Heer 9777949614 💟 Full Trusted ...
Call Girls Mumbai
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Priya Reddy
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
meghakumariji156
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
samsungultra782445
Salkhia @ Cheap Call Girls In Kolkata | Book 8005736733 Extreme Naughty Call ...
Salkhia @ Cheap Call Girls In Kolkata | Book 8005736733 Extreme Naughty Call ...
HyderabadDolls
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
manjugarg389
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
Alexandra Plesner
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
amgadibrahim92
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Nitya salvi
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
bingyichin04
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Nitya salvi
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
meghakumariji156
Recently uploaded
(20)
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
Eden Gardens ^ best call girls in Kolkata ₹7.5k Pick Up & Drop With Cash Paym...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
In Saudi Arabia Jeddah (+918761049707)) Buy Abortion Pills For Sale in Riyadh
In Saudi Arabia Jeddah (+918761049707)) Buy Abortion Pills For Sale in Riyadh
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
Bhubaneswar🌹Vip Call Girls Chandrashekharpur ❤Heer 9777949614 💟 Full Trusted ...
Bhubaneswar🌹Vip Call Girls Chandrashekharpur ❤Heer 9777949614 💟 Full Trusted ...
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Salkhia @ Cheap Call Girls In Kolkata | Book 8005736733 Extreme Naughty Call ...
Salkhia @ Cheap Call Girls In Kolkata | Book 8005736733 Extreme Naughty Call ...
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best 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