(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.

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