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)

Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
 
The pyramid principle by barbara minto
The pyramid principle by barbara mintoThe pyramid principle by barbara minto
The pyramid principle by barbara minto
 
Personas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User NeedsPersonas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User Needs
 
on Service Design
on Service Designon Service Design
on Service Design
 
UX STRAT Online 2021 Presentation by Jessa Parette, Capital One
UX STRAT Online 2021 Presentation by Jessa Parette, Capital OneUX STRAT Online 2021 Presentation by Jessa Parette, Capital One
UX STRAT Online 2021 Presentation by Jessa Parette, Capital One
 
Designing in Complexity | Julie Guinn | Elsevier
Designing in Complexity | Julie Guinn | ElsevierDesigning in Complexity | Julie Guinn | Elsevier
Designing in Complexity | Julie Guinn | Elsevier
 
[Accenture] Digital Business 2017
[Accenture] Digital Business 2017[Accenture] Digital Business 2017
[Accenture] Digital Business 2017
 
Product Management 101
Product Management 101Product Management 101
Product Management 101
 
Virtual SDGC20 Workshop | Oct 23, 2020 | Planet centric impact mapping
Virtual SDGC20 Workshop | Oct 23, 2020 | Planet centric impact mappingVirtual SDGC20 Workshop | Oct 23, 2020 | Planet centric impact mapping
Virtual SDGC20 Workshop | Oct 23, 2020 | Planet centric impact mapping
 
Technology Trends 2021 | Tech Vision | Accenture
Technology Trends 2021 | Tech Vision | AccentureTechnology Trends 2021 | Tech Vision | Accenture
Technology Trends 2021 | Tech Vision | Accenture
 
Culture of Innovation
Culture of InnovationCulture of Innovation
Culture of Innovation
 
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
24 Awesome Infographic Ideas to Inspire Your Next Beautiful Creation
 
Agile Development Design Process Powerpoint Guide
Agile Development Design Process Powerpoint GuideAgile Development Design Process Powerpoint Guide
Agile Development Design Process Powerpoint Guide
 
UX Maturity Models
UX Maturity Models   UX Maturity Models
UX Maturity Models
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Balloon Shaped Yearly Timeline Achievement
Balloon Shaped Yearly Timeline AchievementBalloon Shaped Yearly Timeline Achievement
Balloon Shaped Yearly Timeline Achievement
 
Design Sprints for Innovation
Design Sprints for InnovationDesign Sprints for Innovation
Design Sprints for Innovation
 
The Build Trap
The Build TrapThe Build Trap
The Build Trap
 
6 Year Transformation Map Product Roadmap Categories Template
6 Year Transformation Map Product Roadmap Categories Template6 Year Transformation Map Product Roadmap Categories Template
6 Year Transformation Map Product Roadmap Categories Template
 
Design Thinking and Lean UX
Design Thinking and Lean UXDesign Thinking and Lean UX
Design Thinking and Lean UX
 

Recently uploaded

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 
➥🔝 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
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 
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
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
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
 

Recently uploaded (20)

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
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...
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
➥🔝 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🔝 ...
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
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...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
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...
 
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
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
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
 
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...
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
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)
 

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