0
Designing
Virtual Realism
       London, June 2009

              Dan Rubin
              Sidebar Creative
Designing Virtual Realism London, June 2009




   Hi!SIDEBAR
      C R E AT I V E
    Dan Rubin
             TRAINING WOR...
Designing Virtual Realism London, June 2009




   Hi!
    Dan Rubin
    superfluousbanter.org
    @danrubin




         ...
Designing Virtual Realism London, June 2009




      Web
      Standards
      Creativity
       by Dan Rubin
          (...
Designing Virtual Realism London, June 2009




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
  ...
Designing Virtual Realism London, June 2009




   Look & Feel

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   We do this
   every day.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




                                               Photo: Peter Zelnik (http:/...
Designing Virtual Realism London, June 2009




                                               Photo: Kriss Szkurlatowski ...
Designing Virtual Realism London, June 2009




                                               Photo: David Thomson (http:...
Designing Virtual Realism London, June 2009




                                               Photo: Dedy Ong (http://www...
Designing Virtual Realism London, June 2009




                                               Photo: Roberto Ribeiro (htt...
Designing Virtual Realism London, June 2009




   Context is
   important.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




                                               Photo: David Ritter (http:/...
Designing Virtual Realism London, June 2009




                                               Photo: Craig Jewell (http:/...
Designing Virtual Realism London, June 2009




   Environment
   provides
   context.
©2009 Dan Rubin » http://sidebarcre...
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Tactile
   Interaction

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   SO...
©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Design for
   Intuition.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Mimic
   physical
   interfaces.
©2009 Dan Rubin » http://sidebarcreati...
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




                                               Photo: Pascal Montsma (http...
Designing Virtual Realism London, June 2009




                                               Photo: Ivaylo Georgiev (htt...
Designing Virtual Realism London, June 2009




   If your
   interface needs
   instructions...
©2009 Dan Rubin » http://...
Designing Virtual Realism London, June 2009




   Redesign it.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Creating
   an Illusion.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Some interfaces
   already do this.

©2009 Dan Rubin » http://sidebarcr...
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Invite people
   to touch your
   interface.
©2009 Dan Rubin » http://s...
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Adding noise
   creates a
   basic texture.
©2009 Dan Rubin » http://si...
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Aesthetic-
   Usability
   Effect
©2009 Dan Rubin » http://sidebarcreat...
Designing Virtual Realism London, June 2009




   “Attractive
   things work
   better.”
                                ...
Designing Virtual Realism London, June 2009




   Traditional
   Media

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Photographic

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Physical
   Items

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   Onward to
   Photoshop!

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   What can we
   do about it?

©2009 Dan Rubin » http://sidebarcreative.c...
Designing Virtual Realism London, June 2009




   Use consistent
   light sources.

©2009 Dan Rubin » http://sidebarcreat...
Designing Virtual Realism London, June 2009




   Embrace
   Gradients and
   Shadows.
©2009 Dan Rubin » http://sidebarcr...
Designing Virtual Realism London, June 2009




   Never use
   default filter
   settings.
©2009 Dan Rubin » http://sideb...
Designing Virtual Realism London, June 2009




   Never use
   default filter
   settings. EVER.
©2009 Dan Rubin » http:/...
Designing Virtual Realism London, June 2009




   Focus on
   subtle effects.

©2009 Dan Rubin » http://sidebarcreative.c...
Designing Virtual Realism London, June 2009




   Scanners +
   Cameras.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   USE THEM.

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   If nothing else,
   add noise.

©2009 Dan Rubin » http://sidebarcreativ...
Designing Virtual Realism London, June 2009




     Resources

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




     Virtual
     In Defense of Eye Candy – Stephen P. Anderson
     http:...
Designing Virtual Realism London, June 2009




     Questions?

©2009 Dan Rubin » http://sidebarcreative.com
Designing Virtual Realism London, June 2009




   fin.
   slideshare.net/danrubin
   twitter: @danrubin




©2009 Dan Rub...
Upcoming SlideShare
Loading in...5
×

Designing Virtual Realism (@media 2009)

2,094

Published on

The real world is rarely flat and devoid of texture, yet our virtual designs often do little to mirror what lies beyond the monitor. Tasteful use of lighting, shadows, gradients, and more traditional arts such as photography, oil, water color, pencil and charcoal can help us mimic the world around us. Learn to use and create realistic textures and media, and make your designs leap off the screen.

Published in: Technology, Business, Design
1 Comment
28 Likes
Statistics
Notes
  • Will there be a video of the talk along with the slides? It's always difficult to get the most out of them when you miss the most important part. Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,094
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
124
Comments
1
Likes
28
Embeds 0
No embeds

No notes for slide

Transcript of "Designing Virtual Realism (@media 2009)"

  1. 1. Designing Virtual Realism London, June 2009 Dan Rubin Sidebar Creative
  2. 2. Designing Virtual Realism London, June 2009 Hi!SIDEBAR C R E AT I V E Dan Rubin TRAINING WORKSHOPS CONSULTING superfluousbanter.org @danrubin THE SIDEBAR TEAM WE LOOK MUCH NICER IN PERSON ©2009 Dan Rubin » http://sidebarcreative.com
  3. 3. Designing Virtual Realism London, June 2009 Hi! Dan Rubin superfluousbanter.org @danrubin Me, according to nGen works @ http://happywebbies.com/ ©2009 Dan Rubin » http://sidebarcreative.com
  4. 4. Designing Virtual Realism London, June 2009 Web Standards Creativity by Dan Rubin (and 9 other guys) ©2009 Dan Rubin » http://sidebarcreative.com
  5. 5. Designing Virtual Realism London, June 2009 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2009 Dan Rubin » http://sidebarcreative.com
  6. 6. Designing Virtual Realism London, June 2009 Look & Feel ©2009 Dan Rubin » http://sidebarcreative.com
  7. 7. Designing Virtual Realism London, June 2009 We do this every day. ©2009 Dan Rubin » http://sidebarcreative.com
  8. 8. Designing Virtual Realism London, June 2009 Photo: Peter Zelnik (http://www.sxc.hu/photo/1170873) ©2009 Dan Rubin » http://sidebarcreative.com
  9. 9. Designing Virtual Realism London, June 2009 Photo: Kriss Szkurlatowski (http://www.sxc.hu/photo/1165285) ©2009 Dan Rubin » http://sidebarcreative.com
  10. 10. Designing Virtual Realism London, June 2009 Photo: David Thomson (http://www.sxc.hu/photo/1172713) ©2009 Dan Rubin » http://sidebarcreative.com
  11. 11. Designing Virtual Realism London, June 2009 Photo: Dedy Ong (http://www.sxc.hu/photo/1161259) ©2009 Dan Rubin » http://sidebarcreative.com
  12. 12. Designing Virtual Realism London, June 2009 Photo: Roberto Ribeiro (http://www.sxc.hu/photo/1173672) ©2009 Dan Rubin » http://sidebarcreative.com
  13. 13. Designing Virtual Realism London, June 2009 Context is important. ©2009 Dan Rubin » http://sidebarcreative.com
  14. 14. Designing Virtual Realism London, June 2009 Photo: David Ritter (http://www.sxc.hu/photo/941686) ©2009 Dan Rubin » http://sidebarcreative.com
  15. 15. Designing Virtual Realism London, June 2009 Photo: Craig Jewell (http://www.sxc.hu/photo/945272) ©2009 Dan Rubin » http://sidebarcreative.com
  16. 16. Designing Virtual Realism London, June 2009 Environment provides context. ©2009 Dan Rubin » http://sidebarcreative.com
  17. 17. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  18. 18. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  19. 19. Designing Virtual Realism London, June 2009 Tactile Interaction ©2009 Dan Rubin » http://sidebarcreative.com
  20. 20. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  21. 21. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  22. 22. Designing Virtual Realism London, June 2009 SO... ©2009 Dan Rubin » http://sidebarcreative.com
  23. 23. Designing Virtual Realism London, June 2009 Design for Intuition. ©2009 Dan Rubin » http://sidebarcreative.com
  24. 24. Designing Virtual Realism London, June 2009 Mimic physical interfaces. ©2009 Dan Rubin » http://sidebarcreative.com
  25. 25. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  26. 26. Designing Virtual Realism London, June 2009 Photo: Pascal Montsma (http://www.sxc.hu/photo/230015) ©2009 Dan Rubin » http://sidebarcreative.com
  27. 27. Designing Virtual Realism London, June 2009 Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359) ©2009 Dan Rubin » http://sidebarcreative.com
  28. 28. Designing Virtual Realism London, June 2009 If your interface needs instructions... ©2009 Dan Rubin » http://sidebarcreative.com
  29. 29. Designing Virtual Realism London, June 2009 Redesign it. ©2009 Dan Rubin » http://sidebarcreative.com
  30. 30. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  31. 31. Designing Virtual Realism London, June 2009 Creating an Illusion. ©2009 Dan Rubin » http://sidebarcreative.com
  32. 32. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  33. 33. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  34. 34. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  35. 35. Designing Virtual Realism London, June 2009 Some interfaces already do this. ©2009 Dan Rubin » http://sidebarcreative.com
  36. 36. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  37. 37. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  38. 38. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  39. 39. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  40. 40. Designing Virtual Realism London, June 2009 Invite people to touch your interface. ©2009 Dan Rubin » http://sidebarcreative.com
  41. 41. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  42. 42. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  43. 43. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  44. 44. Designing Virtual Realism London, June 2009 Adding noise creates a basic texture. ©2009 Dan Rubin » http://sidebarcreative.com
  45. 45. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  46. 46. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  47. 47. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  48. 48. Designing Virtual Realism London, June 2009 Aesthetic- Usability Effect ©2009 Dan Rubin » http://sidebarcreative.com
  49. 49. Designing Virtual Realism London, June 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
  50. 50. Designing Virtual Realism London, June 2009 Traditional Media ©2009 Dan Rubin » http://sidebarcreative.com
  51. 51. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  52. 52. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  53. 53. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  54. 54. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  55. 55. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  56. 56. Designing Virtual Realism London, June 2009 Photographic ©2009 Dan Rubin » http://sidebarcreative.com
  57. 57. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  58. 58. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  59. 59. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  60. 60. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  61. 61. Designing Virtual Realism London, June 2009 Physical Items ©2009 Dan Rubin » http://sidebarcreative.com
  62. 62. Designing Virtual Realism London, June 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  63. 63. Designing Virtual Realism London, June 2009 Onward to Photoshop! ©2009 Dan Rubin » http://sidebarcreative.com
  64. 64. Designing Virtual Realism London, June 2009 What can we do about it? ©2009 Dan Rubin » http://sidebarcreative.com
  65. 65. Designing Virtual Realism London, June 2009 Use consistent light sources. ©2009 Dan Rubin » http://sidebarcreative.com
  66. 66. Designing Virtual Realism London, June 2009 Embrace Gradients and Shadows. ©2009 Dan Rubin » http://sidebarcreative.com
  67. 67. Designing Virtual Realism London, June 2009 Never use default filter settings. ©2009 Dan Rubin » http://sidebarcreative.com
  68. 68. Designing Virtual Realism London, June 2009 Never use default filter settings. EVER. ©2009 Dan Rubin » http://sidebarcreative.com
  69. 69. Designing Virtual Realism London, June 2009 Focus on subtle effects. ©2009 Dan Rubin » http://sidebarcreative.com
  70. 70. Designing Virtual Realism London, June 2009 Scanners + Cameras. ©2009 Dan Rubin » http://sidebarcreative.com
  71. 71. Designing Virtual Realism London, June 2009 USE THEM. ©2009 Dan Rubin » http://sidebarcreative.com
  72. 72. Designing Virtual Realism London, June 2009 If nothing else, add noise. ©2009 Dan Rubin » http://sidebarcreative.com
  73. 73. Designing Virtual Realism London, June 2009 Resources ©2009 Dan Rubin » http://sidebarcreative.com
  74. 74. Designing Virtual Realism London, June 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 ©2009 Dan Rubin » http://sidebarcreative.com
  75. 75. Designing Virtual Realism London, June 2009 Questions? ©2009 Dan Rubin » http://sidebarcreative.com
  76. 76. Designing Virtual Realism London, June 2009 fin. slideshare.net/danrubin twitter: @danrubin ©2009 Dan Rubin » http://sidebarcreative.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×