SlideShare a Scribd company logo
1 of 96
Download to read offline
Edward Tufte &
Information Design
For the Web

© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Dilbert 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, architecture, and prose.


                                           The Visual Display of Quantitative Information

    © 2011 NATHAN HUENING   sprockethouse.com                        12 March 2011   Chapel Hill, NC
Outline


Information design principles

Application to Web design




 © 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
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
Principle 1



Graphics
reveal data



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
“   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
“   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
Principle 2



To clarify,
add detail



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
“   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
Principle 3



Small multiples
invite comparisons



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Tufte iPhone Video:

http://www.edwardtufte.com/
bboard/q-and-a-fetch-msg?
msg_id=00036T
“   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
Principle 4



The “smallest
effective difference”



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
“   Now what can be eliminated?




                                                 Frank Lloyd Wright

    © 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Principle 5



Above all else,
show the data



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
“   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
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
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
“   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
Application 1



Design
reveals data



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Application 1a



Contrast
reveals data



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Application 1b



Contrast
reveals information



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Andy Rutledge A List Apart
“   Information consists of
    differences that make
    a difference.




                                                Envisioning Information 65

    © 2011 NATHAN HUENING   sprockethouse.com         12 March 2011   Chapel Hill, NC
1       2
    3       4

5       6
Application 2



To clarify,
add detail



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
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
Scan annotated
content invent.
Application 3



Employ the smallest
effective difference



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
tutorial9.net
tutorial9.net
Dan Cederholm simplebits.com
Doug Bowman stopdesign.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   sprockethouse.com            12 March 2011   Chapel Hill, NC
Application 4



Design from the
inside, out



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
Warren Parsons Photo
“   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
Application 5



Above all else,
show the content



© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC
“   In an architecture of content,
    the information becomes the
    interface.




                                                Visual Explanations 146

    © 2011 NATHAN HUENING   sprockethouse.com      12 March 2011   Chapel Hill, NC
“   Aesthetics matter: attractive
    things work better.




                                                Donald Norman Interactions Magazine

    © 2011 NATHAN HUENING   sprockethouse.com                   12 March 2011   Chapel Hill, NC
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
“   ‘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
Thank you



This has been
a Sprocket House
production.




© 2011 NATHAN HUENING   sprockethouse.com   12 March 2011   Chapel Hill, NC

More Related Content

What's hot

What's hot (20)

Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 
Smart Cities – how to master the world's biggest growth challenge
Smart Cities – how to master the world's biggest growth challengeSmart Cities – how to master the world's biggest growth challenge
Smart Cities – how to master the world's biggest growth challenge
 
SlideShare Experts - 7 Experts Reveal Their Presentation Design Secrets
SlideShare Experts - 7 Experts Reveal Their Presentation Design SecretsSlideShare Experts - 7 Experts Reveal Their Presentation Design Secrets
SlideShare Experts - 7 Experts Reveal Their Presentation Design Secrets
 
UBER: THE TRANSPORTATION VIRUS
UBER: THE TRANSPORTATION VIRUSUBER: THE TRANSPORTATION VIRUS
UBER: THE TRANSPORTATION VIRUS
 
10 Steps to Actionable Analytics for Digital Marketing
10 Steps to Actionable Analytics for Digital Marketing10 Steps to Actionable Analytics for Digital Marketing
10 Steps to Actionable Analytics for Digital Marketing
 
Getting Started With OKRs (Objective Key Results)
Getting Started With OKRs (Objective Key Results) Getting Started With OKRs (Objective Key Results)
Getting Started With OKRs (Objective Key Results)
 
From Design Thinking to Design Doing
From Design Thinking to Design Doing From Design Thinking to Design Doing
From Design Thinking to Design Doing
 
The Electric Car Tipping Point
The Electric Car Tipping PointThe Electric Car Tipping Point
The Electric Car Tipping Point
 
Data Design: Where Math and Art Collide
Data Design: Where Math and Art CollideData Design: Where Math and Art Collide
Data Design: Where Math and Art Collide
 
Consumers insights
Consumers insightsConsumers insights
Consumers insights
 
Mattermark 2nd (Final) Series A Deck
Mattermark 2nd (Final) Series A DeckMattermark 2nd (Final) Series A Deck
Mattermark 2nd (Final) Series A Deck
 
Design in Tech Report 2017
Design in Tech Report 2017Design in Tech Report 2017
Design in Tech Report 2017
 
The State of Creativity 2023
The State of Creativity 2023The State of Creativity 2023
The State of Creativity 2023
 
Digital Strategy Toolbox
Digital Strategy ToolboxDigital Strategy Toolbox
Digital Strategy Toolbox
 
ROI of CX Transformation
ROI of CX TransformationROI of CX Transformation
ROI of CX Transformation
 
LaunchRock
LaunchRockLaunchRock
LaunchRock
 
Designing products against customer jobs
Designing products against customer jobsDesigning products against customer jobs
Designing products against customer jobs
 
4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams
 
50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)
 
Marketing mix or attribution journey towards unified marketing analytics
Marketing mix or attribution   journey towards unified marketing analyticsMarketing mix or attribution   journey towards unified marketing analytics
Marketing mix or attribution journey towards unified marketing analytics
 

Recently uploaded

一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 

Recently uploaded (20)

Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 

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
  • 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
  • 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
  • 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
  • 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