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
Auckland, April 2009
Dan Rubin
Sidebar Creative

2. Designing Virtual Realism Auckland, April 2009
Hi!
Dan Rubin
Me, according to nGen works @ http://happywebbies.com/
©2009 Dan Rubin » http://sidebarcreative.com

3. Designing Virtual Realism Auckland, April 2009
Web
Standards
Creativity
by Dan Rubin
(and 9
other guys)
©2009 Dan Rubin » http://sidebarcreative.com

4. Designing Virtual Realism Auckland, April 2009
Pro CSS
Techniques
by Jeff Croft
Ian Lloyd
Dan Rubin
©2009 Dan Rubin » http://sidebarcreative.com

5. Designing Virtual Realism Auckland, April 2009
Look & Feel
©2009 Dan Rubin » http://sidebarcreative.com
knowing how to interact with something based on its
appearance.

6. Designing Virtual Realism Auckland, April 2009
Look & Feel
©2009 Dan Rubin » http://sidebarcreative.com
knowing how to interact with something based on its
appearance.

7. Designing Virtual Realism Auckland, April 2009
We do this
every day.
©2009 Dan Rubin » http://sidebarcreative.com
based on our collective life experience from our own interactions and from observing the
actions of others.

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

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

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

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

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

13. Designing Virtual Realism Auckland, April 2009
Context is
important.
©2009 Dan Rubin » http://sidebarcreative.com

14. Designing Virtual Realism Auckland, April 2009
Photo: David Ritter (http://www.sxc.hu/photo/941686)
©2009 Dan Rubin » http://sidebarcreative.com
you may not be able to recognize this at first without
more contextual information

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

16. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

17. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

18. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

19. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

20. Designing Virtual Realism Auckland, April 2009
Tactile
Interaction
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

21. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

22. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

23. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

24. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

25. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

26. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
the tactile interaction of the screen — mouse, trackball, keyboard, tablet: the pointer on
screen is an extension of our physical body, it is a virtual appendage, and clicking is the
closest thing to physical interaction; we love touchscreens because the basic level of
interaction is normal: we point at something we want to interact with, and touch it. But
we're still interacting with a flat surface/texture.

27. Designing Virtual Realism Auckland, April 2009
Mimic
physical
interfaces.
©2009 Dan Rubin » http://sidebarcreative.com
we already know how to use and interact with these
things

28. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

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

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

31. Designing Virtual Realism Auckland, April 2009
Creating
an Illusion
©2009 Dan Rubin » http://sidebarcreative.com

32. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

33. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
Julian Beever: http://users.skynet.be/J.Beever/

34. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com
Julian Beever: http://users.skynet.be/J.Beever/

35. Designing Virtual Realism Auckland, April 2009
Some interfaces
already do this.
©2009 Dan Rubin » http://sidebarcreative.com

36. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

37. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

38. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

39. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

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

41. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

42. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

43. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

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

45. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

46. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

47. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

48. Designing Virtual Realism Auckland, April 2009
Aesthetic-
Usability
Effect
©2009 Dan Rubin » http://sidebarcreative.com

49. Designing Virtual Realism Auckland, April 2009
“Attractive
things work
better.”
— Donald Norman
©2009 Dan Rubin » http://sidebarcreative.com
it’s not a big leap to extend this to “virtual interfaces
that look like real world interfaces are easier to
interact with.”

50. Designing Virtual Realism Auckland, April 2009
Traditional
Media
©2009 Dan Rubin » http://sidebarcreative.com

51. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

52. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

53. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

54. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

55. Designing Virtual Realism Auckland, April 2009
Photographic
©2009 Dan Rubin » http://sidebarcreative.com

56. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

57. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

58. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

59. Designing Virtual Realism Auckland, April 2009
Physical
Items
©2009 Dan Rubin » http://sidebarcreative.com

60. Designing Virtual Realism Auckland, April 2009
©2009 Dan Rubin » http://sidebarcreative.com

61. Designing Virtual Realism Auckland, April 2009
Onward to
Photoshop!
(whereby a live demo ensued)
©2009 Dan Rubin » http://sidebarcreative.com

62. Designing Virtual Realism Auckland, April 2009
Questions?
©2009 Dan Rubin » http://sidebarcreative.com

63. Designing Virtual Realism Auckland, April 2009
fin.
©2009 Dan Rubin » http://sidebarcreative.com