SlideShare a Scribd company logo
1 of 71
Download to read offline
Designing
Virtual Realism
        Seattle, May 2009

               Dan Rubin
              Sidebar Creative
Designing Virtual Realism Seattle, May 2009




   Hi!
    Dan Rubin
    superfluousbanter.org
    @danrubin




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




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




      Web
      Standards
      Creativity
       by Dan Rubin
          (and 9
          other guys)




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
          Dan Rubin




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Look & Feel

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   We do this
   every day.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Peter Zelnik (http://www.sxc.hu/photo/1170873)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Kriss Szkurlatowski (http://www.sxc.hu/photo/1165285)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: David Thomson (http://www.sxc.hu/photo/1172713)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Dedy Ong (http://www.sxc.hu/photo/1161259)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Roberto Ribeiro (http://www.sxc.hu/photo/1173672)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Context is
   important.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: David Ritter (http://www.sxc.hu/photo/941686)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Craig Jewell (http://www.sxc.hu/photo/945272)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Tactile
   Interaction

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Design for
   Intuition.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Mimic
   physical
   interfaces.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Pascal Montsma (http://www.sxc.hu/photo/230015)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




                                               Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359)
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Creating
   an Illusion.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Some interfaces
   already do this.


©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Invite people
   to touch your
   interface.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Adding noise
   creates a
   basic texture.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Aesthetic-
   Usability
   Effect
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   “Attractive
   things work
   better.”
                                               — Donald Norman
          http://jnd.org/dn.mss/emotion_design_attractive_things_work_better.html



©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Traditional
   Media

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Photographic

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Physical
   Items

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Onward to
   Photoshop!

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   What can we
   do about it?

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Use consistent
   light sources.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Embrace
   Gradients and
   Shadows.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Never use
   default filter
   settings.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Never use
   default filter
   settings. Ever.
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Focus on
   subtle effects.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   Scanners +
   Cameras.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   USE THEM.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   If nothing else,
   add noise.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




     Resources

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




     Virtual
     In Defense of Eye Candy – Stephen P. Anderson
     http://www.alistapart.com/articles/indefenseofeyecandy/

     Aesthetic-Usability Effect – Mark Boulton
     http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/


     Physical
     Don’t Make Me Think – Steve Krug
     The Design of Everyday Things – Donald Norman
     HOW Magazine, June 2009



©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




     Questions?

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism Seattle, May 2009




   fin.
   slideshare.net/danrubin
   twitter: @danrubin




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

More Related Content

More from Dan Rubin

Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) ReviewDan Rubin
 
Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009Dan Rubin
 
Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Dan Rubin
 
Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Dan Rubin
 
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonReaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonDan Rubin
 
Details Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDetails Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDan Rubin
 
Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Dan Rubin
 

More from Dan Rubin (7)

Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) Review
 
Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009
 
Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)
 
Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009
 
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonReaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
 
Details Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDetails Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, Boston
 
Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Design Is In The Details - WV 2008
Design Is In The Details - WV 2008
 

Recently uploaded

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 

Recently uploaded (20)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 

Designing Virtual Realism (AEA09)