SlideShare a Scribd company logo
Mastering the Details
 in Interface Design
           Seattle, July 2009

                  Dan Rubin
                  Sidebar Creative
Mastering the Details in Interface Design Seattle, July 2009




   Hi!SIDEBAR
      C R E AT I V E
    Dan Rubin
             TRAINING WORKSHOPS CONSULTING




    twitter: @danrubin




     THE SIDEBAR TEAM WE LOOK MUCH NICER IN PERSON
                                             Me, according to nGen works @ http://happywebbies.com/




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Hi!
    Dan Rubin
    twitter: @danrubin




                                          Me, according to nGen works @ http://happywebbies.com/




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
          Dan Rubin




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




      Web
      Standards
      Creativity
       by Dan Rubin
               (and 9 other guys)




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                      Buy my
                      books
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




      I hate
   speaking at
       9am
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




       Someone
       bring me a
         coffee
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     How your
     design feels.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   It’s about
   balance.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Proportion

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Create patterns
   for margins and
   padding.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               URL: http://cnn.com




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   CNN.com margins,
   padding, borders:
   6, 12, 18px

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




    12px




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




    12px



    12px




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     6px




     6px


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




 18px




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   p.s. their body copy
   defaults to 12px


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Patterns

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Patterns make it
   easier to do the
   right thing.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               URL: http://foxnews.com




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Typography

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Use relative text
   sizes to create
   balance.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




         9
        12         Relative text sizes create balance


        15 Relative text sizes create balance
                   Relative text sizes create balance


           Relative text sizes create balance
        18 Relative text sizes create balance
           Relative text sizes create balance
        21 Relative text sizes create balance
        24
        36


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Range kerning

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   aka “tracking” or
   “letter-spacing”


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Grids

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Using grids removes
   the guesswork.


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Grids are just
   another simple
   pattern.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                           URL: http://www.guardian.co.uk




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               URL: http://monocle.com




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




      Grids are
      only guides.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                       URL: http://therissingtonpodcast.co.uk




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                           URL: http://sushiandrobots.com




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     Texture

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     Reality is
     rarely smooth.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     Add subtle
     texture to
     your designs.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               URL: http://viget.com/inspire


©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Lines &
   Gradients

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Layer Styles

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Invite people
   to touch your
   interface.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               URL: http://haveamint.com




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Depth

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Light Effects

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Any image
   can create
   an effect.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




                                                               Photo: sxc.hu #1005399

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




    Darken




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




    Multiply




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




    Luminosity




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Putting it
   to use.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   Fixing Fox.

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




     Questions?

©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009




   fin.
   slideshare.net/danrubin
   twitter: @danrubin




©2009 Dan Rubin » http://sidebarcreative.com

More Related Content

PDF
Design and the Art of Freelancing - AWDG April 2009
PDF
Details Make the Difference, Web Design World 2008, Boston
PDF
LinkedIn UED: The Early Years (2003-2007)
DOCX
Document Design Final Project Paper
PPTX
20 web design trends - at the moment
PPTX
Website Creation
PPT
Building Web Interfaces
PDF
Aiga Web 101 — Visual Web Design Process
Design and the Art of Freelancing - AWDG April 2009
Details Make the Difference, Web Design World 2008, Boston
LinkedIn UED: The Early Years (2003-2007)
Document Design Final Project Paper
20 web design trends - at the moment
Website Creation
Building Web Interfaces
Aiga Web 101 — Visual Web Design Process

Viewers also liked (20)

