Embed Size (px)
DESCRIPTION
How do you combine a designer's vision with the requirements of productive software? Left brain/Right brain workflow is a sophisticated problem that impacts us all but has no easy answers. However, with Blend 3, Sketchflow, Visual Studio 2010, Silverlight 3 and WPF 4, things are getting better. Come hear about design/developer workflow with Microsoft tools from the author of the seminal white paper; The New Iteration: How XAML Transforms the Collaboration Between Designers and Developers.
Citation preview
The New Iteration: Designer/Developer Workflow With
Expression Blend
Karsten Januszewski
Or…
How To Train a Designer To Use Blend
Assumption:
Design matters
Assumption:
Better design makes
better software
Assumption:
You can’t design(I know I can’t)
Thesis:
Better designer/developer
workflow makesbetter software
Thesis:
When developers/designers
can collaborate they make better
software
Thesis:
When a designer knows Expression Blend, you have to do less work
The Problem:
How do I get my designer to use
Expression Blend?
How do I know this?
Tim Aidlin
The New Iteration
Steps to Success:
1. Lure Them In2. Set Them Up For Success 3. Empower & Flatter Them4. Give Them SketchFlow
Step 1:
Lure Them In
How?
private Lure GetLure(Designer d){ if (!d.IsWindows7)
throw new Exception(); Lure l = null; if (d.Type == artist)
l = “Photoshop Import”; if (d.Type == interactive)
l = “behaviors”; return l;}
Photoshop/Illustrator Import
• Layers. Expression Blend preserves layer names, importing the layers as individual objects and layout containers
• Text. When you are importing Photoshop files, text can be imported as editable text objects or as flat bitmap images.
• Vectors. Vector art can be imported as editable path objects. Photoshop files can also be imported as images.
• Blend Modes. When you are importing Photoshop files, layers that contain blend modes can be merged.
• Gradients. Linear and radial gradients remain editable after they are imported. Color stops are imported as gradient brushes. Opacity stops imported as gradient brushes to the OpacityMask property.
• Patterns. Patterns are imported as image brushes.
Demo:
Photoshop/IllustratorImport
Behaviors
• Add interactivity without writing code• Entirely XAML based• Behaviors community on
http://expression.microsoft.com• Behaviors on Codeplex:
http://expressionblend.codeplex.com
Demo:
Behaviors
Download Beehive Project and Tutorial
Videos
search: beehive expression
Step 2:
Set Them Up For Success
How?
1.Read The New Iteration2.Teach them source control3.Set up project structure in
advance4.Data first!
Step 3:
Empower and Flatter Them
1.Don’t be afraid of the XAML generated by Blend
2.Let go of ownership of the UI
3.Give them lots of compliments
4.Work together!
Demo:
Flotzam
The big payoff…
Step 4:
Give Them SketchFlow
SketchFlow
A prototyping tool for skilled Blend designers
Demo:
SketchFlow
Live The Dream!
