designing virtual realism - aea chicago, 2009

100
Designing Virtual Realism AEA Chicago, October 2009 Dan Rubin Sidebar Creative

Upload: dan-rubin

Post on 09-May-2015

959 views

Category:

Design


0 download

DESCRIPTION

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 why using realistic textures and media can make your designs leap off the screen.

TRANSCRIPT

Page 1: Designing Virtual Realism - AEA Chicago, 2009

DesigningVirtual Realism

AEA Chicago, October 2009

Dan RubinSidebar Creative

Page 2: Designing Virtual Realism - AEA Chicago, 2009
Page 3: Designing Virtual Realism - AEA Chicago, 2009
Page 4: Designing Virtual Realism - AEA Chicago, 2009
Page 5: Designing Virtual Realism - AEA Chicago, 2009
Page 6: Designing Virtual Realism - AEA Chicago, 2009
Page 7: Designing Virtual Realism - AEA Chicago, 2009

Why?

Page 8: Designing Virtual Realism - AEA Chicago, 2009

Because of theenvironment.

Page 9: Designing Virtual Realism - AEA Chicago, 2009
Page 10: Designing Virtual Realism - AEA Chicago, 2009

No, not that environment.

Page 11: Designing Virtual Realism - AEA Chicago, 2009

Look & Feel

Page 12: Designing Virtual Realism - AEA Chicago, 2009
Page 13: Designing Virtual Realism - AEA Chicago, 2009
Page 14: Designing Virtual Realism - AEA Chicago, 2009

Let’s relate this to UI design.

Page 15: Designing Virtual Realism - AEA Chicago, 2009

Interface design

Product design=

Page 16: Designing Virtual Realism - AEA Chicago, 2009

Products are designed for intuition.

Page 17: Designing Virtual Realism - AEA Chicago, 2009
Page 18: Designing Virtual Realism - AEA Chicago, 2009

Photo: Luiz Fernando Pilz (http://www.sxc.hu/photo/249448)

Page 19: Designing Virtual Realism - AEA Chicago, 2009

Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359)

Page 20: Designing Virtual Realism - AEA Chicago, 2009

Affordance

Page 21: Designing Virtual Realism - AEA Chicago, 2009

...the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.

Don Norman

Page 22: Designing Virtual Realism - AEA Chicago, 2009
Page 23: Designing Virtual Realism - AEA Chicago, 2009

Affordance isn’t guaranteed...

Page 24: Designing Virtual Realism - AEA Chicago, 2009
Page 25: Designing Virtual Realism - AEA Chicago, 2009
Page 26: Designing Virtual Realism - AEA Chicago, 2009

Context is important.

Page 27: Designing Virtual Realism - AEA Chicago, 2009
Page 28: Designing Virtual Realism - AEA Chicago, 2009
Page 29: Designing Virtual Realism - AEA Chicago, 2009

