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)

Inside Google's Numbers in 2017
Inside Google's Numbers in 2017Inside Google's Numbers in 2017
Inside Google's Numbers in 2017
 
Why is FDA regulation such a mess
Why is FDA regulation such a messWhy is FDA regulation such a mess
Why is FDA regulation such a mess
 
Starting, Running, And Selling An Agency: Life Among The Monsters
Starting, Running, And Selling An Agency: Life Among The MonstersStarting, Running, And Selling An Agency: Life Among The Monsters
Starting, Running, And Selling An Agency: Life Among The Monsters
 
The Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to SnapchatThe Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to Snapchat
 
Marketing Plan for an App
Marketing Plan for an AppMarketing Plan for an App
Marketing Plan for an App
 
Yik Yak Growth Strategy by Victoria Young
Yik Yak Growth Strategy by Victoria YoungYik Yak Growth Strategy by Victoria Young
Yik Yak Growth Strategy by Victoria Young
 
Which font should I use?
Which font should I use?Which font should I use?
Which font should I use?
 
Launching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's BackLaunching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's Back
 
Anchorman 2 Changed what it Means to Be a Movie
Anchorman 2 Changed what it Means to Be a MovieAnchorman 2 Changed what it Means to Be a Movie
Anchorman 2 Changed what it Means to Be a Movie
 
2016 Digital predictions for marketing, tech, pop culture and everything in b...
2016 Digital predictions for marketing, tech, pop culture and everything in b...2016 Digital predictions for marketing, tech, pop culture and everything in b...
2016 Digital predictions for marketing, tech, pop culture and everything in b...
 
Publishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the CloudPublishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the Cloud
 
Talent Imitates, Genius Steals: Four Chapters on Being Creative in the Digita...
Talent Imitates, Genius Steals: Four Chapters on Being Creative in the Digita...Talent Imitates, Genius Steals: Four Chapters on Being Creative in the Digita...
Talent Imitates, Genius Steals: Four Chapters on Being Creative in the Digita...
 
MCJ Edward Tufte Notes
MCJ Edward Tufte NotesMCJ Edward Tufte Notes
MCJ Edward Tufte Notes
 
Data Storytelling for Digital Marketers
Data Storytelling for Digital Marketers Data Storytelling for Digital Marketers
Data Storytelling for Digital Marketers
 
SXSW 2016 takeaways
SXSW 2016 takeawaysSXSW 2016 takeaways
SXSW 2016 takeaways
 
How ANYONE can make insanely better slides
How ANYONE can make insanely better slidesHow ANYONE can make insanely better slides
How ANYONE can make insanely better slides
 
Eric Seufert - GDC San Francisco 2016 Presentation - Taking Flight Again: The...
Eric Seufert - GDC San Francisco 2016 Presentation - Taking Flight Again: The...Eric Seufert - GDC San Francisco 2016 Presentation - Taking Flight Again: The...
Eric Seufert - GDC San Francisco 2016 Presentation - Taking Flight Again: The...
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to others
 
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
 
Minecraft
MinecraftMinecraft
Minecraft
 

Recently uploaded

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
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
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
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 

Recently uploaded (20)

The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
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...
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
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
 
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...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...
 
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...
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 

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