Jose Fajardo

Friday September 19, 2008

Expression Design needs loving !

I recently had an eye opening conversation with a fellow Silverlight enthusiast (Roger Guess). It never occurred to me that people don’t use Expression Design as part of their workflow for Silverlight RIA’s.

I find that Expression Blend introduces a lot of noise to the creative process. When I start in Blend I find that I waste a lot of time with layouts, tweaking properties, naming layers, grouping objects. All these things are important BUT when your primary task is to create a good design these things are distractions.

Design lets you be creative and ONLY creative. Make it look right first and then make it work.  In my experience making it work, after the fact, is a pretty simple exercise.

So just to give you a taste of how I use Expression Design here are some screen shots of some demo’s I created for talks I’ve given.

In the below picture you can see me taking some menu’s from famous websites and just building vector versions of them. Again it’s all about just getting it looking right. Seeing them all together in one place makes such a difference.

 

Below is another design I created very quickly. There was a complex mix of vectors for the button which was simple to create because of the enhanced tooling in Design. Blend tooling will never be as expressive as the design tools. Also creating some of the effects in blend would have taken twice as long.

 

 

Below is a sample of a slider I created purely from vectors. The tooling in design made doing this simple, from memory it took around 5 minutes to do. I plan on creating a full set of skins for all the controls with this type of theme.

 

Below is a sample of a store front RIA. All vectored and shows exactly how the application should look. Being able to see the entire RIA like this makes building it in Blend infinitely easier. Don’t take my word for it, try it out for yourself. Start creating your RIA from within “Design” and you’ll see how well it turns out at the end of your “Blending”.

 

Once you have it looking perfect in Design select the vector assets and copy/paste it into Blend. I cannot begin to tell you how amazing this workflow is. I do absolutely everything like this. Copying/Pasting and Slicing between Design and Blend are two skills that ALL designers/developers should have.

Just to reiterate my personal workflow for my RIA’s is:

1. Use Expression Design to make the “design assets/screens” look perfect.

2. Methodically push these assets/screens into Expression Blend via the “cut/paste”, “slicing” and/or “export/importing” features of the 2 products.

One of the most miss-leading myth’s going around these days is that you need to be a designer to be any good with these new Microsoft RIA technologies. That could not be further from the truth! Stick with me and over the next couple of month’s I’ll help you get comfortable with these tools, for now go away and play with Expression Design it honestly is such a great tool!