Sketching Interactivity

450 views

Published on

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.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
450
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Sketching Interactivity

  1. 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. 2. Guillermo Torres Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  3. 3. Guillermo Torres Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  4. 4. A pictur e is worth a thousan d words http://bit.ly/2rmUa2 © Chris Jordan Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4Wednesday, December 16, 2009
  5. 5. http:/ /bit.ly /rsFfj Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5Wednesday, December 16, 2009
  6. 6. ME http:/ /bit.ly /rsFfj Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5Wednesday, December 16, 2009
  7. 7. ME us http:/ /bit.ly /rsFfj Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5Wednesday, December 16, 2009
  8. 8. ME ever yone else us http:/ /bit.ly /rsFfj Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5Wednesday, December 16, 2009
  9. 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. 6Wednesday, December 16, 2009
  10. 10. Prototypes are great Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  11. 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. 8Wednesday, December 16, 2009
  12. 12. Stop describin just show g, it Benefits of Prototyping Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9Wednesday, December 16, 2009
  13. 13. Start testing faster Benefits of Prototyping Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10Wednesday, December 16, 2009
  14. 14. <?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:th="http://ns.adobe.com/thermo/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:states> <s:State name="State1" th:color="0xcc0000"/> <s:State name="State2" th:color="0x0081cc"/> explore in <s:State name="State3" th:color="0x00cc21"/> <s:State name="State4"/> </s:states> <s:BitmapImage source="@Embed(/assets/images/zoom1.jpg)" height="599.95" x.State2="37.9" code id="bitmapimage1" y.State2="40" width.State2="579.95" height.State2="680.05" x.State1="78" y.State1="80" alpha.State2="0.01" includeIn="State1,State2" d:userLabel="Image1"/> <s:BitmapImage x="60.9" y="61.1" source="@Embed(/assets/images/zoom3_big.jpg)" id="bitmapimage7" width="497.95" height="598.9" includeIn="State2,State3,State4" alpha="0.01" d:userLabel="image3" alpha.State3="1" y.State3="44" height.State3="668" x.State3="46" width.State3="570" y.State4="0" height.State4="775" x.State4="12" width.State4="644" x.State2="78.9" y.State2="81.1"/> <s:BitmapImage source="@Embed(/assets/images/zoom2_big.jpg)" id="bitmapimage0" x="60.9" y="61" height="599.95" width="497.95" includeIn="State1,State2,State3" alpha="1" d:userLabel="Image2" x.State2="39" y.State2="41" height.State2="704" width.State2="584" alpha.State1="0.01" x.State1="78.9" y.State1="81" alpha.State3="0.01" y.State3="9" include height.State3="750" x.State3="0" width.State3="660"/> <s:BitmapImage x="60.9" y="61.1" source="@Embed(/assets/images/zoom4_big.jpg)" id="bitmapimage9" height="600.85" width="501" includeIn="State3,State4" alpha="1" developers d:userLabel="Image4" x.State4="31" y.State4="22" height.State4="725" width.State4="604" alpha.State3="0.01" x.State3="78.9" y.State3="81.1"/> <s:transitions> earlier <s:Transition fromState="State1" toState="State2" autoReverse="true"> t="{bitmapimage0}"> <s:Resize d:noAutoDelete="true" startDelay="0" duration="500"/> <s:Move autoCenterTransform="true" d:noAutoDelete="true" startDelay="0" duration="500"/> <s:Fade duration="500" startDelay="0"/> Benefits of Prototyping <mx:Blur blurYFrom="20" blurYTo="0" blurXTo="0" blurXFrom="20" d:noAutoDelete="true" startDelay="0" duration="500"/> </s:Parallel> <s:Parallel target="{bitmapimage7}"> <s:Fade duration="0"/> </s:Parallel> </s:Parallel> Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11 </s:Transition>Wednesday, December 16, 2009 <s:Transition fromState="State1" toState="State3" autoReverse="true">
  15. 15. Prototypes are unattainable Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  16. 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. 13Wednesday, December 16, 2009
  17. 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. 14Wednesday, December 16, 2009
  18. 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. 15Wednesday, December 16, 2009
  19. 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. 16Wednesday, December 16, 2009
  20. 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. 17Wednesday, December 16, 2009
  21. 21. Including prototypes in your process Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  22. 22. Concepting Design Implementation Deploy/ Scope Maintain Including prototypes in your process Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19Wednesday, December 16, 2009
  23. 23. Concepting Design Implementation Deploy/ Scope Maintain Including prototypes in your process Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20Wednesday, December 16, 2009
  24. 24. Sketch Concepting Design Implementation Deploy/ Scope Maintain Including prototypes in your process Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20Wednesday, December 16, 2009
  25. 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. 20Wednesday, December 16, 2009
  26. 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. 20Wednesday, December 16, 2009
  27. 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. 21Wednesday, December 16, 2009
  28. 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. 22Wednesday, December 16, 2009
  29. 29. The Sketch/Prototype Continuum Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  30. 30. SKEtching User Experiences - Bill Buxton Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24Wednesday, December 16, 2009
  31. 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. 25Wednesday, December 16, 2009
  32. 32. “Sketch ideas to make things, and you are likely to encourage accidental discoveries. At the most fundamental level, what were talking about is play, about exploring borders.” Tom Kelley. Ideo Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26Wednesday, December 16, 2009
  33. 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. 27Wednesday, December 16, 2009
  34. 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. 28Wednesday, December 16, 2009
  35. 35. Investment Sketch Prototype Time The Sketch/Prototype Continuum Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29Wednesday, December 16, 2009
  36. 36. Investment Sketch Prototype Time The Sketch/Prototype Continuum Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30Wednesday, December 16, 2009
  37. 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. 31Wednesday, December 16, 2009
  38. 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. 32Wednesday, December 16, 2009
  39. 39. Demonstration Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.Wednesday, December 16, 2009
  40. 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. 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. 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. 43. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37Wednesday, December 16, 2009

×