Adobe XD Senior Experience Designer Guillermo Torres Troconis shows how Rapid prototyping can be used to make your design process much faster and better, and to discover you how to create some very cool and custom interfaces using Flash Catalyst and Flex 4.
1. Sketching Interactivity
Using Flash Catalyst
Guillermo Torres
@g1sh #adobemax54 #flashcatalyst
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
2. Guillermo Torres
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
3. Guillermo Torres
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
5. http:/
/bit.ly
/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
Wednesday, December 16, 2009
6. ME
http:/
/bit.ly
/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
Wednesday, December 16, 2009
7. ME
us http:/
/bit.ly
/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
Wednesday, December 16, 2009
8. ME
ever yone
else
us http:/
/bit.ly
/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
Wednesday, December 16, 2009
9. A pictur
e is
worth a
thousan
d
words
...a
prototype
even more
i
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
Wednesday, December 16, 2009
10. Prototypes are great
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
11. “What I hear I forget,
what I see I remember,
what I do I understand.”
Xunzi (340-245 BC)
Benefits of Prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
Wednesday, December 16, 2009
12. Stop
describin
just show g,
it
Benefits of Prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
Wednesday, December 16, 2009
13. Start testing
faster
Benefits of Prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
Wednesday, December 16, 2009
15. Prototypes are
unattainable
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
16. There is never
any time That looks great!
let’s launch tomorrow.
Waaaahhh!
I can’t get
any resources
We spent all this
money, now we
have to throw it
away?!
Pitfalls of prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
Wednesday, December 16, 2009
17. There is never
any time That looks great!
let’s launch tomorrow.
Waaaahhh!
I can’t get
any resources
We spent all this
money, now we
have to throw it
away?!
Pitfalls of prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
Wednesday, December 16, 2009
18. There is never
any time That looks great!
let’s launch tomorrow.
Waaaahhh!
I can’t get
any resources
We spent all this
money, now we
have to throw it
away?!
Pitfalls of prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
Wednesday, December 16, 2009
19. There is never
any time That looks great!
let’s launch tomorrow.
Waaaahhh!
I can’t get
any resources
We spent all this
money, now we
have to throw it
away?!
Pitfalls of prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
Wednesday, December 16, 2009
20. There is never
any time That looks great!
let’s launch tomorrow.
Waaaahhh!
I can’t get
any resources
We spent all this
money, now we
have to throw it
away?!
Pitfalls of prototyping
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
Wednesday, December 16, 2009
21. Including prototypes
in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
22. Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19
Wednesday, December 16, 2009
23. Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Wednesday, December 16, 2009
24. Sketch
Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Wednesday, December 16, 2009
25. Sketch Throwaway
Prototype
Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Wednesday, December 16, 2009
26. Sketch Throwaway
Prototype Evolutionary
Prototype
Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Wednesday, December 16, 2009
27. Sketch Throwaway
Prototype Evolutionary
Prototype
1.0
Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21
Wednesday, December 16, 2009
28. Sketch Throwaway
Prototype Evolutionary
Prototype
Concepting Design Implementation Deploy/
Scope
Maintain
Including prototypes in your process
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22
Wednesday, December 16, 2009
29. The Sketch/Prototype
Continuum
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
30. SKEtching User Experiences - Bill Buxton
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
Wednesday, December 16, 2009
31. What we
Q uick want to learn
Inexpen sive from
sketching
Plen tiful
T imely
Dispo sable
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25
Wednesday, December 16, 2009
32. “Sketch ideas to make things, and you are
likely to encourage accidental discoveries.
At the most fundamental level, what we're
talking about is play, about exploring
borders.”
Tom Kelley. Ideo
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26
Wednesday, December 16, 2009
33. e Fa ilure
Cel ebrat
“If you are not prepared to be wrong,
you’ll never come up with an original ”
Sir Ken Robinson
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27
Wednesday, December 16, 2009
34. “Constraints drive innovation and force
focus. Instead of trying to remove them, use
them to your advantage.”
“Getting Real” —
37 Signals
http://gettingreal37signals.com/
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28
Wednesday, December 16, 2009
35. Investment
Sketch Prototype
Time
The Sketch/Prototype Continuum
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29
Wednesday, December 16, 2009
36. Investment
Sketch Prototype
Time
The Sketch/Prototype Continuum
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30
Wednesday, December 16, 2009
37. ut t h e pencil
It’s n ot abo
Boo!
What we
DON’T want
to learn from
sketching
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31
Wednesday, December 16, 2009
38. ut t h e pencil
It’s n ot abo
Boo!
What we
DON’T want
to learn from
sketching
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32
Wednesday, December 16, 2009
39. Demonstration
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
40. What we learned:
•The benefits of prototyping.
•Including prototyping in your process.
•The sketch prototype continuum.
•Sketching with building blocks.
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
41. What we learned:
•Using wireframe components
•Importing your own library of components
•States are used to manage the properties of the shared objects
•If a component has multiple states, a transitions are automatically generated
•Convert artwork to a component to add interactivity
•Use Data Lists to ease the generation of a set of items
•Use the timelines panel to orchestrate motion and transitions.
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
42. Try:
http://labs.adobe.com/technologies/flashcatalyst/
Discuss:
http://forums.adobe.com/community/labs/flashcatalyst/
@g1sh #adobemax54 #flashcatalyst
Learn:
http://tv.adobe.com/product/flash-catalyst/
Get Inspired: Thanks!
http://xd.adobe.com
@g1sh
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Wednesday, December 16, 2009
43. ®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37
Wednesday, December 16, 2009