Designing
Virtual Realism
        Seattle, May 2009

               Dan Rubin
              Sidebar Creative
Designing Virtual Realism Seattle, May 2009




   Hi!
    Dan Rubin
    superfluousbanter.org
    @danrubin




         ...
Designing Virtual Realism Seattle, May 2009




      Web
      Standards
      Creativity
       by Dan Rubin
          (...
Designing Virtual Realism Seattle, May 2009




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
  ...
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:/...
Designing Virtual Realism Seattle, May 2009




                                               Photo: Kriss Szkurlatowski ...
Designing Virtual Realism Seattle, May 2009




                                               Photo: David Thomson (http:...
Designing Virtual Realism Seattle, May 2009




                                               Photo: Dedy Ong (http://www...
Designing Virtual Realism Seattle, May 2009




                                               Photo: Roberto Ribeiro (htt...
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:/...
Designing Virtual Realism Seattle, May 2009




                                               Photo: Craig Jewell (http:/...
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://sidebarcreati...
Designing Virtual Realism Seattle, May 2009




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




                                               Photo: Pascal Montsma (http...
Designing Virtual Realism Seattle, May 2009




                                               Photo: Ivaylo Georgiev (htt...
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://sidebarc...
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://s...
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://si...
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://sidebarcreat...
Designing Virtual Realism Seattle, May 2009




   “Attractive
   things work
   better.”
                                ...
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.c...
Designing Virtual Realism Seattle, May 2009




   Use consistent
   light sources.

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




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




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




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




   Focus on
   subtle effects.

©2009 Dan Rubin » http://sidebarcreative.c...
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://sidebarcreativ...
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:...
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 Rub...
Upcoming SlideShare
Loading in …5
×

Designing Virtual Realism (AEA09)

4,913 views

Published on

(this is an extended/updated version of my presentation at Web09 — presented at An Event Apart Seattle)

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
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,913
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
190
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Designing Virtual Realism (AEA09)

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

×