A quick introduction: My name is Tyson, I am an Art Director. I had the pleasure of working with my esteemed colleague, Jamie Kosoy, on the Victoria’s Secret Fashion Show project recently. My design team (Chris Petrillo and Caroline Caine) and I also dove headfirst into Silverlight and I’d like to share some of our observations and insights.

Expression Blend

Our initial thoughts on the Blend interface were fairly positive. It reminded us somewhat of After Effects and it wasn’t a difficult program to pick up if you already are familiar with Flash or After Effects. We did begin to run into some technical issues with it, however. Jamie discovered that it is a pretty “leaky” program pertaining to memory, and this seemed to be causing issues with certain files crashing on machines other than the one they were created on. One of our biggest issues with building in Blend was the lack of guides and guide layers. Usually our process involves bringing in design jpegs as guides for object placement. We did this, as usual, but were not able to set these layers as guides so they would hide during testing and not contribute to file size (this ended up being an entirely different issue). There were also many times when a program-native ruler guide would have been helpful in aligning elements, but these were also absent.

File embedding was both a blessing and curse. On one hand, we could pass files back and forth and never worry about pieces of the project missing. On the other hand, if we did not actively go through and delete all old instances of pngs, jpgs, etc., they would come along for the ride during export, adding extra heft to the file size of our XAP files. Our first instance of the background XAP was over 8 megabytes! Additionally, copying and pasting was problematic because we could copy entire elements, but if we didn’t also copy imagery and any other supplemental files, we would end up with blank elements and broken code.

Timelines and Animation

In case it’s not obvious, at Big Spaceship, we like timelines. We like to tweak keyframes and tweens until our fingers bleed. And one can still do this in Blend, but it uses a different model than Flash and other frame-based animation tools. It is based on actual time; a one second animation in a Blend “storyboard” will last one second in the project. The timeline defaults are not very conducive to detailed animation with the 100% view showing 14 to 20 seconds based on your layout. In the Victoria’s secret project, none of our animations lasts longer than 2 seconds. Additionally, the default snapping is 10 “frames” per second. Changing these defaults every time became tedious.

One of the things that was pretty nice about Blend was it’s handling of animation and easing. The Blend environment (most of the time) previews animation perfectly and smoothly because it IS Silverlight. What you see is what you will get in the final product. The library of easing equations and the customization affordance for said equations was impressive and gave us a lot of flexibility to do 95% of our animation within Blend.

Copying frames from one element to another worked pretty smoothly, although we couldn’t drag-select frames.

Finally, one of the most powerful things we found was the “base” state of an element. Many times throughout the project we found we needed to move or change a single element. The base state allowed us to move the element in one place and have that move propagate across all states. That’s pretty righteous.

Brushes

One of the design teams favorite parts of Blend/Silverlight were the Brushes. This is a somewhat deceiving title for a panel that controlled the appearance of an object. If you haven’t seen the Victoria’s Secret site, there is a lot of gold on it – maybe the most gold you’ve ever seen on a website. We could not have accomplished this as effortlessly without the gradient fill option for text. The beauty was that we could then also animate said gradients.

Another brush that every element possesses is the opacity mask. This can easily be set to a linear or radial gradient, allowing the designer/animator to create some nice gradated wipes and other subtle masking animations. We utilized this technique for a significant portion of the elements on the site like titles and even the main model image on the landing screen.

Typography

Font and type handling was probably the weakest part of Blend/Silverlight in my opinion. Open Type fonts can be used in Silverlight, but when we tried adding our OTF version of Helvetica Neue LT Std, it was not recognized. Only when we converted that font family to True Type were we able to use it within Blend. When activating the font, there were multiple prompts to overwrite Arial, which seemed fine since we were not using Arial in the project. What we did not realize until late in the project is that Arial is automatically embedded in each project file adding nearly a megabyte to the file size!

Additionally, the default unit for type is set on points, which do not match up equally with the pixel size. This threw us for a loop at the beginning of the project before we found the preference option for this default.

Beyond activating fonts and file-handling, we also ran into issues in the display of the typography. Silverlight seems to add its own style of anti-aliasing that actually makes the font appear much bolder than it actually is. To combat this, anything elements we had set in Bold in the design files, we set in Medium in Blend. We were fortunate that Helvetica Neue had many weights because I could see this becoming a big problem with font families that only have a bold and normal weight. Another thing we noted through trial and error is that fonts look better at some sizes than they do in others. We actually went through and changed all of our 16px type to 15px near the end of the project because it looked significantly more well-formed.

Video

From what we could tell, Silverlight handles video very easily and is able to keep it looking smooth even on less awesome machines although we did see some funky performance issues at times. It’s easy to get small file sizes that still look decent with the WMV format, exported from the Expression Encoder. Our biggest use of video in this project, besides the externally loaded videos, was the background. One of the visual themes of the project was defocused glittering lights. At first, we attempted to do this using .png’s moving and changing alpha in order to save the processor. This was a misstep. The processor could not handle the .png animation as well as we guessed. So we stepped back and decided to try using videos for each different background, as well as videos for transitions in and out. At the time, this also was a shot in the dark we were not sure how Silverlight would handle video, let alone multiple videos playing at the same time on top of timeline animation. Thankfully, this was a successful attempt and we moved forward. There was one caveat – we needed to set the video to “resource” in order to get the kind of control over the video we wanted. This setting is still a bit confusing for us.

3D Projection

We found 3D(2.5D) projection to be an extremely useful tool in this project. Nearly every screen contains elements that use some amount of 3D projection. It actually became a major theme of the site when we realized how easily we could implement it. The most obvious use of this aspect was the Highlights section “carousel” – a navigation we wanted to include from the beginning of the project. There was a slight learning curve while we discovered how to exaggerate the perspective view, but for the most part, this was a very good “bang-for-your-buck” feature.

Final Thoughts

Silverlight is a formidable option for delivering rich web content. There are some obvious flaws still, but for a program in its earlier stages, It has some pretty muscular legs. I would love to see some more exploration into making this a more powerful design tool with options for transparent video and blending modes, a much stronger typography engine, and options for guides and guide layers. To piggyback a bit on Jamie’s post, being able to build on OS X is critical. As designers, we spend a majority of our time in the content creation tools (Photoshop, Illustrator, and After Effects) and then use programs like Blend and Flash to deliver that content. If we are continually switching between Mac and Virtual PC or dedicated PC, we are losing time that we could be spending making each project as rich as it can be.