Your SlideShare is downloading. ×
0
Rapid Application Prototyping with
SketchFlow
Viral Tarpara – Technical Evangelist - Microsoft
Utopian Workflow
Brief
Rebrief
Concept
•Sketch
•Prototype
Delivery
Dev-Fat Agencies
Brief
Rebrief
Concept
•Sketch
•Prototype
Delivery
How Agencies REALLY Work
Brief
Rebrief
Brief
Rebrief
Brief
Rebrief
Concept Delivery
This Leads to...
Why Concept Phase is a Nightmare
BAD
FEEDBACK
COMPLEX
IDEAS
BIG
CHANGES
NO
CUSTOMER
FOCUS
Customers who aren’t “design-centric” do not
give you actionable feedback. They remain
focused on the details like color a...
31/01/2015
31/01/2015
31/01/2015
Feedback Player in Browser
Full Interaction and Commenting
This Paper Sketch Actually Rotates
Try to Explain this on Paper!
31/01/2015
Sketchflow Tasks
• Import Adobe files into Full Functioning UIs
• Application Navigation System with NO CODE
• Add State t...
31/01/2015
“We Don’t Use Silverlight”
• HTML/Flash Shops Fast Prototyping
• Conceptualize in Silverlight/WPF
• Finalize Changes befor...
Getting Started with Sketchflow
• Download Silverlight 3
• Download Microsoft Expression Blend 3 trial
• Checkout Sketchfl...
31/01/2015
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Prototyping With Sketchflow
Upcoming SlideShare
Loading in...5
×

Prototyping With Sketchflow

