Details Make the Difference

» Dan RubinSidebar Creative

Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

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

Hi!

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Web StandardsCreativity

Dan Rubin(and 9 other guys)

by

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

✓ Proportional design✓ Borders, lines and layer modes✓ Texture, Depth and Light Effects✓ a bunch of other interesting stuff

What we’re talking about:

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Why are we here?

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Details define howa design feels.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

It’s all about balance.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Proportion

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Create patterns for margins and padding.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

CNN.com margins, padding, borders:

6, 12, 18px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

12px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

12px

12px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

6px

6px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

18px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

p.s. their body copy defaults to 12px

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Why should we love patterns?

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Patterns make it easier to do the right thing.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Typography

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Use relative text sizes to create balance.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

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

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Range kerning

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

aka “tracking” or “letter-spacing”

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Pretty Type

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Don’t be afraidto experiment.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Gradient Overlay: White to Black, 20% OpacityStroke: White, 5px, 20% OpacityInner Glow: White, Screen, 5px, 60% Opacity

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Grids

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Using grids removes the guesswork.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Grids are just anothersimple pattern.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Grid = Boxbreak out of it.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Remember, grids are just helpful guides.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Texture

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Reality is rarelysmooth.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Add subtle textureto your designs.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Lines & Gradients

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Layer Styles

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Layer Styles(patterns strike again)

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Tactile

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Invite peopleto touch your GUI.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Depth

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Add dimension to improve recognition.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Light Effects

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Almost any imagecan create an effect.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Photo: sxc.hu #1005399

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Darken

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Multiply

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Luminosity

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Putting it to use

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Fixing Fox.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

But wait,there’s more...

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

http://superfluousbanter.org/presentations/2008/

(download the slides here)

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

Details Make the Difference Web Design World Boston, 2008

Q&A