How To Get Your Designer To Love Expression Blend

Preview:

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!

Thank you!

karstenj@microsoft.comhttp://visitmix.com http://rhizohm.net

@irhetoric