Designer and Developer Collaboration with Visual Studio 2012 and Expression BlendSandy FougerousseUX Design Consultant

sandraf@magenic.com |  http://blog.aridae.com

“Old” Development Cycle

Designer deliverables: 

• static jpg versions of screens 

• any image assets

• Font information, etc

Design Development

Developer deliverables: 

• Functional UI code

• …the rest of the project

Project Start

Project End

Collaboration Cycle

• Designer delivers final UI assets (XAML, HTML5, etc)

• Developer only supports the UI, does not fully develop it

Design

Development

Project Start

Project End

Design

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

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.

The Twitter App

The Twitter App

The Twitter App• asset names)

Demo: Blend Intro & XAML/WPF      Skinning

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

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

Sandy FougerousseUX Design Consultant

sandraf@magenic.com |  http://blog.aridae.comQuestions