Mastering the Details in Interface Design

Seattle, July 2009

Dan RubinSidebar Creative

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

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

Hi!Dan Rubintwitter: @danrubin

Pro CSSTechniques

Jeff CroftIan LloydDan Rubin

Web Standards Creativity

Dan Rubin(and 9 other guys)

Buy mybooks

I hate speaking at

Someone bring me a

coffee

How yourdesign feels.

It’s about balance.

Proportion

Create patterns for margins and padding.

URL: http://cnn.com

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

p.s. their body copy defaults to 12px

Patterns

Patterns make it easier to do the right thing.

URL: http://foxnews.com

Typography

Use relative text sizes to create balance.

9121518212436

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”

Using grids removes the guesswork.

Grids are just another simple pattern.

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

URL: http://monocle.com

Grids areonly guides.

URL: http://therissingtonpodcast.co.uk

URL: http://sushiandrobots.com

Texture

Reality is rarely smooth.

Add subtle texture to your designs.

URL: http://viget.com/inspire

Lines & Gradients

Layer Styles

Invite people to touch your interface.

URL: http://haveamint.com

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

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

Design

in a Virtual World Mastering Design & Construction Week

Mastering Graphics Design With Adobe Photoshop

Social by Design - Seattle Interactive Conference

Seattle Design Guidelines - Home

Mastering Infocube Design

Mastering architecture, design- and code-quality

Melissa Love Design - Mastering Wordpress

The Whittaker update @ Seattle Design Commission

Seattle Design Commission

Design Review Board - Seattle

Chapter 4 General Design - Seattle

SEATTLE COMMUNITY DESIGN MMUN PROCESS FINAL … · August 2011 to July 2012: ... Seattle Community Design Process Final Report. WSDOT will also brief the Mayor of Seattle and the

Responsive Web Design: Mastering The Multi Screen World

522784 Seattle Graphic Design and Web Design Portfolio Michael Foster

Mastering the New Basestations: Design and Test of

The Beauty of Simplicity: Mastering Database Design with Redis

Mastering responsive design for mobile devices

Seattle Design Commission...Seattle Design Commission - 2011.04.07 First Hill Streetcar presentation Created Date: 20110516144232Z

Waterfront Seattle Design Summary July2012

Seattle DPD - West Seattle Neighborhood Design Guidelines