Mastering the Details in Interface Design - Web Design World 2009 - Seattle

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

http://sidebarcreative.com




Me, according to nGen works @ http://happywebbies.com/

Hi!Dan Rubintwitter: @danrubin



http://happywebbies.com

http://happywebbies.com



Pro CSSTechniques

Jeff CroftIan LloydDan Rubin

by





Web Standards Creativity

Dan Rubin(and 9 other guys)

by





Buy mybooks





I hate speaking at

9am





Someone bring me a

coffee





How yourdesign feels.





It’s about balance.





Proportion





Create patterns for margins and padding.





URL: http://cnn.com

http://cnn.com

http://cnn.com



CNN.com margins, padding, borders:6, 12, 18px







12px



12px

12px



6px

6px



18px



p.s. their body copy defaults to 12px





Patterns





Patterns make it easier to do the right thing.





URL: http://foxnews.com

http://foxnews.com

http://foxnews.com







Typography





Use relative text sizes to create balance.





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





Range kerning





aka “tracking” or “letter-spacing”









Grids





Using grids removes the guesswork.





Grids are just another simple pattern.





URL: http://www.guardian.co.uk

http://www.guardian.co.uk

http://www.guardian.co.uk





URL: http://monocle.com

http://monocle.com

http://monocle.com









Grids areonly guides.









URL: http://therissingtonpodcast.co.uk

http://therissingtonpodcast.co.uk

http://therissingtonpodcast.co.uk







URL: http://sushiandrobots.com

http://sushiandrobots.com

http://sushiandrobots.com



Texture





Reality is rarely smooth.





Add subtle texture to your designs.











URL: http://viget.com/inspire

http://viget.com/inspire

http://viget.com/inspire



Lines & Gradients











Layer Styles









Invite people to touch your interface.





URL: http://haveamint.com

http://haveamint.com

http://haveamint.com





Depth







Light Effects







Any image can createan effect.





Photo: sxc.hu #1005399









Darken



Multiply



Luminosity



Putting itto use.





Fixing Fox.





















Questions?





fin.slideshare.net/danrubintwitter: @danrubin



http://livepage.apple.com/

http://livepage.apple.com/