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

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 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
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
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...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
 
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
 
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
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 

Recently uploaded (20)

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 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...
 
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...
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
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...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...
 
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
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
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
 
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
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
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...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...
 
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 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
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
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
 

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