Getting Started with WPF and Expression Studio

I’ve just started up with using Expression Studio to build WPF application. The reason for this was quite organic and I thought it would be interesting to chronicle how things have evolved.

I started out using Balsamiq to mock up some screens. This tool is FANTASTIC for quickly pounding out an idea. It gets the point across very nicely and for a VERY reasonable price. After working on screen design and such for a couple weeks, though, I was wanting to satisfy a couple of different issues:

  1. Though it has a large canvas size, there is a limit to how much space you have within Balsamiq. This leads you to create a new diagram that houses your other screens. This leads to the second problem.
  2. When you have multiple diagrams, you lose the ability to easily visualize the navigation from one piece of functionality to another. This could be resolved by putting the images into a really nifty presentation tool like Prezi. This would work quite well… but now I’d have invested $150 CAD ($62 CAD for one year of use of Prezi + $85 CAD for the Balsamiq license). It’s starting to get pricey, but still do-able.

Since the target platform for the application was to be .NET, a mechanism for better porting the time investment into the mock ups into our target platform (WPF) would be advantageous. Also, demonstrating navigation within the application in a fluent manner was increasing in priority. WPF also offers the ability to think of user interfaces in a completely different way than was previously limiting with WinForms, SmartClient, or Web applications. I have been longing to be free from the limitation of building applications that are still constrained by the Windows 3.1-esque user interface for some time.

Balsamiq fell a little short in this area as you are somewhat constrained to using the controls of their library and mashing them up together if you want to demonstrate some out-of-the-box UX thinking. You currently aren’t able to import your own images to be able to put something together in a paint program and include it. These reasons left me searching for more out of my mock-up tool.

I started looking into the tooling within Expression Studio and found SketchFlow. This little gem has the same sketch-like look and feel of Balsamiq that enables users to not get too hung up on the implementation details and opens them up (more than a live mock-up but less than a cocktail napkin) to discussion how THEY want to use the system but with the portability to be able to move things into a more production screen (eliminating some waste), and the ability to live demo navigation. Some additional items that come with the tool are the ability to export the mock-ups into a word document (I don’t find this feature very useful, but more interesting) as well as the ability to have the user interact with the mock-up on their own and have them annotate your mock-ups and send the feedback to you. The comments can then be easily imported back into your project. Now THIS is a fantastic feature that captures communication, eliminates waste and potential loss of communicated intent. The cost is significantly more ($998.95 USD for Expression Studio 3 + Visual Studio Standard or $599.95 USD stand-alone. I already own Visual Studio Professional) but the savings and features made it worthwhile IMO.

There’s a bit more of a learning curve to get used to the Expression Studio interface than with Balsamiq, but the benefits clearly outweighed the draw-backs.

To get started with the tool (and WPF), I started going through the Introduction to Prototyping with SketchFlow Starter Kit. It contains some good samples and videos to help get you started quickly. I also ordered the following books that have yet to be delivered:

I am quite excited to receive those resources and am really looking forward to starting a deep-dive into this technology.


One thought on “Getting Started with WPF and Expression Studio

  1. Thanks Jason. That was pretty nice!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s