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

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