Sketching Interactivity

Sketching Interactivity Using Flash CatalystGuillermo Torres

@g1sh #adobemax54 #flashcatalyst

Wednesday, December 16, 2009

Guillermo Torres

A picture is worth a thousand words

http://bit.ly/2rmUa2

http://bit.ly/rsFfj

everyone

A picture is worth a thousand words

...a prototype even more

Prototypes are great

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

Xunzi (340-245 BC)

Benefits of Prototyping

Stop describing, just show it

Start testing faster

<?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>

explore in code

include developers earlier

Prototypes are unattainable

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

Waaaahhh!

Including prototypes in your process

Concepting Design Implementation Deploy/Maintain

Sketch

Sketch ThrowawayPrototype

Sketch ThrowawayPrototype Evolutionary

Prototype

The Sketch/Prototype Continuum

SKEtching User Experiences - Bill Buxton

QuickInexpensive

Plentiful

TimelyDisposable

What we want to learn from sketching

“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

Celebrate Failure

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

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

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

Investm

Sketch Prototype

Investm

Sketch Prototype

It’s not about the pencil

What we DON’T want to learn from sketching

It’s not about the pencil

What we DON’T want to learn from sketching

Demonstration

What we learned:

•The benefits of prototyping.

•Including prototyping in your process.

•The sketch prototype continuum.

•Sketching with building blocks.

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.

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

Sketching Interactivity

Technology

Sketching User Experience—Video Sketching

Interactivity 1: ProcessWork

Corporate Event Interactivity

Sketching Paris

SM1205 Interactivity Topic 07: Interactivity for Games Spring 2012SCM-CityU1

Interactivity in Museums

Christie Interactivity Kit

Physical Sketching (Sketching vs Prototyping with BeatBearing design example)

Interactivity Ideas_11June14

Interactivity is insufficient

Interactivity linear non

Visual Interactivity

Leture3_HCI and Interactivity

Carrie Heeter - Interactivity

Interactivity Coding

Dynamic Interactivity

Interactivity & Design

sketching - Technical University of Denmarkcourses.compute.dtu.dk/02289/2020/streaming/sketching-1x...• Sketching • CountMin sketch Today Sketching • Sketching. create compact

AIE Sheet... · Presentation 1a The outline includes but is not limited to: • Sketching with traditional hand sketching tools. • Sketching with Autodesk Sketchbook and sketching

Sketching london