Transcript
Page 1: Designing Virtual Realism (@media 2009)

DesigningVirtual Realism

London, June 2009

Dan RubinSidebar Creative

Page 2: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Hi!Dan Rubinsuperfluousbanter.org@danrubin

THE SIDEBAR TEAM WE LOOK MUCH NICER IN PERSON

SIDEBARC R E A T I V ETRAINING WORKSHOPS CONSULTING

Page 3: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Hi!Dan Rubinsuperfluousbanter.org@danrubin

Page 4: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Web StandardsCreativity

Dan Rubin(and 9 other guys)

by

Page 5: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Pro CSSTechniques

Jeff CroftIan LloydDan Rubin

by

Page 6: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Look & Feel

Page 7: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

We do this every day.

Page 8: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 9: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 10: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 11: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 12: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 13: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Context is important.

Page 14: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 15: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 16: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Environment provides context.

Page 17: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 18: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 19: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Tactile Interaction

Page 20: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 21: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 22: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

SO...

Page 23: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Design for Intuition.

Page 24: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Mimic physical interfaces.

Page 25: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 26: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 27: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

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

Page 28: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

If your interface needs instructions...

Page 29: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Redesign it.

Page 30: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 31: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Creatingan Illusion.

Page 32: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 33: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 34: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 35: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Some interfaces already do this.

Page 36: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 37: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 38: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 39: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 40: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Invite people to touch your interface.

Page 41: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 42: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 43: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 44: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Adding noise creates a basic texture.

Page 45: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 46: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 47: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 48: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Aesthetic-Usability Effect

Page 49: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

“Attractive things work better.”

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

Page 50: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Traditional Media

Page 51: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 52: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 53: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 54: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 55: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 56: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Photographic

Page 57: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 58: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 59: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 60: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 61: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

PhysicalItems

Page 62: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Page 63: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Onward to Photoshop!

Page 64: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

What can we do about it?

Page 65: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Use consistent light sources.

Page 66: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Embrace Gradients and Shadows.

Page 67: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Never use default filter settings.

Page 68: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Never use default filter settings. EVER.

Page 69: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Focus on subtle effects.

Page 70: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Scanners +Cameras.

Page 71: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

USE THEM.

Page 72: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

If nothing else, add noise.

Page 73: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Resources

Page 74: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 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

Page 75: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

Questions?

Page 76: Designing Virtual Realism (@media 2009)

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

Designing Virtual Realism London, June 2009

fin.slideshare.net/danrubintwitter: @danrubin


Top Related