71
Designing Virtual Realism Seattle, May 2009 Dan Rubin Sidebar Creative

Designing Virtual Realism (AEA09)

  • View
    12

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Designing Virtual Realism (AEA09)

DesigningVirtual Realism

Seattle, May 2009

Dan RubinSidebar Creative

Page 2: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Me, according to nGen works @ http://happywebbies.com/

Hi!Dan Rubinsuperfluousbanter.org@danrubin

Page 3: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Web StandardsCreativity

Dan Rubin(and 9 other guys)

by

Page 4: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Pro CSSTechniques

Jeff CroftIan LloydDan Rubin

by

Page 5: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Look & Feel

Page 6: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

We do this every day.

Page 7: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 8: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 9: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 10: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 11: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 12: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Context is important.

Page 13: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 14: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 15: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 16: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 17: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Tactile Interaction

Page 18: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 19: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 20: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Design for Intuition.

Page 21: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Mimic physical interfaces.

Page 22: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 23: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Photo: Pascal Montsma (http://www.sxc.hu/photo/230015)

Page 24: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

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

Page 25: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 26: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Creatingan Illusion.

Page 27: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 28: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 29: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 30: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Some interfaces already do this.

Page 31: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 32: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 33: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 34: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 35: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Invite people to touch your interface.

Page 36: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 37: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 38: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 39: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Adding noise creates a basic texture.

Page 40: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 41: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 42: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 43: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Aesthetic-Usability Effect

Page 44: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

“Attractive things work better.”

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

Page 45: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Traditional Media

Page 46: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 47: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 48: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 49: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 50: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 51: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Photographic

Page 52: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 53: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 54: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 55: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 56: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

PhysicalItems

Page 57: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Page 58: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Onward to Photoshop!

Page 59: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

What can we do about it?

Page 60: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Use consistent light sources.

Page 61: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Embrace Gradients and Shadows.

Page 62: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Never use default filter settings.

Page 63: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Never use default filter settings. Ever.

Page 64: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Focus on subtle effects.

Page 65: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Scanners +Cameras.

Page 66: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

USE THEM.

Page 67: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

If nothing else, add noise.

Page 68: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Resources

Page 69: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

VirtualIn Defense of Eye Candy – Stephen P. Andersonhttp://www.alistapart.com/articles/indefenseofeyecandy/

Aesthetic-Usability Effect – Mark Boultonhttp://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

PhysicalDon’t Make Me Think – Steve Krug

The Design of Everyday Things – Donald Norman

HOW Magazine, June 2009

Page 70: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

Questions?

Page 71: Designing Virtual Realism (AEA09)

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

Designing Virtual Realism Seattle, May 2009

fin.slideshare.net/danrubintwitter: @danrubin