Prototyping in the Wild
DelveNYC

Prototypes are artifacts.

Prototyping is a process.

Inspired by the design studio
http://www.flickr.com/photos/98736785@N00/1589941777/

6-8-5

!"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

!"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

!"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

1. Sketch out your ideas

2. Present to team

3. Critique with team

4. Bring it to life

ITERATE & REPEAT

!"#$%"&'
%(*$*
+ *+,#
*$
,#
%(
!#)$
$%
!"# &
'(#
$
!"
)
#$ #
%& '(#!
()*& +('
*&

Reasons to Prototype

Reasons to Prototype
➡ Work through a design
➡ Communicate concepts
➡ Sell an idea
➡ Gauge technical feasibility
➡ Test concepts with customers

8 Guiding Principles

Know your audience and

Plan a little. Prototype the

Set expectations.

You CAN sketch.

It’s not the Mona Lisa.

If you can’t make it fake it.

Prototype only what you

Reduce risk. Prototype early
and often.

Let’s talk paper prototyping

Paper Prototyping Pros

Paper Prototyping Pros
➡ Fast.Cheap. Easy.
➡ Manipulate on the fly.
➡ No computer necessary.
➡ Not bound by SW/HW limitations.
➡ Mobile and gestural interfaces.
➡ Collaboration.

Techniques
➡ Handlebars
➡ Accordion
➡ Transparencies
➡ Dental floss

Let’s talk Fireworks

Fireworks Pros

Fireworks Pros
➡ CS4 integration.
➡ Small file size.
➡ Page states.
➡ Vector and raster under one roof.
➡ Export to HTML, PDF, AIR, and more.
➡ Master pages, shared layers, and
symbols.

Let’s talk HTML

HTML Pros

HTML Pros
➡ Platform independent.
➡ Portable.
➡ It’sreal.
➡ Modular, component-based.
➡ Collaborative.
➡ Lots of free frameworks.
➡ Possible reusable for production.

Prototyping Book
➡ rosenfeldmedia.com/books/
prototyping
➡ todd@messagefirst.com
➡ @zakiwarfel