Your SlideShare is downloading. ×
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,571
views

Published on

Slides from my session at Web Design World Seattle, July 2009.

Slides from my session at Web Design World Seattle, July 2009.

Published in: Design, Technology, Business

1 Comment
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,571
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
189
Comments
1
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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