Dan Rubin gave a presentation titled "Details Make the Difference" at Web Design World Boston in 2008. The presentation covered various techniques for improving web design through careful attention to details, including using proportional design, grids, typography, texture, lines and gradients, layer styles, and light effects. The presentation argued that proper use of such details can create balance and improve user experience.

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/