5,043

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,043
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • This is the typical flow of how designers and agencies work with customers. Customers brief agencies. Agencies translate a combination of explicit and implicit requirements and present the idea back to the customer. If the idea is properly understood by both parties then the designers start work on the concept.

    Current modes of communicating projects:
    Static images
    PDFs
    Powerpoints
    Visio diagrams
    Paper or digital Sketches

    None of these faithfully represent the final product or user experience. The end result of this is that concept phase is exited prematurely and development/delivery begins. Changes to the concept iterate development often times breaking mature aspects of the project delivery.

    The fundamental question is, “why do people leave concept phase so early?”
  • This is the typical flow of how designers and agencies work with customers. Customers brief agencies. Agencies translate a combination of explicit and implicit requirements and present the idea back to the customer. If the idea is properly understood by both parties then the designers start work on the concept.

    Current modes of communicating projects:
    Static images
    PDFs
    Powerpoints
    Visio diagrams
    Paper or digital Sketches

    None of these faithfully represent the final product or user experience. The end result of this is that concept phase is exited prematurely and development/delivery begins. Changes to the concept iterate development often times breaking mature aspects of the project delivery.

    The fundamental question is, “why do people leave concept phase so early?”
  • This is the typical flow of how designers and agencies work with customers. Customers brief agencies. Agencies translate a combination of explicit and implicit requirements and present the idea back to the customer. If the idea is properly understood by both parties then the designers start work on the concept.

    Current modes of communicating projects:
    Static images
    PDFs
    Powerpoints
    Visio diagrams
    Paper or digital Sketches

    None of these faithfully represent the final product or user experience. The end result of this is that concept phase is exited prematurely and development/delivery begins. Changes to the concept iterate development often times breaking mature aspects of the project delivery.

    The fundamental question is, “why do people leave concept phase so early?”
  • This is the typical flow of how designers and agencies work with customers. Customers brief agencies. Agencies translate a combination of explicit and implicit requirements and present the idea back to the customer. If the idea is properly understood by both parties then the designers start work on the concept.

    Current modes of communicating projects:
    Static images
    PDFs
    Powerpoints
    Visio diagrams
    Paper or digital Sketches

    None of these faithfully represent the final product or user experience. The end result of this is that concept phase is exited prematurely and development/delivery begins. Changes to the concept iterate development often times breaking mature aspects of the project delivery.

    The fundamental question is, “why do people leave concept phase so early?”
  • It is because the concept phase is a nightmare!

    Feedback – Customers who aren’t “design-centric” do not give you actionable feedback. They remain focused on the details like color, images, rather than “look ‘n feel” and design
    Complex idea – Customers are unable to communicate complex ideas and in turn, it is hard for designers to fully capture what they want. On the flip side, designers presenting static images, sketches, and portfolios do not fully convey their intentions to the customer. Even after multiple iterations, customers and designers are still “guessing” what each other wants. Sketchflow creates live web applications via Silverlight so that customers can view and interact with concepts and ideas
    Changes – Because designers and customers could never finalize a concept 100%, development would often begin with a set of unknown ideas and concepts with the hopes that “minor” changes would be accounted for. Sometimes changes that may seem minor in design are big architecturally and can frustrate the web developers and at worse break parts of the existing project. This equates to lost time and money. Sketchflow is completely .NET and XAML (XML) based so any changes that a designer makes within Expression Blend 3 are updated and passed on to Visual Studio to the developer. Because designers and developer work inside the same project, teams face less friction and are more accommodating of complex changes.
    Customer Focus – the lack of quality feedback mechanisms, the extensive use of complex design concepts, and the iterative design process lead to a nightmare scenario where customers do not focus on the questions you need answered and leads your own frustration. Words cannot express what you may go through but I imagine it may feel something like the next slide.
  • You feel like this when dealing with “unenlightened” customers
  • Auto generation of project manager documentation with TOC and high-res images showing each page of the application as well as state.
  • Notice the sitemap/application map. Blue indicate pages/states and the green represents common “components” like navigation that pages inherit.
  • Sitemap and feedback boxes populated by end-user feedback via the Feedback player
  • A sample of the available “sketchy” parts for craft digital application sketches
  • Cross-platform/cross-browser Silverlight application where clients can annotate aspects of the project using a mouse or tablet PC. You can pencil, marker, highlight, and comment any aspect and version of the project.
  • This is a screenshot of an actual paper sketch that was scanned into Sketchflow and made interactive. The wheel actually rotates when the mouse-wheel moves. Try to explain the “look ‘n feel” on paper with this! (its REALLY HARD!)
  • Add Behaviors
    Changes Propagate to development environment
    Ex. Login Successful / Login Failed
    Names, addresses, numbers, prices


  • Even if you don’t use Silverlight, you should try it purely for conceptualization and design. To bring in a digital film production analogy, use Silverlight and Sketchflow as your “intermediate” copy/build.

    * - Linux support will come when the open-source implementation of Silverlight, known as Moonlight, gains feature parity with Silverlight 3.
  • Sketchflow starter kit is AWESOME! 12 videos (WMV), scripts, and raw assets.
  • Transcript of "Prototyping With Sketchflow"

    1. 1. Rapid Application Prototyping with SketchFlow Viral Tarpara – Technical Evangelist - Microsoft
    2. 2. Utopian Workflow Brief Rebrief Concept •Sketch •Prototype Delivery
    3. 3. Dev-Fat Agencies Brief Rebrief Concept •Sketch •Prototype Delivery
    4. 4. How Agencies REALLY Work Brief Rebrief Brief Rebrief Brief Rebrief Concept Delivery
    5. 5. This Leads to...
    6. 6. Why Concept Phase is a Nightmare BAD FEEDBACK COMPLEX IDEAS BIG CHANGES NO CUSTOMER FOCUS
    7. 7. Customers who aren’t “design-centric” do not give you actionable feedback. They remain focused on the details like color and images, rather than “look ‘n feel” and design
    8. 8. 31/01/2015
    9. 9. 31/01/2015
    10. 10. 31/01/2015
    11. 11. Feedback Player in Browser
    12. 12. Full Interaction and Commenting
    13. 13. This Paper Sketch Actually Rotates Try to Explain this on Paper!
    14. 14. 31/01/2015
    15. 15. Sketchflow Tasks • Import Adobe files into Full Functioning UIs • Application Navigation System with NO CODE • Add State to the application • Drag and Drop usable Sample Data
    16. 16. 31/01/2015
    17. 17. “We Don’t Use Silverlight” • HTML/Flash Shops Fast Prototyping • Conceptualize in Silverlight/WPF • Finalize Changes before Development • Multi-user / Multi-version Feedback • Firefox, IE, Safari Support on PC/MAC/Linux*
    18. 18. Getting Started with Sketchflow • Download Silverlight 3 • Download Microsoft Expression Blend 3 trial • Checkout Sketchflow Starter Kit – Videos – Guides – Assets • Contact Me : viralta@microsoft.com • Blog: http://blogs.technet.net/tarpara • TwitterID: @TARPARA
    19. 19. 31/01/2015
    1. A particular slide catching your eye?

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

    ×