SlideShare une entreprise Scribd logo
1  sur  24
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     Apps




                                           Social
         Video                  Games
                                           Apps
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
                                    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.
Flash Catalyst

A professional interaction
design tool for rapidly
creating the user experience
of applications and
interactive content without
coding
Outputs from Flash Catalyst




 Interaction
  Designer
Outputs from Flash Catalyst



                                         •   Wireframes

                                         •   Interactive design comps

                                         •   Self-contained Flash sites
                              Customer




 Interaction
  Designer
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
Demo:
Wireframing Work ow
The current work ow




    Visual            Interaction
                                    Developer
   Designer            Designer
The “Next” work ow




    Visual           Interaction
                                   Developer
   Designer           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                                                   Interaction
    Designer                                                   Designer
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
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
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
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
Demo:
Designing a commerce site
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>
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
Further information




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

• Adobe Developer Connection:
  http://www.adobe.com/devnet/

• My blog:
  http://blog.digitalbackcountry.com

Contenu connexe

Similaire à DelveNYC: Flash Catalyst

How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...
guest83d3e0
 

Similaire à DelveNYC: Flash Catalyst (20)

Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
 
Best Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersBest Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX Designers
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Flash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyFlash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange County
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
Xtext, diagrams and ux
Xtext, diagrams and uxXtext, diagrams and ux
Xtext, diagrams and ux
 
Web Design Course Srigsystems
Web Design Course SrigsystemsWeb Design Course Srigsystems
Web Design Course Srigsystems
 
Adobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJSAdobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJS
 
MWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVCMWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVC
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
silverlight1.pptx
silverlight1.pptxsilverlight1.pptx
silverlight1.pptx
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
An Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPagesAn Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPages
 
Deep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLiftDeep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLift
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web app
 
Decrap Your Application
Decrap Your ApplicationDecrap Your Application
Decrap Your Application
 
Tools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteTools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web Site
 
How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...
 

Plus de Ryan Stewart

Plus de Ryan Stewart (12)

Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
 
Debugging and deploying with phone gap
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gap
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
HTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex Developers
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
Mapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash PlatformMapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash Platform
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Mapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash PlatformMapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash Platform
 

Dernier

Dernier (20)

HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

DelveNYC: Flash Catalyst

  • 1. Interaction Design in the Designer’s Hands Ryan Stewart Twitter: @ryanstewart ryan@adobe.com
  • 2. Welcome to the world of RIAs
  • 3. Welcome to the world of RIAs Widgets Consumer Business Advertising Tools Apps Social Video Games Apps
  • 4. Differences in Designing RIAs Static Design versus Interaction Design
  • 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. Flash Catalyst A professional interaction design tool for rapidly creating the user experience of applications and interactive content without coding
  • 9. Outputs from Flash Catalyst Interaction Designer
  • 10. Outputs from Flash Catalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer Interaction Designer
  • 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
  • 13. The current work ow Visual Interaction Developer Designer Designer
  • 14. The “Next” work ow Visual Interaction Developer Designer Designer
  • 15. The “Next” work ow in detail Visual Interaction Designer Designer
  • 16. The “Next” work ow in detail • Start with a comp in CS4 design tool Visual Interaction Designer Designer
  • 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. 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. 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. 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
  • 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. 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. Further information • Adobe Labs: http://labs.adobe.com/ • Adobe Developer Connection: http://www.adobe.com/devnet/ • My blog: http://blog.digitalbackcountry.com

Notes de l'éditeur

  1. Slide 6: Adobe Flash Platform (2 min.) &amp;#xA5;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. &amp;#xA0; &amp;#xA5;With the Open Screen Project, we&amp;#x2019;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 &amp;#x2014; mobile phones, desktops, browser, social networks and TVs. &amp;#xA0; &amp;#xA5;Even with 13 years of incredible Flash technology innovation, the best of the Flash Platform is still ahead. &amp;#xA0; &amp;#xA5;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. &amp;#xA5;Project Thermo is now a reality called Flash Catalyst Flash Catalyst is all about better tooling, better workflow, and a faster time to market. &amp;#xA5;That&amp;#x2019;s also at the heart of Flex &amp;#x2014; offering a framework for building applications more quickly &amp;#xA5;To improve deployment of these applications, we&amp;#x2019;re continuing to drive innovation and consistency in the Flash Player. &amp;#xA0;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&amp;#x2019;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] &amp;#xA5;With Flash Player 10, you can create an entirely new class of experiences not previously achievable on the Web. &amp;#xA5;And AIR 1.5, released today, takes all the power of Flash Player 10 and makes it available on the desktop. &amp;#xA5;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. &amp;#xA5;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 &amp;#x2013; including government, education and the non-profit world