PDF
Tips for talking about visual design for UX - ConveyUX
PDF
Inspiration from The Edge: New Patterns for Interface Design
PDF
Interface Design Basics (english)
PDF
Journey Through Visual Design Natalie Hansen
PDF
A C Aravinth - Portfolio
PDF
Responsive Web Design
PDF
7 Deadly Sins in Design
PPTX
EIGHT GOLDEN RULES OF INTERFACE DESIGN
PDF
Visual Tools
TXT
Coding pilkades
PDF
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
PDF
Web, Design, and UX Trends for 2006
PDF
Web Form Design (Web Visions 2009)
KEY
#4_web_ux_wakizaka
PDF
Mobile Web UX - TdT@Cluj #17
PDF
Doing Your HW - A UX approach to your web design
PDF
Web design ux trends 2013
PDF
Web, Design, and UX Trends for 2008
PDF
Introduction to Antetype - Web UX design tool
PDF
Web, Design, and UX Trends for 2005
Tips for talking about visual design for UX - ConveyUX
Inspiration from The Edge: New Patterns for Interface Design
Interface Design Basics (english)
Journey Through Visual Design Natalie Hansen
A C Aravinth - Portfolio
Responsive Web Design
7 Deadly Sins in Design
EIGHT GOLDEN RULES OF INTERFACE DESIGN
Visual Tools
Coding pilkades
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Web, Design, and UX Trends for 2006
Web Form Design (Web Visions 2009)
#4_web_ux_wakizaka
Mobile Web UX - TdT@Cluj #17
Doing Your HW - A UX approach to your web design
Web design ux trends 2013
Web, Design, and UX Trends for 2008
Introduction to Antetype - Web UX design tool
Web, Design, and UX Trends for 2005
Ad

Similar to Mastering the Details in Interface Design - Web Design World 2009 - Seattle (10)

PDF
FOWA Bristol/ Leeds- Dan Rubin
PDF
Making your-interface-invisible
PDF
Designing Virtual Realism (AEA09)
PDF
Designing Virtual Realism (Web09)
PDF
Designing Virtual Realism (@media 2009)
PDF
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 
PDF
Titanium Powered Desktop & Mobile Apps (11/21/2009)
KEY
Cufon - Javascript Font Replacement
PDF
Hybrid mobile apps
PDF
CHI 2009 Highlights
FOWA Bristol/ Leeds- Dan Rubin
Making your-interface-invisible
Designing Virtual Realism (AEA09)
Designing Virtual Realism (Web09)
Designing Virtual Realism (@media 2009)
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 
Titanium Powered Desktop & Mobile Apps (11/21/2009)
Cufon - Javascript Font Replacement
Hybrid mobile apps
CHI 2009 Highlights
Ad

Recently uploaded (20)

PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PDF
Urban Design Final Project-Context
PPT
Machine printing techniques and plangi dyeing
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
building Planning Overview for step wise design.pptx
PDF
Quality Control Management for RMG, Level- 4, Certificate
DOCX
The story of the first moon landing.docx
PPTX
Media And Information Literacy for Grade 12
PPTX
6- Architecture design complete (1).pptx
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPT
UNIT I- Yarn, types, explanation, process
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
Tenders & Contracts Works _ Services Afzal.pptx
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
HPE Aruba-master-icon-library_052722.pptx
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
Urban Design Final Project-Context
Machine printing techniques and plangi dyeing
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
building Planning Overview for step wise design.pptx
Quality Control Management for RMG, Level- 4, Certificate
The story of the first moon landing.docx
Media And Information Literacy for Grade 12
6- Architecture design complete (1).pptx
YOW2022-BNE-MinimalViableArchitecture.pdf
AD Bungalow Case studies Sem 2.pptxvwewev
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
UNIT I- Yarn, types, explanation, process
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx

