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

1,984 views

Published on

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,984
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
202
Comments
1
Likes
18
Embeds 0
No embeds

No notes for slide

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

  1. 1. Mastering the Details in Interface Design Seattle, July 2009 Dan Rubin Sidebar Creative
  2. 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. 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. 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. 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. 6. Mastering the Details in Interface Design Seattle, July 2009 Buy my books ©2009 Dan Rubin » http://sidebarcreative.com
  7. 7. Mastering the Details in Interface Design Seattle, July 2009 I hate speaking at 9am ©2009 Dan Rubin » http://sidebarcreative.com
  8. 8. Mastering the Details in Interface Design Seattle, July 2009 Someone bring me a coffee ©2009 Dan Rubin » http://sidebarcreative.com
  9. 9. Mastering the Details in Interface Design Seattle, July 2009 How your design feels. ©2009 Dan Rubin » http://sidebarcreative.com
  10. 10. Mastering the Details in Interface Design Seattle, July 2009 It’s about balance. ©2009 Dan Rubin » http://sidebarcreative.com
  11. 11. Mastering the Details in Interface Design Seattle, July 2009 Proportion ©2009 Dan Rubin » http://sidebarcreative.com
  12. 12. Mastering the Details in Interface Design Seattle, July 2009 Create patterns for margins and padding. ©2009 Dan Rubin » http://sidebarcreative.com
  13. 13. Mastering the Details in Interface Design Seattle, July 2009 URL: http://cnn.com ©2009 Dan Rubin » http://sidebarcreative.com
  14. 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. 15. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  16. 16. Mastering the Details in Interface Design Seattle, July 2009 12px ©2009 Dan Rubin » http://sidebarcreative.com
  17. 17. Mastering the Details in Interface Design Seattle, July 2009 12px 12px ©2009 Dan Rubin » http://sidebarcreative.com
  18. 18. Mastering the Details in Interface Design Seattle, July 2009 6px 6px ©2009 Dan Rubin » http://sidebarcreative.com
  19. 19. Mastering the Details in Interface Design Seattle, July 2009 18px ©2009 Dan Rubin » http://sidebarcreative.com
  20. 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. 21. Mastering the Details in Interface Design Seattle, July 2009 Patterns ©2009 Dan Rubin » http://sidebarcreative.com
  22. 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. 23. Mastering the Details in Interface Design Seattle, July 2009 URL: http://foxnews.com ©2009 Dan Rubin » http://sidebarcreative.com
  24. 24. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  25. 25. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  26. 26. Mastering the Details in Interface Design Seattle, July 2009 Typography ©2009 Dan Rubin » http://sidebarcreative.com
  27. 27. Mastering the Details in Interface Design Seattle, July 2009 Use relative text sizes to create balance. ©2009 Dan Rubin » http://sidebarcreative.com
  28. 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. 29. Mastering the Details in Interface Design Seattle, July 2009 Range kerning ©2009 Dan Rubin » http://sidebarcreative.com
  30. 30. Mastering the Details in Interface Design Seattle, July 2009 aka “tracking” or “letter-spacing” ©2009 Dan Rubin » http://sidebarcreative.com
  31. 31. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  32. 32. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  33. 33. Mastering the Details in Interface Design Seattle, July 2009 Grids ©2009 Dan Rubin » http://sidebarcreative.com
  34. 34. Mastering the Details in Interface Design Seattle, July 2009 Using grids removes the guesswork. ©2009 Dan Rubin » http://sidebarcreative.com
  35. 35. Mastering the Details in Interface Design Seattle, July 2009 Grids are just another simple pattern. ©2009 Dan Rubin » http://sidebarcreative.com
  36. 36. Mastering the Details in Interface Design Seattle, July 2009 URL: http://www.guardian.co.uk ©2009 Dan Rubin » http://sidebarcreative.com
  37. 37. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  38. 38. Mastering the Details in Interface Design Seattle, July 2009 URL: http://monocle.com ©2009 Dan Rubin » http://sidebarcreative.com
  39. 39. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  40. 40. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  41. 41. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  42. 42. Mastering the Details in Interface Design Seattle, July 2009 Grids are only guides. ©2009 Dan Rubin » http://sidebarcreative.com
  43. 43. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  44. 44. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  45. 45. Mastering the Details in Interface Design Seattle, July 2009 URL: http://therissingtonpodcast.co.uk ©2009 Dan Rubin » http://sidebarcreative.com
  46. 46. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  47. 47. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  48. 48. Mastering the Details in Interface Design Seattle, July 2009 URL: http://sushiandrobots.com ©2009 Dan Rubin » http://sidebarcreative.com
  49. 49. Mastering the Details in Interface Design Seattle, July 2009 Texture ©2009 Dan Rubin » http://sidebarcreative.com
  50. 50. Mastering the Details in Interface Design Seattle, July 2009 Reality is rarely smooth. ©2009 Dan Rubin » http://sidebarcreative.com
  51. 51. Mastering the Details in Interface Design Seattle, July 2009 Add subtle texture to your designs. ©2009 Dan Rubin » http://sidebarcreative.com
  52. 52. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  53. 53. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  54. 54. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  55. 55. Mastering the Details in Interface Design Seattle, July 2009 URL: http://viget.com/inspire ©2009 Dan Rubin » http://sidebarcreative.com
  56. 56. Mastering the Details in Interface Design Seattle, July 2009 Lines & Gradients ©2009 Dan Rubin » http://sidebarcreative.com
  57. 57. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  58. 58. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  59. 59. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  60. 60. Mastering the Details in Interface Design Seattle, July 2009 Layer Styles ©2009 Dan Rubin » http://sidebarcreative.com
  61. 61. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  62. 62. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  63. 63. Mastering the Details in Interface Design Seattle, July 2009 Invite people to touch your interface. ©2009 Dan Rubin » http://sidebarcreative.com
  64. 64. Mastering the Details in Interface Design Seattle, July 2009 URL: http://haveamint.com ©2009 Dan Rubin » http://sidebarcreative.com
  65. 65. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  66. 66. Mastering the Details in Interface Design Seattle, July 2009 Depth ©2009 Dan Rubin » http://sidebarcreative.com
  67. 67. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  68. 68. Mastering the Details in Interface Design Seattle, July 2009 Light Effects ©2009 Dan Rubin » http://sidebarcreative.com
  69. 69. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  70. 70. Mastering the Details in Interface Design Seattle, July 2009 Any image can create an effect. ©2009 Dan Rubin » http://sidebarcreative.com
  71. 71. Mastering the Details in Interface Design Seattle, July 2009 Photo: sxc.hu #1005399 ©2009 Dan Rubin » http://sidebarcreative.com
  72. 72. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  73. 73. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  74. 74. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  75. 75. Mastering the Details in Interface Design Seattle, July 2009 Darken ©2009 Dan Rubin » http://sidebarcreative.com
  76. 76. Mastering the Details in Interface Design Seattle, July 2009 Multiply ©2009 Dan Rubin » http://sidebarcreative.com
  77. 77. Mastering the Details in Interface Design Seattle, July 2009 Luminosity ©2009 Dan Rubin » http://sidebarcreative.com
  78. 78. Mastering the Details in Interface Design Seattle, July 2009 Putting it to use. ©2009 Dan Rubin » http://sidebarcreative.com
  79. 79. Mastering the Details in Interface Design Seattle, July 2009 Fixing Fox. ©2009 Dan Rubin » http://sidebarcreative.com
  80. 80. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  81. 81. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  82. 82. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  83. 83. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  84. 84. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  85. 85. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  86. 86. Mastering the Details in Interface Design Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  87. 87. Mastering the Details in Interface Design Seattle, July 2009 Questions? ©2009 Dan Rubin » http://sidebarcreative.com
  88. 88. Mastering the Details in Interface Design Seattle, July 2009 fin. slideshare.net/danrubin twitter: @danrubin ©2009 Dan Rubin » http://sidebarcreative.com

×