Your SlideShare is downloading. ×
Details Make the Difference, Web Design World 2008, Boston
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Details Make the Difference, Web Design World 2008, Boston

3,024
views

Published on

Published in: Technology, Design

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,024
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
104
Comments
0
Likes
10
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. Details Make the Difference Web Design World Boston, 2008 » Dan Rubin Sidebar Creative
  • 2. Details Make the Difference Web Design World Boston, 2008 Hi! Me, according to nGen works @ http://happywebbies.com/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 3. Details Make the Difference Web Design World Boston, 2008 Web Standards Creativity by Dan Rubin (and 9 other guys) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 4. Details Make the Difference Web Design World Boston, 2008 What we’re talking about: ✓ Proportional design ✓ Borders, lines and layer modes ✓ Texture, Depth and Light Effects ✓ a bunch of other interesting stuff ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 5. Details Make the Difference Web Design World Boston, 2008 Why are we here? ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 6. Details Make the Difference Web Design World Boston, 2008 Details define how a design feels. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 7. Details Make the Difference Web Design World Boston, 2008 It’s all about balance. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 8. Details Make the Difference Web Design World Boston, 2008 Proportion ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 9. Details Make the Difference Web Design World Boston, 2008 Create patterns for margins and padding. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 10. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 11. Details Make the Difference Web Design World Boston, 2008 CNN.com margins, padding, borders: 6, 12, 18px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 12. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 13. Details Make the Difference Web Design World Boston, 2008 12px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 14. Details Make the Difference Web Design World Boston, 2008 12px 12px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 15. Details Make the Difference Web Design World Boston, 2008 6px 6px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 16. Details Make the Difference Web Design World Boston, 2008 18px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 17. Details Make the Difference Web Design World Boston, 2008 p.s. their body copy defaults to 12px ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 18. Details Make the Difference Web Design World Boston, 2008 Why should we love patterns? ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 19. Details Make the Difference Web Design World Boston, 2008 Patterns make it easier to do the right thing. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 20. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 21. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 22. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 23. Details Make the Difference Web Design World Boston, 2008 Typography ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 24. Details Make the Difference Web Design World Boston, 2008 Use relative text sizes to create balance. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 25. Details Make the Difference Web Design World Boston, 2008 9 12 Relative text sizes create balance Relative text sizes create balance 15 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 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 26. Details Make the Difference Web Design World Boston, 2008 Range kerning ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 27. Details Make the Difference Web Design World Boston, 2008 aka “tracking” or “letter-spacing” ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 28. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 29. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 30. Details Make the Difference Web Design World Boston, 2008 Pretty Type ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 31. Details Make the Difference Web Design World Boston, 2008 Don’t be afraid to experiment. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 32. Details Make the Difference Web Design World Boston, 2008 Gradient Overlay: White to Black, 20% Opacity Stroke: White, 5px, 20% Opacity Inner Glow: White, Screen, 5px, 60% Opacity ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 33. Details Make the Difference Web Design World Boston, 2008 Grids ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 34. Details Make the Difference Web Design World Boston, 2008 Using grids removes the guesswork. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 35. Details Make the Difference Web Design World Boston, 2008 Grids are just another simple pattern. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 36. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 37. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 38. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 39. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 40. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 41. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 42. Details Make the Difference Web Design World Boston, 2008 Grid = Box break out of it. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 43. Details Make the Difference Web Design World Boston, 2008 Remember, grids are just helpful guides. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 44. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 45. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 46. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 47. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 48. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 49. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 50. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 51. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 52. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 53. Details Make the Difference Web Design World Boston, 2008 Texture ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 54. Details Make the Difference Web Design World Boston, 2008 Reality is rarely smooth. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 55. Details Make the Difference Web Design World Boston, 2008 Add subtle texture to your designs. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 56. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 57. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 58. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 59. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 60. Details Make the Difference Web Design World Boston, 2008 Lines & Gradients ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 61. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 62. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 63. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 64. Details Make the Difference Web Design World Boston, 2008 Layer Styles ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 65. Details Make the Difference Web Design World Boston, 2008 Layer Styles (patterns strike again) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 66. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 67. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 68. Details Make the Difference Web Design World Boston, 2008 Tactile ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 69. Details Make the Difference Web Design World Boston, 2008 Invite people to touch your GUI. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 70. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 71. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 72. Details Make the Difference Web Design World Boston, 2008 Depth ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 73. Details Make the Difference Web Design World Boston, 2008 Add dimension to improve recognition. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 74. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 75. Details Make the Difference Web Design World Boston, 2008 Light Effects ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 76. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 77. Details Make the Difference Web Design World Boston, 2008 Almost any image can create an effect. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 78. Details Make the Difference Web Design World Boston, 2008 Photo: sxc.hu #1005399 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 79. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 80. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 81. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 82. Details Make the Difference Web Design World Boston, 2008 Darken ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 83. Details Make the Difference Web Design World Boston, 2008 Multiply ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 84. Details Make the Difference Web Design World Boston, 2008 Luminosity ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 85. Details Make the Difference Web Design World Boston, 2008 Putting it to use ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 86. Details Make the Difference Web Design World Boston, 2008 Fixing Fox. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 87. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 88. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 89. Details Make the Difference Web Design World Boston, 2008 But wait, there’s more... ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 90. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 91. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 92. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 93. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 94. Details Make the Difference Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 95. Details Make the Difference Web Design World Boston, 2008 http://superfluousbanter.org/ presentations/2008/ (download the slides here) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 96. Details Make the Difference Web Design World Boston, 2008 Q&A ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/