A presentation on the reasons and techniques for creating prototypes of interactive projects. From the Media Design Practices MFA at Art Center College of Design. Updated September 2, 2017

1. Prototyping Overview
Philip van Allen, Media Design Practices,Art Center College of Design

2. Prototyping Overview Why Prototype?
Thinking through making
Divergent, not convergent thinking
Problem setting, not solving
test fitting a range of approaches, ideas, strategies, assumptions to
invent an interesting question/problem from a context
Discovering what you are interested in for this context
Why Prototype?

3. Prototyping Overview Why Prototype?
Take risks. Fail early and often.
“If you don't fail at least 90 percent of the time, you're not aiming
high enough.” -Alan Kay
You have to experience interaction & behavior
Instantiate ideas in the real world to see if they stick
Get bad/obvious ideas out of the way before you invest time/
money/commitment in production
Why Prototype?

4. Prototyping Overview Why Prototype?
Explore a design space
Multiple iterations/variations
One or more of, but not all of:
Interaction
Form
Technology
Concepts
Content
A Form of Sketching

5. Prototyping Overview Why Prototype?
Yourself
Client
Funder
Demo a concept to

6. Prototyping Overview Why Prototype?
Test concepts/assumptions/ideas
Thinking & designing through making
Identify and Prioritize most important features
Iterate quickly
Develop the design

7. Prototyping Overview Why Prototype?
Different from interviewing
Get more objective feedback - designer is biased!
How do people actually perceive it and use it?
Does it address needs?
Identify opportunities & problems
Participatory design
User Testing

8. Prototyping Overview Why Prototype?
Prototypes help designers and engineers balance
between rationality and intuition.A prototype can
help you take a decision that involves ergonomics,
shape, function, production… at the same time.A
decision that can’t be described in parameters.A
decision that can’t be simulated by a computer…
http://www.slideshare.net/IndustrialDesignCenter/20110829-intro-prototypingmethodology slide #10
Howest School Perspective

9. Prototyping Overview Kinds of Prototypes
A wide range of approaches
Use what works for your goals
Low Fidelity <==> High Fidelity
Fast = low fidelity
Slow = high fidelity
Kinds of Prototypes

10. Prototyping Overview Kinds of Prototypes
Drawing, Foam Core, Diagram, Photoshop, etc.
Quick
Cheap
Sketchy
Many iterations/versions
“Paper”

11. Prototyping Overview Kinds of Prototypes
Quick or Complicated
Sketchy or polished
Tells a story
Live action video + After Effects
Shows people, context, scenario, function, form
Demo impossible/costly technologies or situations
Video

12. Sketch video - Christiane Holzheid & Julia Tsao - http://vimeo.com/3571717

13. Polished video - Sebastian Bettencourt - http://vimeo.com/12783337

14. Prototyping Overview Kinds of Prototypes
Doesn’t “work” but shows form
Rough or refined
How will object/system live in the world
Allows handling the thing directly
Story of Palm Pilot
http://pretotyping.blogspot.com/2010/08/one-of-my-favorite-pretotype-stories.html
Form Model

15. Prototyping Overview Kinds of Prototypes
Refined - ACCD Trans - Leon Paz
Rough - Palm Pilot - Jeff Hawkins

16. Prototyping Overview Kinds of Prototypes
Schematic of information architecture
Shows relationships and scope of content/navigation
Non-visual design
http://speckyboy.com/2011/05/29/20-effective-examples-
of-web-and-mobile-wireframe-sketches/
Wireframe

19. Prototyping Overview Kinds of Prototypes
Simple demo of a use scenario
Schematic of interaction
Shows navigation
Defines scope
Can be “wizard of oz-ed” where it seems to do more than it
really does
Click-through demo

20. Prototyping Overview Kinds of Prototypes
Interactive, not scripted
May be limited in features
Shows how actual use plays out
Form may not be accurate
Can be combined with Form model and/or video to tell full
story
Working prototype

21. Prototyping Overview Kinds of Prototypes
Douglas Engelbart - inventor of the first mouse - prototype built in 1963

22. Prototyping Overview Prototyping Tools
Can be used in combination
Use whatever gets the job done
Don’t be religious about them
New ones coming out all the time - it’s part of your job to
stay up-to-date on them
Prototyping Tools

23. Prototyping Overview Prototyping Tools
Paper/Photoshop/Illustrator
Keynote/Powerpoint
Pop
Invision
Pixate
HTML/CSS/JavaScript
Unity (for 3D environments)
Screen Design

24. Prototyping Overview Prototyping Tools
Foam models, foam-core
Hacking toys & other electronics
NETLab Toolkit
Arduino/Intel Edison/Raspberry PI
3D Printing, parametric fabrication
Tangible Interaction

25. Prototyping Overview
Prototyping is a humble craft
Thank You