Rapid Prototyping
-
Upload
uday-shankar -
Category
Technology
-
view
6.741 -
download
4
description
Transcript of Rapid Prototyping
![Page 1: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/1.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 1
Prototyping
Uday M. Shankar Yahoo! Bangalore, India
![Page 2: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/2.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 2
Uday M. Shankar
Working with Yahoo! R&D as Principal Engineer, Prototyping
Around 10 years in UI/UX space
![Page 3: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/3.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 3
WHAT’S THIS SESSION ABOUT?!
What? What’s possible with the Flash platform?!
![Page 4: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/4.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 4
WHAT’S PROTOTYPING?!
![Page 5: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/5.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 5
Wine Tasting
![Page 6: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/6.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 6
It actually makes a difference.
![Page 7: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/7.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 7
![Page 8: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/8.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 8
Origin - 1603, from Gk. prototypon "a first or primitive form," protos "first" + typos "impression."
Prototyping
![Page 9: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/9.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 9
it’s an art.
![Page 10: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/10.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 10
an art of managing expectations
![Page 11: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/11.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 11
SETTHERIGHTEXPECTATIONS
And deliver u p to tho se expectation s
![Page 12: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/12.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 12
Design evolves
Low fidelity
Less functional detail Static Less formal testing Disposable Paper
Understand Explore&Validate Communicate
High fidelity
More functional detail Interactive
More formal testing Re-purpose-able
Code
![Page 13: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/13.jpg)
• Going back to the drawing board is not a problem!
• Clear out misunderstandings and communication gaps of requirement study
• Documented design evaluation
• Sign off on design decisions
Why do this?
![Page 14: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/14.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 14
FACT
Mostpeoplealreadyspendtimeonprototyping!!!
![Page 15: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/15.jpg)
• Create the body – the blueprint
• Make it beautiful - Graphic tools
• Breath life into it - Prototyping tools
• Add the brains - Technology
In 4 steps
![Page 16: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/16.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 16
BalsamiqMockups
Mockflow
Powerpoint
Protoshare
DesignerVista
AxureRPPro
Petra
EasyPrototype
JusDnmind
FluidIAiPlotz
Flairbuilder
Simulify
SketchFlow
VisioProfessional
MockupScreens
OmniGraffle
Pencil
ForeUI
Denim
SketchFlow
Fireworks
RapidRabb.it
LucidSpec
FlashCatalyst
GUIDesignStudio
HotGloo
iRise
Whatwouldhelpyoudoyourjob?
![Page 17: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/17.jpg)
Paper Protos 12/2/09 17 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India
![Page 18: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/18.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 18
Wireframes
www.balsamiq.com
![Page 19: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/19.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 19
Flex/AIR Protos • A familiar technology
• Great WySiWyG tool
• Inter-portability between web and desktop
• Skinning & Cool effects!
• Easy integration with backend
![Page 20: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/20.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 20
DEMO
![Page 21: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/21.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 21
Flash Catalyst • Integration with Adobe tools
• Timeline feature for effects
• Easier handling of states
• More designer friendly
• More animator friendly
• Lot more developer friendly too!!!
![Page 22: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/22.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 22
Single glance
![Page 23: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/23.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 23
Second glance
Image Mockups
Flash XML Graphics
Flash Catalyst
Flex Project
Flash Builder
![Page 24: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/24.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 24
DEMO?
![Page 25: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/25.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 25
Prototyping as a career?
![Page 26: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/26.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 26
Ground rules • Write quick & dirty code
• Scalability > optimization
• Goal is to test experience, concept and feasibility. Not robustness.
• Abstract front-end from back-end
• Always use dummy data while prototyping
![Page 27: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/27.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 27
Ideas are cheap!!Developing them is not!!
![Page 28: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/28.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 28
Every single ‘detail’
matters!
![Page 29: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/29.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 29
Have multiple options to evaluate
![Page 30: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/30.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 30
Bottom line: Make it work!
![Page 31: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/31.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 31
Designer vs.
Developer
![Page 32: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/32.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 32
Workwith‘real’usersto
understandthem
![Page 33: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/33.jpg)
• Adaptive design & rapid prototyping - Mark Rickerby
• Modeling the mobile UX - Bryan Reiger • Principles of rapid prototyping for design -
KeeKim Heng
• Spoilt for choice - Suze Ingram
• Slideshare.net
References
![Page 34: Rapid Prototyping](https://reader034.fdocuments.us/reader034/viewer/2022050808/54c8096d4a795930308b4579/html5/thumbnails/34.jpg)
12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 34
What I hear. I forget. What I see, I remember. What I do, I understand.
–Lao Tse [email protected]
@UDAYMS
UDAYMS.WORDPRESS.COM