September 10th, 2009
Saving time.
One of the hardest bits for us internally has been switching over to thinking in XAML terms. And not just on the programming side, though that’s been it’s own fun game of “oh, so that’s why it’s like that.”
In the world of web development, bitmaps are the de-facto product. It doesn’t matter how you compose something, how many filters, masks and effects you add to it, or even how the add them, so long as the end result is a shiny graphic that can be outputted to a nice PNG.
But XAML wants you to think in vectors. Yes, a bitmap will do in a pinch, but the amount of tweak-ability you get from having a path is just amazing. Not to mention that “we all know that” fact of vectors being scalable, which is what we’ve found XAML is all about.
The first few shots at doing interface work were a horror show for me. Rob would finish up a mockup, and I’d have to grind backward and rebuild everything from scratch. Or AIM him in the dead of night and demand he do it. Which he obviously wasn’t happy about.
Switching to Illustrator as our default composition tool saved us quite a few headaches. With vectors from the start, the basic elements could easily be imported into Blend.
But, it’s not quite good enough.
By default, Blend just imports everything as Paths, a very basic representation of a vector. It works, but for many elements, especially things like buttons or background elements, what we really want is a Border, or a Rect. Worse, since everything Blend imports is a Path, just reading the XAML becomes a chore (hence why I make Rob label things for me).
And let’s not forget that, once I start editing the XAML file, should I need to reimport a specific element, I have to round-trip back to Illustrator, create a new file, copy the new element into the document, go back to Blend, and then import that document and go through the whole clean-up procedure.
So even with vectors from the start, I’m still spending time rebuilding things.
My solution? Instead of going straight from Illustrator into Blend, I go into Fireworks first.
Yes, that Fireworks. The one no one uses.
Infragistics has built a fantastic Fireworks to XAML export plugin for Fireworks CS3 and CS4 that is the bee’s knees.
It handles things like converting rectangle shapes directly to borders, handles tiling patterns a bit better than the native import, and it supports selective copying to the pasteboard.
Its wealth of options just trumps what Blend does on it’s own.
Plus, since it’s Mac-compatible, I can export out the XAML into a text file, open it in TextMate on my Mac, and do basic clean-up before I pump it into Blend or Visual Studio.
Everything little that saves my time upfront, means more time for tweaking later. Which is exactly what we want.