Photo: David Ritter (http://www.sxc.hu/photo/941686)

Page 30: Designing Virtual Realism - AEA Chicago, 2009

Photo: Craig Jewell (http://www.sxc.hu/photo/945272)

Page 31: Designing Virtual Realism - AEA Chicago, 2009

Aesthetic-Usability Effect

Page 32: Designing Virtual Realism - AEA Chicago, 2009

Donald Normanhttp://jnd.org/dn.mss/emotion_design_attractive_things_work_better.html

Attractive things work better.

Page 33: Designing Virtual Realism - AEA Chicago, 2009
Page 34: Designing Virtual Realism - AEA Chicago, 2009
Page 35: Designing Virtual Realism - AEA Chicago, 2009
Page 36: Designing Virtual Realism - AEA Chicago, 2009
Page 37: Designing Virtual Realism - AEA Chicago, 2009
Page 38: Designing Virtual Realism - AEA Chicago, 2009
Page 39: Designing Virtual Realism - AEA Chicago, 2009
Page 40: Designing Virtual Realism - AEA Chicago, 2009

Good usability is inherent in good design because people think well designed things work better.

Mark Boulton

Page 41: Designing Virtual Realism - AEA Chicago, 2009

Finding inspiration.

Page 42: Designing Virtual Realism - AEA Chicago, 2009
Page 43: Designing Virtual Realism - AEA Chicago, 2009

Some interfaces already do this.

Page 44: Designing Virtual Realism - AEA Chicago, 2009
Page 45: Designing Virtual Realism - AEA Chicago, 2009
Page 46: Designing Virtual Realism - AEA Chicago, 2009
Page 47: Designing Virtual Realism - AEA Chicago, 2009
Page 48: Designing Virtual Realism - AEA Chicago, 2009

We can create illusions.

Page 49: Designing Virtual Realism - AEA Chicago, 2009
Page 50: Designing Virtual Realism - AEA Chicago, 2009
Page 51: Designing Virtual Realism - AEA Chicago, 2009
Page 52: Designing Virtual Realism - AEA Chicago, 2009
Page 53: Designing Virtual Realism - AEA Chicago, 2009

http://silverbackapp.com

Page 54: Designing Virtual Realism - AEA Chicago, 2009
Page 55: Designing Virtual Realism - AEA Chicago, 2009

http://delicious-monster.com/

Page 56: Designing Virtual Realism - AEA Chicago, 2009

Classics

Page 57: Designing Virtual Realism - AEA Chicago, 2009

Ramp Champ

Page 58: Designing Virtual Realism - AEA Chicago, 2009

ConvertBot

Page 59: Designing Virtual Realism - AEA Chicago, 2009

Sometimes, we can also use textures.

Page 60: Designing Virtual Realism - AEA Chicago, 2009

Two-second texture test.

Page 61: Designing Virtual Realism - AEA Chicago, 2009

Photo: Peter Zelnik (http://www.sxc.hu/photo/1170873)

Page 62: Designing Virtual Realism - AEA Chicago, 2009
Page 63: Designing Virtual Realism - AEA Chicago, 2009

Photo: Kriss Szkurlatowski (http://www.sxc.hu/photo/1165285)

Page 64: Designing Virtual Realism - AEA Chicago, 2009
Page 65: Designing Virtual Realism - AEA Chicago, 2009

Photo: David Thomson (http://www.sxc.hu/photo/1172713)

Page 66: Designing Virtual Realism - AEA Chicago, 2009
Page 67: Designing Virtual Realism - AEA Chicago, 2009

Photo: Dedy Ong (http://www.sxc.hu/photo/1161259)

Page 68: Designing Virtual Realism - AEA Chicago, 2009
Page 69: Designing Virtual Realism - AEA Chicago, 2009

Photo: Roberto Ribeiro (http://www.sxc.hu/photo/1173672)

Page 70: Designing Virtual Realism - AEA Chicago, 2009
Page 71: Designing Virtual Realism - AEA Chicago, 2009

Photo: David Ritter (http://www.sxc.hu/photo/941686)

Page 72: Designing Virtual Realism - AEA Chicago, 2009
Page 73: Designing Virtual Realism - AEA Chicago, 2009

My interface doesn’t need to be pretty!

Page 74: Designing Virtual Realism - AEA Chicago, 2009
Page 75: Designing Virtual Realism - AEA Chicago, 2009
Page 76: Designing Virtual Realism - AEA Chicago, 2009

I beg to differ.

Page 77: Designing Virtual Realism - AEA Chicago, 2009

Create texture by adding noise.

Page 78: Designing Virtual Realism - AEA Chicago, 2009

In Photoshop:

Filter → Noise → Add Noise…

Page 79: Designing Virtual Realism - AEA Chicago, 2009
Page 80: Designing Virtual Realism - AEA Chicago, 2009
Page 81: Designing Virtual Realism - AEA Chicago, 2009
Page 82: Designing Virtual Realism - AEA Chicago, 2009
Page 83: Designing Virtual Realism - AEA Chicago, 2009
Page 84: Designing Virtual Realism - AEA Chicago, 2009

Incorporate art and texture.

Page 85: Designing Virtual Realism - AEA Chicago, 2009
Page 86: Designing Virtual Realism - AEA Chicago, 2009
Page 87: Designing Virtual Realism - AEA Chicago, 2009
Page 88: Designing Virtual Realism - AEA Chicago, 2009
Page 89: Designing Virtual Realism - AEA Chicago, 2009

Shoot yourown photos.

Page 90: Designing Virtual Realism - AEA Chicago, 2009
Page 91: Designing Virtual Realism - AEA Chicago, 2009
Page 92: Designing Virtual Realism - AEA Chicago, 2009
Page 93: Designing Virtual Realism - AEA Chicago, 2009

Use your scanner.

Page 94: Designing Virtual Realism - AEA Chicago, 2009
Page 95: Designing Virtual Realism - AEA Chicago, 2009
Page 96: Designing Virtual Realism - AEA Chicago, 2009

Or combine a few methods.

Page 97: Designing Virtual Realism - AEA Chicago, 2009
Page 98: Designing Virtual Realism - AEA Chicago, 2009
Page 99: Designing Virtual Realism - AEA Chicago, 2009
Page 100: Designing Virtual Realism - AEA Chicago, 2009

fin.http://aneventapart.com/2009/chicago/slides/twitter: @danrubin

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

Designing Virtual Realism AEA Chicago, October 2009