Mastering the Details in Interface Design - Web Design World 2009 - Seattle

  • 1. Mastering the Details in Interface Design Seattle, July 2009 Dan Rubin Sidebar Creative
  • 2. Mastering the Details in Interface Design Seattle, July 2009 Hi!SIDEBAR C R E AT I V E Dan Rubin TRAINING WORKSHOPS CONSULTING twitter: @danrubin THE SIDEBAR TEAM WE LOOK MUCH NICER IN PERSON Me, according to nGen works @ http://happywebbies.com/ ©2009 Dan Rubin » http://sidebarcreative.com
  • 3. Mastering the Details in Interface Design Seattle, July 2009 Hi! Dan Rubin twitter: @danrubin Me, according to nGen works @ http://happywebbies.com/ ©2009 Dan Rubin » http://sidebarcreative.com
  • 4. Mastering the Details in Interface Design Seattle, July 2009 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2009 Dan Rubin » http://sidebarcreative.com
  • 5. Mastering the Details in Interface Design Seattle, July 2009 Web Standards Creativity by Dan Rubin (and 9 other guys) ©2009 Dan Rubin » http://sidebarcreative.com
  • 6. Mastering the Details in Interface Design Seattle, July 2009 Buy my books ©2009 Dan Rubin » http://sidebarcreative.com
  • 7. Mastering the Details in Interface Design Seattle, July 2009 I hate speaking at 9am ©2009 Dan Rubin » http://sidebarcreative.com
  • 8. Mastering the Details in Interface Design Seattle, July 2009 Someone bring me a coffee ©2009 Dan Rubin » http://sidebarcreative.com
  • 9. Mastering the Details in Interface Design Seattle, July 2009 How your design feels. ©2009 Dan Rubin » http://sidebarcreative.com
  • 10. Mastering the Details in Interface Design Seattle, July 2009 It’s about balance. ©2009 Dan Rubin » http://sidebarcreative.com
  • 11. Mastering the Details in Interface Design Seattle, July 2009 Proportion ©2009 Dan Rubin » http://sidebarcreative.com
  • 12. Mastering the Details in Interface Design Seattle, July 2009 Create patterns for margins and padding. ©2009 Dan Rubin » http://sidebarcreative.com
  • 13. Mastering the Details in Interface Design Seattle, July 2009 URL: http://cnn.com ©2009 Dan Rubin » http://sidebarcreative.com
  • 14. Mastering the Details in Interface Design Seattle, July 2009 CNN.com margins, padding, borders: 6, 12, 18px ©2009 Dan Rubin » http://sidebarcreative.com
  • 15. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 16. Mastering the Details in Interface Design Seattle, July 2009 12px ©2009 Dan Rubin » http://sidebarcreative.com
  • 17. Mastering the Details in Interface Design Seattle, July 2009 12px 12px ©2009 Dan Rubin » http://sidebarcreative.com
  • 18. Mastering the Details in Interface Design Seattle, July 2009 6px 6px ©2009 Dan Rubin » http://sidebarcreative.com
  • 19. Mastering the Details in Interface Design Seattle, July 2009 18px ©2009 Dan Rubin » http://sidebarcreative.com
  • 20. Mastering the Details in Interface Design Seattle, July 2009 p.s. their body copy defaults to 12px ©2009 Dan Rubin » http://sidebarcreative.com
  • 21. Mastering the Details in Interface Design Seattle, July 2009 Patterns ©2009 Dan Rubin » http://sidebarcreative.com
  • 22. Mastering the Details in Interface Design Seattle, July 2009 Patterns make it easier to do the right thing. ©2009 Dan Rubin » http://sidebarcreative.com
  • 23. Mastering the Details in Interface Design Seattle, July 2009 URL: http://foxnews.com ©2009 Dan Rubin » http://sidebarcreative.com
  • 24. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 25. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 26. Mastering the Details in Interface Design Seattle, July 2009 Typography ©2009 Dan Rubin » http://sidebarcreative.com
  • 27. Mastering the Details in Interface Design Seattle, July 2009 Use relative text sizes to create balance. ©2009 Dan Rubin » http://sidebarcreative.com
  • 28. Mastering the Details in Interface Design Seattle, July 2009 9 12 Relative text sizes create balance 15 Relative text sizes create balance Relative text sizes create balance Relative text sizes create balance 18 Relative text sizes create balance Relative text sizes create balance 21 Relative text sizes create balance 24 36 ©2009 Dan Rubin » http://sidebarcreative.com
  • 29. Mastering the Details in Interface Design Seattle, July 2009 Range kerning ©2009 Dan Rubin » http://sidebarcreative.com
  • 30. Mastering the Details in Interface Design Seattle, July 2009 aka “tracking” or “letter-spacing” ©2009 Dan Rubin » http://sidebarcreative.com
  • 31. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 32. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 33. Mastering the Details in Interface Design Seattle, July 2009 Grids ©2009 Dan Rubin » http://sidebarcreative.com
  • 34. Mastering the Details in Interface Design Seattle, July 2009 Using grids removes the guesswork. ©2009 Dan Rubin » http://sidebarcreative.com
  • 35. Mastering the Details in Interface Design Seattle, July 2009 Grids are just another simple pattern. ©2009 Dan Rubin » http://sidebarcreative.com
  • 36. Mastering the Details in Interface Design Seattle, July 2009 URL: http://www.guardian.co.uk ©2009 Dan Rubin » http://sidebarcreative.com
  • 37. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 38. Mastering the Details in Interface Design Seattle, July 2009 URL: http://monocle.com ©2009 Dan Rubin » http://sidebarcreative.com
  • 39. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 40. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 41. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 42. Mastering the Details in Interface Design Seattle, July 2009 Grids are only guides. ©2009 Dan Rubin » http://sidebarcreative.com
  • 43. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 44. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 45. Mastering the Details in Interface Design Seattle, July 2009 URL: http://therissingtonpodcast.co.uk ©2009 Dan Rubin » http://sidebarcreative.com
  • 46. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 47. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 48. Mastering the Details in Interface Design Seattle, July 2009 URL: http://sushiandrobots.com ©2009 Dan Rubin » http://sidebarcreative.com
  • 49. Mastering the Details in Interface Design Seattle, July 2009 Texture ©2009 Dan Rubin » http://sidebarcreative.com
  • 50. Mastering the Details in Interface Design Seattle, July 2009 Reality is rarely smooth. ©2009 Dan Rubin » http://sidebarcreative.com
  • 51. Mastering the Details in Interface Design Seattle, July 2009 Add subtle texture to your designs. ©2009 Dan Rubin » http://sidebarcreative.com
  • 52. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 53. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 54. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 55. Mastering the Details in Interface Design Seattle, July 2009 URL: http://viget.com/inspire ©2009 Dan Rubin » http://sidebarcreative.com
  • 56. Mastering the Details in Interface Design Seattle, July 2009 Lines & Gradients ©2009 Dan Rubin » http://sidebarcreative.com
  • 57. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 58. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 59. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 60. Mastering the Details in Interface Design Seattle, July 2009 Layer Styles ©2009 Dan Rubin » http://sidebarcreative.com
  • 61. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 62. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 63. Mastering the Details in Interface Design Seattle, July 2009 Invite people to touch your interface. ©2009 Dan Rubin » http://sidebarcreative.com
  • 64. Mastering the Details in Interface Design Seattle, July 2009 URL: http://haveamint.com ©2009 Dan Rubin » http://sidebarcreative.com
  • 65. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 66. Mastering the Details in Interface Design Seattle, July 2009 Depth ©2009 Dan Rubin » http://sidebarcreative.com
  • 67. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 68. Mastering the Details in Interface Design Seattle, July 2009 Light Effects ©2009 Dan Rubin » http://sidebarcreative.com
  • 69. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 70. Mastering the Details in Interface Design Seattle, July 2009 Any image can create an effect. ©2009 Dan Rubin » http://sidebarcreative.com
  • 71. Mastering the Details in Interface Design Seattle, July 2009 Photo: sxc.hu #1005399 ©2009 Dan Rubin » http://sidebarcreative.com
  • 72. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 73. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 74. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 75. Mastering the Details in Interface Design Seattle, July 2009 Darken ©2009 Dan Rubin » http://sidebarcreative.com
  • 76. Mastering the Details in Interface Design Seattle, July 2009 Multiply ©2009 Dan Rubin » http://sidebarcreative.com
  • 77. Mastering the Details in Interface Design Seattle, July 2009 Luminosity ©2009 Dan Rubin » http://sidebarcreative.com
  • 78. Mastering the Details in Interface Design Seattle, July 2009 Putting it to use. ©2009 Dan Rubin » http://sidebarcreative.com
  • 79. Mastering the Details in Interface Design Seattle, July 2009 Fixing Fox. ©2009 Dan Rubin » http://sidebarcreative.com
  • 80. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 81. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 82. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 83. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 84. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 85. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 86. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 87. Mastering the Details in Interface Design Seattle, July 2009 Questions? ©2009 Dan Rubin » http://sidebarcreative.com
  • 88. Mastering the Details in Interface Design Seattle, July 2009 fin. slideshare.net/danrubin twitter: @danrubin ©2009 Dan Rubin » http://sidebarcreative.com