Developing For .NET

This is the first in a series of articles intended to introduce Expression Design to fellow Developers.  If you are a professional Designer or Graphic Artist, then I humbly ask that you keep your snickers and chortles to a modest volume, and guffaws are right out.

I’ve had Expression Design for over a year now, and short of a few simple tasks, like cropping an image, I really haven’t spent much time using it.  One reason is that I am not a graphic designer, so I didn’t really understand what I was seeing our how to use most of the tools.  To remedy that, I have been taking a Computer Graphics class, which I have really enjoyed and has taken me a long way down the road of understanding graphic design and graphics software.  (But I am still not a graphic designer.)

Now that the class is drawing to a close (and because I promised the professor I would give a presentation to the class on Expression Studio and software design as a career option), I am ready to start diving a little deeper into Expression Design.  In the class we have learned and used barely scratched the surface of Adobe Illustrator, Adobe Photoshop, and Adobe InDesign: the short experience I have had with these is the only frame of reference I can provide, so take any and all judgements and comparisons with a large grain of sea-salt.

First Impressions

My first impressions are a little tainted because I have used Expression Blend heavily for the last year or so.  This makes the interface for Design a little more intuitive for me than it will someone who is new to Expression Studio.  The Design interface is very similar to Blend, with tools on the left and properties on the right.  If all you have ever used is Visual Studio, then the good news is that the property manager will come to you quickly: select an element and use the property editor on the right hand side of the screen to make changes.  As you might expect, the available properties change based on the type of the selected element.  The bad news is that unlike Visual Studio, you cannot collapse this panel.  You can make it smaller or larger by changing the “Workplace Zoom” (Edit -> Options -> Workspace), but once rendered on the screen you can only make it wider by dragging the splitter.  The good news is that, unless you are working on a severely limited monitor resolution, you really don’t need to change it.  The thing to remember here is that, like Illustrator and Xara Xtreme, Design is a Vector Graphics tool, so you can easily scale your artboard down to a visible size, or up to incredible detail, with no loss of resolution.

NOTE: Design is a Vector Graphics tool, like Illustrator.  I will mention Photoshop below, but really only for UI and tooling preferences, and not as an attempt to equivocate Design with Photoshop.

Things I like

The interface is consistent with Blend.  While Adobe has tried to maintain consistency between its products, I keep finding nagging things between Illustrator and Photoshop that don’t really work the same.  One simple example is Font selection: in Illustrator, if you install a new font it is immediately available to you, but in Photoshop you have to close and reopen your project to see the new font.  This sort of issue isn’t a deal breaker by any means, but it seems that Microsoft has done a better job of maintaining consistency between the two products.

The Color Manager is easy to find (read “unmissable”) and easy to use.  Applying colors to anything is done directly on the main window and the effects are immediately visible – no “preview” checkbox or waiting for rendering.  All of the Adobe products pale in comparison in this area, one that I think is kind of important to Graphic Designers.  In fact, they seem to go out of their way to make coloring difficult.

The Gradient capabilities are slick.  They are part of the above Color Manager, so the same benefits apply.  If you think dealing with Color in Adobe is a pain, try handling gradients!  Both Blend and Design absolutely humiliate Adobe’s products in Color and Gradient management.

Design has a very clean appearance.  The dark meme actually has a purpose: it provides a very nice visual frame for the art board and prevents it from getting washed out.  All of the Adobe products have way too many visible tools, buttons, and options.  The top area constantly changes based on the tool you select, which can be frustrating when you expect to find an option on the screen and can’t. Overall, Adobe products just feel cluttered.

Right-click on the Tool buttons to see the optional selections.  I know it sounds trivial, but in Adobe you have to click and hold to reveal the selection list.  Expression’s method is faster and requires less effort.  You can still press and hold in Expression, but the wait time is much smaller, so it is still better.

Draggable value elements.  You can simply drag any numeric value and drag it left/right, up/down to change it.  And again, the result is immediately shown in the artboard.  And since all the properties are shown right on the main window, there are no secondary pop ups to manage.  Overall, it makes changes much faster and more intuitive, especially for rough work. You’ll probably want to use the keyboard for fine control.

Keyboard shortcuts.  If you use any of these products then you must master keyboard shortcuts.  They save an enormous amount of time and just make your life a lot easier.  I was pleased to find that Microsoft stole borrowed many of the most popular shortcuts from Adobe.  I’ll be introducing the most valuable shortcuts to you in the next article.

Mouse Transforms.  And by this I mean resizing, skewing, rotating, etc.  For anything beyond resizing, Illustrator just feels more cumbersome.  And it’s a lot worse in Photoshop, where you have to turn on the Transform tool, make your changes, and then press Enter to accept the changes.  In Expression, you select the object and then use the mouse to do these actions right on the artboard.

Layers.  I really prefer the way Design handles layers: the manager is simpler and always visible.  Like Illustrator, creating and using Layers in Design is an active choice, and one I whole heartedly recommend (for either product).  Design does offer a few more options for Layer management, but nothing earth shattering.

Things I don’t like

I love every thing!  OK, just kidding: even I’m not that much of a Fanboy … or am I?  I actually did have trouble coming up with stuff I didn’t like.  I know familiarity with Blend has a lot to do with it: if you don’t have that, then you are likely to feel just as confused in Design as you would in Illustrator, I know I was at first.  But even taking that into account, I just find things easier to do and less complicated in Design.  Let me reiterate though that this is no replacement for Photoshop, which is an awesome product.  It would be nice to see Microsoft deliver a Photoshop competitor, but for now I guess they’d rather give Paint a facelift.  I’m sure as I get more familiar with Design I will find stuff to harp on, but for now the list is short.

Illustrator is a very mature product.  There are a great many features and capabilities in Illustrator that are not available in Design.  I won’t list them here or even pretend to understand them all, but I can tell that a seasoned Graphic Artist will probably find some items missing.  Since we are Developers, though, we don’t *really* care that much 😉 .  I’m sure that future releases will continue to add functionality.

When you drag an Image into Design, the artboard zooms in until the new image is full size.  This is not the same behavior as Importing an Image, which leaves the artboard alone and displays the image in its relative size.  I greatly prefer the latter.

I’m sure there are other things, but my limited knowledge of Illustrator is preventing me from really seeing them.  I’d love to hear your thoughts in the comments.

Until next time

With the limited training I’ve had, and the exposure to Blend, I do think I’m ready to start using Design to produce art for my applications.  Complex gradients, irregular shapes, awesome buttons, and pleasing backgrounds here I come!  Join me next time when we’ll start learning how to go about doing something productive in Design.