49
Design Prototyping Bringing Wireframes to Life Dan Harrelson

Design Prototyping Bringing Wireframes to Life Dan Harrelson

Embed Size (px)

Citation preview

Page 1: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Design PrototypingBringing Wireframes to Life

Dan Harrelson

Page 2: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Please *

* As if I could stop you...

@danharrelson#mix09#proto

Page 3: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Introduction

•Design deliverables

•What’s design prototyping?

•Why prototype?

•What makes a good prototype?

•Techniques for prototyping

Page 4: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 5: Design Prototyping Bringing Wireframes to Life Dan Harrelson

No Product Awesome Product

Design processes are dynamic

Page 6: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Design processes are dynamic

Page 7: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Design processes are dynamic

Page 8: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Design processes are dynamic

Page 9: Design Prototyping Bringing Wireframes to Life Dan Harrelson

We take in all sorts of input

Competitive AnalysisUser Research

Brand Guidelines

Metrics

Technology

Business Strategy

Page 10: Design Prototyping Bringing Wireframes to Life Dan Harrelson

We work with lots of different people

Stakeholders

Prospects

CustomersDesigners

Developers

Partners

Users

Page 11: Design Prototyping Bringing Wireframes to Life Dan Harrelson

We come up with some dynamic

ideas

Page 12: Design Prototyping Bringing Wireframes to Life Dan Harrelson

We output some pretty static stuff•Sitemaps

•User flows

•Personas

•Wireframes

•Visual comps

Page 13: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 14: Design Prototyping Bringing Wireframes to Life Dan Harrelson

We need something more

dynamic:Design Protoyping

Page 15: Design Prototyping Bringing Wireframes to Life Dan Harrelson

* 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 Bringing Wireframes to Life Dan Harrelson

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 Bringing Wireframes to Life Dan Harrelson

... 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 Bringing Wireframes to Life Dan Harrelson

Design prototype

animated

usable

slick

branded

friendly

hardeasy

competitivepersonalsafe

functionalcomplex

simplestatic

interactive

Page 19: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 20: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Why prototype?

Page 21: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Wireframes aren’t enough

Page 22: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 23: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 24: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 25: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 26: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Prototype goes here

Page 27: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Reduce documentation

Page 28: Design Prototyping Bringing Wireframes to Life Dan Harrelson
Page 29: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Get internal buy-in*

*money for your concept

Page 30: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Usability test

Page 31: Design Prototyping Bringing Wireframes to Life Dan Harrelson

See how a concept

will Function

See how a concept will Function

FeelWorkWork

Page 32: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Experiences are Interactive

Page 33: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Experiences are Responsive

Page 34: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Experiences have Emotion*

*Wireframes Don’t

Page 35: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Generate conceptsValidate concepts

Page 36: Design Prototyping Bringing Wireframes to Life Dan Harrelson

What makes a good prototype?

Page 37: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Interactive

Page 38: Design Prototyping Bringing Wireframes to Life Dan Harrelson

FastHow Fast?How about an

afternoon?

Page 39: Design Prototyping Bringing Wireframes to Life Dan Harrelson

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

Page 40: Design Prototyping Bringing Wireframes to Life Dan Harrelson

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 Bringing Wireframes to Life Dan Harrelson

Do prototype:

•Core interactions•Important patterns•Risky functionality

Don’t prototype:

•Solved problems•Agreed upon solutions

Focused

Page 42: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Focused

Complex

Cri

tica

l DesignPrototype

QuickWireframe

Page 43: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Prototypingtechniques

Page 44: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Paper prototyping

Page 45: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Digital prototyping

Page 46: Design Prototyping Bringing Wireframes to Life Dan Harrelson

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

Page 47: Design Prototyping Bringing Wireframes to Life Dan Harrelson

In conclusion

•Deliverables need to be more dynamic

•Design prototyping can help...

•Good ones are fast, disposable and focused

Page 48: Design Prototyping Bringing Wireframes to Life Dan Harrelson

Thanks!

Questions?Comments?

Dan Harrelson@[email protected]

Page 49: Design Prototyping Bringing Wireframes to Life Dan Harrelson

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/