sketching interactivity

43
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. Sketching Interactivity Using Flash Catalyst Guillermo Torres @g1sh #adobemax54 #flashcatalyst Wednesday, December 16, 2009

Upload: g1sh

Post on 06-Jul-2015

307 views

Category:

Technology


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Sketching Interactivity Using Flash CatalystGuillermo Torres

@g1sh #adobemax54 #flashcatalyst

Wednesday, December 16, 2009

Page 2: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Guillermo Torres

Wednesday, December 16, 2009

Page 3: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Guillermo Torres

Wednesday, December 16, 2009

Page 4: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4

© Chris Jordan

A picture is worth a thousand words

http://bit.ly/2rmUa2

Wednesday, December 16, 2009

Page 9: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6

A picture is worth a thousand words

...a prototype even more

i

Wednesday, December 16, 2009

Page 10: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Prototypes are great

Wednesday, December 16, 2009

Page 11: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8

“What I hear I forget, what I see I remember, what I do I understand.”

Xunzi (340-245 BC)

Benefits of Prototyping

Wednesday, December 16, 2009

Page 12: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9

Stop describing, just show it

Benefits of Prototyping

Wednesday, December 16, 2009

Page 13: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10

Start testing faster

Benefits of Prototyping

Wednesday, December 16, 2009

Page 14: Sketching Interactivity

<?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"/> <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" 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" 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" 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> <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"/> <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> </s:Transition> <s:Transition fromState="State1" toState="State3" autoReverse="true"> <s:Parallel> <s:Parallel target="{bitmapimage1}"> <s:Transition fromState="State2" toState="State4" autoReverse="true"> <s:Parallel> <s:Parallel target="{bitmapimage1}"> <s:Fade duration="500"/> </s:Parallel> <s:Parallel target="{bitmapimage7}"> <s:Fade duration="500"/> </s:Parallel> <s:Move autoCenterTransform="true" duration="500" startDelay="0"/> <s:Resize duration="500" startDelay="0"/> <s:Fade duration="500" startDelay="0"/> </s:Parallel> <s:Parallel target="{bitmapimage0}"> <s:Fade duration="500"/> </s:Parallel> </s:Parallel> </s:Transition> </s:transitions> <fx:Private> <th:Guide x="61"/> <th:Guide x="559"/> <th:Guide y="61"/> <th:Guide y="659"/> </fx:Private></s:Group>

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11

explore in code

Benefits of Prototyping

include developers earlier

Wednesday, December 16, 2009

Page 15: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Prototypes are unattainable

Wednesday, December 16, 2009

Page 16: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13

There is never any time

I can’t getany resources

We spent all this money, now we have to throw it away?!

That looks great! let’s launch tomorrow.

Waaaahhh!

Pitfalls of prototyping

Wednesday, December 16, 2009

Page 17: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14

There is never any time

I can’t getany resources

We spent all this money, now we have to throw it away?!

That looks great! let’s launch tomorrow.

Waaaahhh!

Pitfalls of prototyping

Wednesday, December 16, 2009

Page 18: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15

There is never any time

I can’t getany resources

We spent all this money, now we have to throw it away?!

That looks great! let’s launch tomorrow.

Waaaahhh!

Pitfalls of prototyping

Wednesday, December 16, 2009

Page 19: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16

There is never any time

I can’t getany resources

We spent all this money, now we have to throw it away?!

That looks great! let’s launch tomorrow.

Waaaahhh!

Pitfalls of prototyping

Wednesday, December 16, 2009

Page 20: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17

There is never any time

I can’t getany resources

We spent all this money, now we have to throw it away?!

That looks great! let’s launch tomorrow.

Waaaahhh!

Pitfalls of prototyping

Wednesday, December 16, 2009

Page 21: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Including prototypes in your process

Wednesday, December 16, 2009

Page 22: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 23: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 24: Sketching Interactivity

Sketch

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 25: Sketching Interactivity

Sketch ThrowawayPrototype

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 26: Sketching Interactivity

Sketch ThrowawayPrototype Evolutionary

Prototype

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 27: Sketching Interactivity

Sketch ThrowawayPrototype Evolutionary

Prototype

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

1.0

Wednesday, December 16, 2009

Page 28: Sketching Interactivity

Sketch ThrowawayPrototype Evolutionary

Prototype

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22

Concepting Design Implementation Deploy/Maintain

Scope

Including prototypes in your process

Wednesday, December 16, 2009

Page 29: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

The Sketch/Prototype Continuum

Wednesday, December 16, 2009

Page 30: Sketching Interactivity

SKEtching User Experiences - Bill Buxton

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24

Wednesday, December 16, 2009

Page 31: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25

QuickInexpensive

Plentiful

TimelyDisposable

What we want to learn from sketching

Wednesday, December 16, 2009

Page 32: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26

“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

Wednesday, December 16, 2009

Page 33: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27

Celebrate Failure

“If you are not prepared to be wrong,you’ll never come up with an original ” Sir Ken Robinson

Wednesday, December 16, 2009

Page 34: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28

“Constraints drive innovation and force focus. Instead of trying to remove them, use them to your advantage.”

“Getting Real” — 37 Signals http://gettingreal37signals.com/

Wednesday, December 16, 2009

Page 35: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29

Time

Investm

ent

The Sketch/Prototype Continuum

Sketch Prototype

Wednesday, December 16, 2009

Page 36: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30

Time

Investm

ent

The Sketch/Prototype Continuum

Sketch Prototype

Wednesday, December 16, 2009

Page 37: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31

It’s not about the pencil

Boo!

What we DON’T want to learn from sketching

Wednesday, December 16, 2009

Page 38: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32

It’s not about the pencil

Boo!

What we DON’T want to learn from sketching

Wednesday, December 16, 2009

Page 39: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Demonstration

Wednesday, December 16, 2009

Page 40: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

What we learned:

•The benefits of prototyping.

•Including prototyping in your process.

•The sketch prototype continuum.

•Sketching with building blocks.

Wednesday, December 16, 2009

Page 41: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

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.

Wednesday, December 16, 2009

Page 42: Sketching Interactivity

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

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:http://xd.adobe.com

Thanks!@g1sh

Wednesday, December 16, 2009

Page 43: Sketching Interactivity

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37

Wednesday, December 16, 2009