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

Design Theory - Lecture 03: Design as Learning / Methods & Tools
Design Theory - Lecture 03: Design as Learning / Methods & ToolsDesign Theory - Lecture 03: Design as Learning / Methods & Tools
Design Theory - Lecture 03: Design as Learning / Methods & Tools
Bas Leurs
 

What's hot (20)

The Number One Mistake Everybody Makes on Twitter
The Number One Mistake Everybody Makes on TwitterThe Number One Mistake Everybody Makes on Twitter
The Number One Mistake Everybody Makes on Twitter
 
The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical Interface
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Wild Slides: 20 tips to improve your PowerPoint presentations
Wild Slides: 20 tips to improve your PowerPoint presentationsWild Slides: 20 tips to improve your PowerPoint presentations
Wild Slides: 20 tips to improve your PowerPoint presentations
 
Graphic Design Introduction Upload
Graphic Design Introduction   UploadGraphic Design Introduction   Upload
Graphic Design Introduction Upload
 
25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
 
Design Theory - Lecture 03: Design as Learning / Methods & Tools
Design Theory - Lecture 03: Design as Learning / Methods & ToolsDesign Theory - Lecture 03: Design as Learning / Methods & Tools
Design Theory - Lecture 03: Design as Learning / Methods & Tools
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
A Guide to Using Color Effectively
A Guide to Using Color EffectivelyA Guide to Using Color Effectively
A Guide to Using Color Effectively
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 
Its all about Infographics
Its all about InfographicsIts all about Infographics
Its all about Infographics
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
PrograMetrix Report: Cannabis & CBD Digital Advertising Trends
PrograMetrix Report: Cannabis & CBD Digital Advertising TrendsPrograMetrix Report: Cannabis & CBD Digital Advertising Trends
PrograMetrix Report: Cannabis & CBD Digital Advertising Trends
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Creating an Magazine ad with Adobe InDesign
Creating an Magazine ad with Adobe InDesignCreating an Magazine ad with Adobe InDesign
Creating an Magazine ad with Adobe InDesign
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 

Recently uploaded

Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
karishmasinghjnh
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
 

Recently uploaded (20)

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...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
👉 Call Girls Service Amritsar 👉📞 6367187148 👉📞 Just📲 Call Ruhi Call Girl Agen...
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service AvailableCall Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 

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