Design Prototyping

49
Design Prototyping Bringing Wireframes to Life Dan Harrelson

description

Design Prototyping. Bringing Wireframes to Life. Dan Harrelson. Please *. @danharrelson #mix09 #proto. * As if I could stop you. Introduction. Design deliverables What’s design prototyping? Why prototype? What makes a good prototype? Techniques for prototyping. No Product. - PowerPoint PPT Presentation

Transcript of Design Prototyping

Page 1: Design Prototyping

Design PrototypingBringing Wireframes to Life

Dan Harrelson

Page 2: Design Prototyping

Please *

* As if I could stop you...

@danharrelson#mix09#proto

Page 3: Design Prototyping

Introduction

•Design deliverables

•What’s design prototyping?

•Why prototype?

•What makes a good prototype?

•Techniques for prototyping

Page 4: Design Prototyping
Page 5: Design Prototyping

No Product Awesome Product

Design processes are dynamic

Page 6: Design Prototyping

Design processes are dynamic

Page 7: Design Prototyping

Design processes are dynamic

Page 8: Design Prototyping

Design processes are dynamic

Page 9: Design Prototyping

We take in all sorts of input

Competitive AnalysisUser Research

Brand Guidelines

Metrics

Technology

Business Strategy

Page 10: Design Prototyping

We work with lots of different people

Stakeholders

Prospects

CustomersDesigners

Developers

Partners

Users

Page 11: Design Prototyping

We come up with some dynamic

ideas

Page 12: Design Prototyping

We output some pretty static stuff•Sitemaps

•User flows

•Personas

•Wireframes

•Visual comps

Page 13: Design Prototyping
Page 14: Design Prototyping

We need something more

dynamic:Design Protoyping

Page 15: Design Prototyping

* http://en.wikipedia.org/wiki/Prototyping

Prototypes... allow engineers and designers the ability to

explore design alternatives, test theories and

confirm performance prior to starting production of a new product *

Page 16: Design Prototyping

Proof of concept

secure

scalable

connected

connected integrated

Rails

.NET

mashuphard

easy

REST

JSON

Silverlight

AIR

slow

fast

api

performance

XAML

Page 17: Design Prototyping

... allow engineers and designers the ability to

explore design alternatives, test theories and

confirm performance prior to starting production of a new product *

* http://en.wikipedia.org/wiki/Prototyping

Prototypes

Page 18: Design Prototyping

Design prototype

animated

usable

slick

branded

friendly

hardeasy

competitivepersonalsafe

functionalcomplex

simplestatic

interactive

Page 19: Design Prototyping
Page 20: Design Prototyping

Why prototype?

Page 21: Design Prototyping

Wireframes aren’t enough

Page 22: Design Prototyping
Page 23: Design Prototyping
Page 24: Design Prototyping
Page 25: Design Prototyping
Page 26: Design Prototyping

Prototype goes here

Page 27: Design Prototyping

Reduce documentation

Page 28: Design Prototyping
Page 29: Design Prototyping

Get internal buy-in*

*money for your concept

Page 30: Design Prototyping

Usability test

Page 31: Design Prototyping

See how a concept

will Function

See how a concept will Function

FeelWorkWork

Page 32: Design Prototyping

Experiences are Interactive

Page 33: Design Prototyping

Experiences are Responsive

Page 34: Design Prototyping

Experiences have Emotion*

*Wireframes Don’t

Page 35: Design Prototyping

Generate conceptsValidate concepts

Page 36: Design Prototyping

What makes a good prototype?

Page 37: Design Prototyping

Interactive

Page 38: Design Prototyping

FastHow Fast?How about an

afternoon?

Page 39: Design Prototyping

http://www.boxesandarrows.com/view/interactive

Page 40: Design Prototyping

DisposableDisposable

It’s not about the prototype, it’s about the ideas!

It’s not about the prototype, it’s about the ideas!

Page 41: Design Prototyping

Do prototype:

•Core interactions•Important patterns•Risky functionality

Don’t prototype:

•Solved problems•Agreed upon solutions

Focused

Page 42: Design Prototyping

Focused

Complex

Cri

tica

l DesignPrototype

QuickWireframe

Page 43: Design Prototyping

Prototypingtechniques

Page 44: Design Prototyping

Paper prototyping

Page 45: Design Prototyping

Digital prototyping

Page 46: Design Prototyping

http://www.boxesandarrows.com/view/quick-and-easy-flash

Page 47: Design Prototyping

In conclusion

•Deliverables need to be more dynamic

•Design prototyping can help...

•Good ones are fast, disposable and focused

Page 48: Design Prototyping

Thanks!

Questions?Comments?

Dan Harrelson@[email protected]

Page 49: Design Prototyping

September 15-18, 2009San Francisco

http://uxweek.com/

Use promotional code MIX and get 10% off either registration price.

April 2-3, 2009San Francisco

http://adaptivepath.com/events/2009/apr

May 11-14, 2009Berlin

June 15-18, 2009San Francisco

November 2-5, 2009Washington, D.C.

http://adaptivepath.com/events/2009/uxi/