designer and developer collaboration with visual studio 2012 and expression blend
DESCRIPTION
Presentation for Code Mastery-Chicago. Sandy Fougerousse, Associate Lead ConsultantTRANSCRIPT
![Page 1: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/1.jpg)
Designer and Developer Collaboration with Visual Studio 2012 and Expression BlendSandy FougerousseUX Design Consultant
[email protected] | http://blog.aridae.com
![Page 2: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/2.jpg)
“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
![Page 3: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/3.jpg)
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
![Page 4: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/4.jpg)
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
![Page 5: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/5.jpg)
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.
![Page 6: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/6.jpg)
The Twitter App
![Page 7: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/7.jpg)
The Twitter App
![Page 8: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/8.jpg)
The Twitter App• asset names)
![Page 9: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/9.jpg)
Demo: Blend Intro & XAML/WPF Skinning
![Page 10: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/10.jpg)
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
![Page 11: Designer and Developer Collaboration with Visual Studio 2012 and Expression Blend](https://reader034.vdocument.in/reader034/viewer/2022052523/55526d6fb4c9052e1f8b511a/html5/thumbnails/11.jpg)
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