Presentation for Code Mastery-Chicago. Sandy Fougerousse, Associate Lead Consultant

1. Designer and Developer Collaboration with
Visual Studio 2012 and Expression Blend
Sandy Fougerousse
UX Design Consultant
sandraf@magenic.com | http://blog.aridae.com

2. “Old” Development Cycle
Project Project
Start Design Development End
Designer deliverables: Developer deliverables:
• static jpg versions of screens • Functional UI code
• any image assets • …the rest of the project
• Font information, etc

3. Collaboration Cycle
Design Project
Project
Start End
Design Development
• Designer delivers final UI assets (XAML, HTML5, etc)
• Developer only supports the UI, does not fully develop it

4. Why?
• Put the design stakeholder back in charge of the design
• Give the designer a better grasp on the possibilities
• Relieve some burden from the developers
This kind of true collaboration results in more cutting edge experiences

5. How do we get there?
• We need to encourage our designing friends to learn a few things about
the development cycle
– Source Control (preferably TFS)
– Development cycle concepts like SBTs and Bugs
– Using Blend to make code assets
• We need to start using Blend.

6. The Twitter App

7. The Twitter App

8. The Twitter App
• asset names)

9. Demo: Blend Intro & XAML/WPF
Skinning

10. Cool new things in Blend 5?
• HTML5/.js support
• .js runs at design time
• Interactive Mode
• New css3 concepts supported (grid, flexbox, etc)
• Toggle different Win8 display variations/resolutions

11. Demo: Blend .js Skinning
.js source: http://blogs.msdn.com/b/davrous/archive/2012/08/21/windows‐8‐html5‐metro‐style‐app‐how‐to‐create‐a‐small‐
rss‐reader‐in‐30min‐part‐1‐2.aspx

12. Sandy Fougerousse
Questions UX Design Consultant
sandraf@magenic.com | http://blog.aridae.com