Interaction Design
in the Designer’s
Hands

Ryan Stewart
Twitter: @ryanstewart
ryan@adobe.com
Welcome to the world of RIAs
Welcome to the world of RIAs




        Widgets                Consumer   Business
       Advertising               Tools...
Differences in Designing RIAs




            Static Design versus Interaction Design
What the Designer Creates
What the Developer Sees
Components as the building blocks


                                    • One of the bene   ts of RIAs is a very rich
    ...
Flash Catalyst

A professional interaction
design tool for rapidly
creating the user experience
of applications and
intera...
Outputs from Flash Catalyst




 Interaction
  Designer
Outputs from Flash Catalyst



                                         •   Wireframes

                                  ...
Outputs from Flash Catalyst



                                          •   Wireframes

                                 ...
Demo:
Wireframing Work ow
The current work ow




    Visual            Interaction
                                    Developer
   Designer       ...
The “Next” work ow




    Visual           Interaction
                                   Developer
   Designer          ...
The “Next” work ow in detail




     Visual                    Interaction
    Designer                    Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool




     Visual              ...
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import...
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import...
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import...
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import...
Demo:
Designing a commerce site
Declarative graphics

                                MXML graphics library providing rich primitive
                     ...
Declarative graphics

                                          MXML graphics library providing rich primitive
           ...
Further information




• Adobe Labs:
  http://labs.adobe.com/

• Adobe Developer Connection:
  http://www.adobe.com/devne...
Upcoming SlideShare
Loading in...5
×

DelveNYC: Flash Catalyst

1,666

Published on

Deep dive into Flash Catalyst at DelveNYC.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,666
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Slide 6: Adobe Flash Platform
    (2 min.)
    ¥The Flash Platform is a complete system to create and deliver expressive applications, content and video that run consistently across the widest reach of operating systems and devices.  
    ¥With the Open Screen Project, we’re going to take that even further, finally achieving the goal of web applications that can really work from all of the places that people connect to the web — mobile phones, desktops, browser, social networks and TVs.  
    ¥Even with 13 years of incredible Flash technology innovation, the best of the Flash Platform is still ahead.  
    ¥Our development tools, including Flex Builder, Creative Suite 4 and the interaction design tool we introduced to you last year as Project Thermo offer the foundation for agile design and development workflows, making it faster and easier for you to get your work done.
    ¥Project Thermo is now a reality called Flash Catalyst Flash Catalyst is all about better tooling, better workflow, and a faster time to market.
    ¥That’s also at the heart of Flex — offering a framework for building applications more quickly
    ¥To improve deployment of these applications, we’re continuing to drive innovation and consistency in the Flash Player.  The overwhelming success of the Flash Platform becomes increasingly evident with each new version of the Player we release. In the X months since we released Flash Player 20, we’ve had an incredible XXX downloads, an X percent increase (?) over this point with 1Flash Player 9. [Need input from PBU for final numbers/positioning]
    ¥With Flash Player 10, you can create an entirely new class of experiences not previously achievable on the Web.
    ¥And AIR 1.5, released today, takes all the power of Flash Player 10 and makes it available on the desktop.

    ¥Finally, the strength of our ecosystem is incredible, and we are continuing to not only extend the reach of the platform through our partners but also engage with every one of you through open feedback and the use of common standards.
    ¥One of the most gratifying things for me personally is seeing some of the groundbreaking applications built on the Flash Platform coming from new and unexpected places in the community – including government, education and the non-profit world
  • DelveNYC: Flash Catalyst

    1. 1. Interaction Design in the Designer’s Hands Ryan Stewart Twitter: @ryanstewart ryan@adobe.com
    2. 2. Welcome to the world of RIAs
    3. 3. Welcome to the world of RIAs Widgets Consumer Business Advertising Tools Apps Social Video Games Apps
    4. 4. Differences in Designing RIAs Static Design versus Interaction Design
    5. 5. What the Designer Creates
    6. 6. What the Developer Sees
    7. 7. Components as the building blocks • One of the bene ts of RIAs is a very rich component set • The components allow us to build customized, sophisticated user interfaces beyond what HTML provides • Developers often start by thinking about which components to use in an application or user interface. • The problem is that it’s very hard to design around those components. •Designers don’t think about components, they think about art and user experience.
    8. 8. Flash Catalyst A professional interaction design tool for rapidly creating the user experience of applications and interactive content without coding
    9. 9. Outputs from Flash Catalyst Interaction Designer
    10. 10. Outputs from Flash Catalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer Interaction Designer
    11. 11. Outputs from Flash Catalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer • Flex Project (FXP) Interaction Designer • MXML • ActionScript • Component skins Developer • Graphical assets
    12. 12. Demo: Wireframing Work ow
    13. 13. The current work ow Visual Interaction Developer Designer Designer
    14. 14. The “Next” work ow Visual Interaction Developer Designer Designer
    15. 15. The “Next” work ow in detail Visual Interaction Designer Designer
    16. 16. The “Next” work ow in detail • Start with a comp in CS4 design tool Visual Interaction Designer Designer
    17. 17. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity Visual Interaction Designer Designer
    18. 18. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual Interaction Designer Designer
    19. 19. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual • De ne states, interaction and Interaction Designer animation Designer
    20. 20. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual • De ne states, interaction and Interaction Designer animation Designer • Roundtrip to make re nements to graphical elements
    21. 21. Demo: Designing a commerce site
    22. 22. Declarative graphics MXML graphics library providing rich primitive t hs support - shapes, paths, lls, lters, transformations Shapes Pa <Ellipse y="46" height="144" width="144" x="86"> < ll> <SolidColor color="0x9ab3e2"/> </ ll> <stroke> Fills & Strokes Filters <SolidColorStroke color="0x0a35aa" caps="none" joints="miter" miterLimit="4" weight="4"/> </stroke> </Ellipse>
    23. 23. Declarative graphics MXML graphics library providing rich primitive t hs support - shapes, paths, lls, lters, transformations Shapes Pa <Ellipse y="46" height="144" width="144" x="86"> < ll> <SolidColor color="0x9ab3e2"/> </ ll> <stroke> Fills & Strokes Filters <SolidColorStroke color="0x0a35aa" caps="none" joints="miter" miterLimit="4" weight="4"/> </stroke> </Ellipse> FXG is an interchange format based on MXML graphics Closely matches the Flash Player rendering model Static - no binding support, scripting, event handlers, etc
    24. 24. Further information • Adobe Labs: http://labs.adobe.com/ • Adobe Developer Connection: http://www.adobe.com/devnet/ • My blog: http://blog.digitalbackcountry.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×