I’d been holding out on this post in the interest of getting it just right. I think with more time I would add more stuff, but I stumbled across Scott Barnes’ post “I hate it when a designer touches XAML” and I knew that I need to get this posted. Here we have these fantastic tools for integrating the designer more deeply into the workflow and so few people are using it. That’s got to change.
Confession time… I am not, by trade, a designer in the sense that most people use the word… a graphic designer. I try to keep my focus much more on the Usability/UX/Human Computer Interactions/Whatever-The-Cool-Kids-Call-It-These-Days. I do some graphic design if I must, but the fact of the matter is that I’m not really that good at graphic design.
However, I often step in as a go-between for the designer’s comps and the developers code. And one thing that I’m good at is translating comps from Photoshop or Illustrator into XAML for the actual application.
To all designers… I can see why you are disappointed when you see your beautiful designs slaughtered in the translation process… because your designs are beautiful! And with Silverlight and WPF there is absolutely no reason why your designs should not be under your control pretty much all the way through the process. These tips are designed to help ease the transition from comp to user interface.
Pre-Tip: Work in Blend
All of these tips are assuming that designers are building comps with another design tool like Illustrator or Photoshop and then moving the comps into Blend. If you’re not using Blend, you should be. I am not suggesting that you change your design tools or that you design differently. These are just tips for the translation process.
Tip 1: Two layers of semi-transparent gradients is fine. Twelve layers of semi-transparent gradients is not
Whenever you add a transparency layer, you add another run of rendering to all the pixels in that layer. Doing that once or twice is fine… most machines can handle that. But when you have a bunch of them, you’re begging to bring the machine to a crawl. Look at the two gradients below…
The one on the right is a solid background with two transparent gradients (a light one at the top and a dark one on the bottom). The one on the left is a single gradient. The one on the right required three passes to render. The one on the left requires one.
This does not mean that you can never have transparency in your application. But if you can figure out an economy of layers when using transparency, you’ll save yourself from from developers who are willing to make the design trade off to speed up the application.
Tip 2: The Grid layout is your new best friend. Understand it. Use it. Love it.
I once worked with a designer who used Blend and made the most beautiful screens with it. But when it came to implement his designs, the developers ended up ditching most of his work because every element was inside a layout inside a layout inside a layout… etc. This ends up being a huge performance killer because every layout means another set of layout calculations for the layout manager.
Instead, make creative use of the Grid layout. Within the Grid layout, you can create columns and rows with the following options:
- Auto (with Min/Max options) – This column will ask the items inside it how much room they need and will expand or contract to give them exactly the room they need and no more (within the min/max limits).
- Fixed Width/Height (“80”) – A fixed height or width will take exactly that many pixels of space. Easy enough.
- Star (“*”) (with Min/Max options ) – this can be used as a decimal or a percentage… “.8*” or “80*”. It asks the container holding it how much room it has. After the Auto and Fixed columns or rows allocate their needed space, the “*” ones take up all the remaining available space unless hindered by the min/max limits.
A single grid can use any number of rows and columns using any combination of Auto, Fixed and Star. You would be shocked at how flexible this is. You can build whole screens using a single grid. I don’t recommend that, but keep the idea of fewer layouts in mind when you are translating designs. Not every element in the project needs to be inside its own layout.
Tip 3: Use Borders, not Rectangles
Borders play nice with pretty much anything you want to do with the added benefit of being able to put stuff in it. Additionally, they are really simple layouts, so they don’t use much overhead. Take a border and put a Grid into it and you have a visually compelling and flexible combination.
Tip 4: Draw simple vector art inside Blend.
Mike Swanson has a fantastic Adobe Illustrator-to-XAML plug-in. I’ve heard that some people can use Expression Design quite well. But unless your project is extremely visual in an artsy kind of way, you should just draw simple vector art inside Blend. Not only will you save yourself the exporting-importing trouble, your XAML will look nicer and be easier to change later on.
I usually draw with the pen tool 
inside a Grid layout and then use the direct selection tool 
to make the tweaks I need.
Tip 5: (Silverlight Only) Plan on using only a few fonts
Most of my experience with fonts in Silverlight have been somewhat painful. Hopefully we’ll see that change in Silverlight 3, but in the meantime it is something that I’ve seen even experienced developers fight with. Watch this video by Tim Heuer… it will help. () And put this blog on your RSS feed… I’m working on a step-by-step tutorial for this geared at non-developers.
Tip 6: Work in “Split” mode in Blend and goof around with the XAML every now and again
Blend as a drag-and-drop design tool is absurdly powerful. Using Blend, you could build an interactive wireframe prototype in 15 minutes and never touch a line of code.
But as awesome as it is, it will be necessary from time to time to go into the XAML and tweak this or that or comment something out or copy-paste something else. Simply put, understanding XAML will make transitioning your designs a breeze and having Blend in “Split” mode will let you know just what your work in the design space is doing to the XAML. It’s a pretty painless way to start the XAML learning process.
If you’re interested in getting into the XAML a little more, I would recommend using Visual Studio 2008 in tandem with Blend. It offers intellisense (auto-complete for code) and integrates extremely well with Blend.
Hope that helps… If anyone has any questions, feel free to post them here. If you need more in-depth help, ping me at matthias dot shapiro (at) gmail dot com.