Mastering the Details in Interface Design
Seattle, July 2009
Dan RubinSidebar Creative
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Me, according to nGen works @ http://happywebbies.com/
Hi!Dan Rubintwitter: @danrubin
THE SIDEBAR TEAM WE LOOK MUCH NICER IN PERSON
SIDEBARC R E A T I V ETRAINING WORKSHOPS CONSULTING
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Me, according to nGen works @ http://happywebbies.com/
Hi!Dan Rubintwitter: @danrubin
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Pro CSSTechniques
Jeff CroftIan LloydDan Rubin
by
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Web Standards Creativity
Dan Rubin(and 9 other guys)
by
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Buy mybooks
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
I hate speaking at
9am
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Someone bring me a
coffee
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
How yourdesign feels.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
It’s about balance.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Proportion
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Create patterns for margins and padding.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://cnn.com
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
CNN.com margins, padding, borders:6, 12, 18px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
12px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
12px
12px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
6px
6px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
18px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
p.s. their body copy defaults to 12px
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Patterns
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Patterns make it easier to do the right thing.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://foxnews.com
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Typography
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Use relative text sizes to create balance.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
9121518212436
Relative text sizes create balance
Relative text sizes create balance
Relative text sizes create balanceRelative text sizes create balanceRelative text sizes create balanceRelative text sizes create balanceRelative text sizes create balance
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Range kerning
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
aka “tracking” or “letter-spacing”
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Grids
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Using grids removes the guesswork.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Grids are just another simple pattern.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://www.guardian.co.uk
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://monocle.com
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Grids areonly guides.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://therissingtonpodcast.co.uk
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://sushiandrobots.com
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Texture
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Reality is rarely smooth.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Add subtle texture to your designs.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://viget.com/inspire
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Lines & Gradients
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Layer Styles
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Invite people to touch your interface.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
URL: http://haveamint.com
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Depth
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Light Effects
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Any image can createan effect.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Photo: sxc.hu #1005399
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Darken
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Multiply
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Luminosity
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Putting itto use.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Fixing Fox.
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
Questions?
©2009 Dan Rubin » http://sidebarcreative.com
Mastering the Details in Interface Design Seattle, July 2009
fin.slideshare.net/danrubintwitter: @danrubin