SlideShare a Scribd company logo
Mastering the Details
 in Interface Design
           Seattle, July 2009

                  Dan Rubin
                  Sidebar Creative
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
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
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
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
Mastering the Details in Interface Design Seattle, July 2009




                      Buy my
                      books
©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 your
     design 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




         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
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 are
      only 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 create
   an 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 it
   to 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/danrubin
   twitter: @danrubin




©2009 Dan Rubin » http://sidebarcreative.com

More Related Content

Viewers also liked

Tips for talking about visual design for UX - ConveyUX
Tips for talking about visual design for UX - ConveyUXTips for talking about visual design for UX - ConveyUX
Tips for talking about visual design for UX - ConveyUX
Tania Schlatter
 
Inspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface DesignInspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface Design
Stephen Anderson
 
Interface Design Basics (english)
Interface Design Basics (english)Interface Design Basics (english)
Interface Design Basics (english)
Samo Korošec
 
Journey Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie HansenJourney Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie Hansen
Natalie Sumsion
 
A C Aravinth - Portfolio
A C Aravinth - PortfolioA C Aravinth - Portfolio
A C Aravinth - Portfolio
Aravinth Chandrasekaran
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Switch
 
7 Deadly Sins in Design
7 Deadly Sins in Design7 Deadly Sins in Design
7 Deadly Sins in Design
HARMAN Services
 
EIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGNEIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGN
CeciLia AndRe
 
Visual Tools
Visual ToolsVisual Tools
Visual Tools
roberta_tassi
 
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Bram Vanderhaeghe
 
Web, Design, and UX Trends for 2006
Web, Design, and UX Trends for 2006Web, Design, and UX Trends for 2006
Web, Design, and UX Trends for 2006
Jeremy Johnson
 
Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)
Christopher Schmitt
 
Mobile Web UX - TdT@Cluj #17
Mobile Web UX - TdT@Cluj #17Mobile Web UX - TdT@Cluj #17
Mobile Web UX - TdT@Cluj #17
Tabăra de Testare
 
Doing Your HW - A UX approach to your web design
Doing Your HW - A UX approach to your web designDoing Your HW - A UX approach to your web design
Doing Your HW - A UX approach to your web designFabian Alcantara
 
Web design ux trends 2013
Web design ux trends 2013Web design ux trends 2013
Web design ux trends 2013
Mahmoud Farrag
 
Web, Design, and UX Trends for 2008
Web, Design, and UX Trends for 2008Web, Design, and UX Trends for 2008
Web, Design, and UX Trends for 2008
Jeremy Johnson
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
La FeWeb
 
Web, Design, and UX Trends for 2005
Web, Design, and UX Trends for 2005Web, Design, and UX Trends for 2005
Web, Design, and UX Trends for 2005
Jeremy Johnson
 

Viewers also liked (20)

Tips for talking about visual design for UX - ConveyUX
Tips for talking about visual design for UX - ConveyUXTips for talking about visual design for UX - ConveyUX
Tips for talking about visual design for UX - ConveyUX
 
Inspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface DesignInspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface Design
 
Interface Design Basics (english)
Interface Design Basics (english)Interface Design Basics (english)
Interface Design Basics (english)
 
Journey Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie HansenJourney Through Visual Design Natalie Hansen
Journey Through Visual Design Natalie Hansen
 
A C Aravinth - Portfolio
A C Aravinth - PortfolioA C Aravinth - Portfolio
A C Aravinth - Portfolio
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
7 Deadly Sins in Design
7 Deadly Sins in Design7 Deadly Sins in Design
7 Deadly Sins in Design
 
EIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGNEIGHT GOLDEN RULES OF INTERFACE DESIGN
EIGHT GOLDEN RULES OF INTERFACE DESIGN
 
Visual Tools
Visual ToolsVisual Tools
Visual Tools
 
Coding pilkades
Coding pilkadesCoding pilkades
Coding pilkades
 
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
 
Web, Design, and UX Trends for 2006
Web, Design, and UX Trends for 2006Web, Design, and UX Trends for 2006
Web, Design, and UX Trends for 2006
 
Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)
 
#4_web_ux_wakizaka
#4_web_ux_wakizaka#4_web_ux_wakizaka
#4_web_ux_wakizaka
 
Mobile Web UX - TdT@Cluj #17
Mobile Web UX - TdT@Cluj #17Mobile Web UX - TdT@Cluj #17
Mobile Web UX - TdT@Cluj #17
 
Doing Your HW - A UX approach to your web design
Doing Your HW - A UX approach to your web designDoing Your HW - A UX approach to your web design
Doing Your HW - A UX approach to your web design
 
Web design ux trends 2013
Web design ux trends 2013Web design ux trends 2013
Web design ux trends 2013
 
Web, Design, and UX Trends for 2008
Web, Design, and UX Trends for 2008Web, Design, and UX Trends for 2008
Web, Design, and UX Trends for 2008
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
 
Web, Design, and UX Trends for 2005
Web, Design, and UX Trends for 2005Web, Design, and UX Trends for 2005
Web, Design, and UX Trends for 2005
 

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

FOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan RubinFOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan Rubin
Carsonified Team
 
Making your-interface-invisible
Making your-interface-invisibleMaking your-interface-invisible
Making your-interface-invisible
Vera Kovaleva
 
Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)
Dan Rubin
 
Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)
Dan Rubin
 
Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)
Dan Rubin
 
Webmaster Jam Session: Design and Development Behind the Scenes Day One
Webmaster Jam Session: Design and Development Behind the Scenes Day OneWebmaster Jam Session: Design and Development Behind the Scenes Day One
Webmaster Jam Session: Design and Development Behind the Scenes Day One
dkr
 
Titanium Powered Desktop & Mobile Apps (11/21/2009)
Titanium Powered Desktop & Mobile Apps (11/21/2009)Titanium Powered Desktop & Mobile Apps (11/21/2009)
Titanium Powered Desktop & Mobile Apps (11/21/2009)
Chris Barber
 
Cufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementCufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementDave Ross
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
Abraham Barrera
 
CHI 2009 Highlights
CHI 2009 HighlightsCHI 2009 Highlights
CHI 2009 Highlightsfrog
 

Similar to Mastering the Details in Interface Design - Web Design World 2009 - Seattle (10)

FOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan RubinFOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan Rubin
 
Making your-interface-invisible
Making your-interface-invisibleMaking your-interface-invisible
Making your-interface-invisible
 
Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)
 
Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)
 
Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)
 
Webmaster Jam Session: Design and Development Behind the Scenes Day One
Webmaster Jam Session: Design and Development Behind the Scenes Day OneWebmaster Jam Session: Design and Development Behind the Scenes Day One
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 
Titanium Powered Desktop & Mobile Apps (11/21/2009)
Titanium Powered Desktop & Mobile Apps (11/21/2009)Titanium Powered Desktop & Mobile Apps (11/21/2009)
Titanium Powered Desktop & Mobile Apps (11/21/2009)
 
Cufon - Javascript Font Replacement
Cufon - Javascript Font ReplacementCufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
CHI 2009 Highlights
CHI 2009 HighlightsCHI 2009 Highlights
CHI 2009 Highlights
 

Recently uploaded

20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
TeeFusion
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
Alvis Oh
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 

Recently uploaded (20)

20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 

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

  • 1. Mastering the Details in Interface Design Seattle, July 2009 Dan Rubin Sidebar Creative
  • 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