Weitere ähnliche Inhalte
Ähnlich wie Mastering the Details in Interface Design - Web Design World 2009 - Seattle (10)
Kürzlich hochgeladen (20)
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
- 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