Saving time: UX Prototyping in Expression Blend

Author: Dax Pandhi - founder of Nukeation Studios
Blog: http://blog.nukeation.com

Expression Newsletter, subscribe now to get yours.

Summary

Prototyping a User Experience or User Interface has been a laborious process, but with Expression Blend you can prototype right in the production environment, saving time while creating a more efficient and realistic prototype.

There are a few fixed patterns that most designers follow when creating a new interface for a software application or website. Start sketching on paper or whiteboards, create a solid visual concept drawing in a paint program, and then either slice it off as bitmaps or some other exported format, or rebuild it from scratch in the final application. In this instance, that application would be Expression Blend where you create the rich user experience (UX) for the software. Sometimes this process changes a bit – designers start sketching directly in the paint program, for example. But essentially it remains the same.

A major drawback to this method has always been that it requires a lot of work. By its very nature, this process takes a lot of time and manual conversion. Design programs – whether vector or bitmap – use a very different layer management system than Blend and Windows Presentation Foundation (WPF) or Silverlight. So even if you export XAML using built-in functionality (like in Expression Design) or using vector export plugins, it still requires manual work to have it work properly in Blend. If things go wrong somewhere, you have to restart the entire process again.

So it is time to explore new workflows for designing and prototyping a complete theme or UX in Blend. It’s really simple: design everything in Blend itself! We have been using this process to create themes for both WPF and Silverlight, and the results have been remarkable. This new workflow has allowed us to create a fully working theme in less than 5 hours!

In the following sections we will explore why we started designing in Blend, the fantastic results it gives, and we will walk through a simple project to see how it is exactly done.

Simplicity is the Key to Robust Prototyping

When you are creating a theme, you can use some really fancy tools, shapes, and textures, but for maximum usability you are always restricted to three things: rectangles, colors, and text. If you think about it, you really don’t need anything more.

When you use a high end paint program or vector illustration software, you may end up overcomplicating things. For example, you can create a button that looks like glass with a glowing center as a vector illustration. Recreating those effects may take a large number of layers/objects in Blend. When you have a lot of objects working together in a theme element, the end user on a low-end computer may suffer!

In web terms, it would be like loading a 1900k animated GIF without transparency. It may work, but it’s not a good idea!

In Blend, you have all the tools you really need for prototyping. This image shows the Blend toolbar and it shows everything you need for creating, modifying, and organizing. By restricting yourself to these tools you are always sure to create something that will work perfectly in XAML because you are creating it all in XAML itself.

Outside of Blend, it is near impossible to find organization and design tools like Border, StackPanel, and so on. By using these controls, you are essentially creating the final product itself. But this time it is in the initial design process!

And that is the biggest advantage: when you design something in Blend, there is XAML code being written for you in the background. Converting a design into a template becomes as easy as cut-and-paste. Your prototype design can be made into a working model in a few minutes.

Designing in Blend

Let’s recreate a theme like I just created a little while ago for an actual project. The client wanted to see a quick prototype of the theme before they would allow further production. Creating an entire theme would make us run out of space in this article, so let’s just theme a Button. The process is the same with any other control, so it will explain all you need.

Start with a new project. If you already have a project for this application, then open that and add a new Window (or Page for Silverlight). We will use that as a “sketch book”. The advantages of this will be explained shortly.

In your new Window or Page, start by creating a Border. You can use a Rectangle, but a Border is better because it is a container control and can hold a TextBlock (or a ContentPresenter in an actual ControlTemplate) and you don’t have to worry about centering it.

We now have two borders, the second one nested inside the first one. The first serves as the Root gradient, and the second as the glass Shine. Now I need a “glow” layer that will activate when the mouse hovers over the button. But I need it to be nested directly into the Root border. Thanks to Blend, instead of moving things up and down in the Z-order, or reorganizing anything, I just right-click the Shine border, select Group Into > Border, and a new border is made “around” the Shine border for me.

Now, we add a semi-transparent radial gradient to the new Glow border and we have our MouseOver effect!

All we have to do now before we move forward is add a TextBlock for the text. Add a TextBlock control to the last Border control and set its Horizontal and Vertical position to Center.

What we have just created is what I like to call the “base asset”. We will expand the Button style from this. But before we do that, let’s make our work easier by creating Global Brushes.

Blend allows you to create a Brush resource that can be reused across controls and shapes. There are two major advantages to this:

1.       Specifying the same gradient in multiple places adds unnecessary code to the XAML file, and therefore gives that much more to process when the application is running.

2.       Modifying a brush resource changes the look of every control that uses it. You will see the advantage of this shortly.

Select the Root border object. In this project, I created a custom gradient Background and BorderBrush.

In the Appearance section of the Property panel, select the Root border’s Background brush. Under the Brush editor, select the “Convert Brush to Resource” button.

Enter a meaningful name like NormalBackgroundBrush. In the “Define in” option, select Application or ResourceDictionary. Either of these options can be used to have this resource shared across Windows and even the entire application. To read more about the advantages of this, see the Designer Role Part II.

Repeat the same for BorderBrush, and the other Border’s brushes.

You can now see these brushes under the App.xaml (or the ResourceDictionary) in the Resources Tab.

Let’s move on to the next step.

Duplicate the Root border and place a copy next to the original. Repeat once more. These two copies will be modified to show the “Hover” and “Pressed” states.

You might be thinking that we already created the Glow layer in the first one, so how will this help? It’s easy – in a real ControlTemplate, you don’t add or remove new layers or objects between states but modify their appearance and properties. We will do the same with these duplicates. In a logical hierarchy sense, all three copies will remain exactly the same.

Go to original copy, select the Glow border, and select “No Brush” for its Background property.

Next, do the same for the second copy that shows us the “Pressed” state. Then go to the Root border (which should be automatically renamed to something like Root_Copy1), select the green dot menu next to the Background property and select Convert to Local Value.

Blend will now move to the Gradient Editor. The Brush resource “NormalBackgroundBrush” we were using is now converted to an editable local version that will not affect the other controls that use it. Now let’s modify it to show a “Pressed” state.

Once you have edited the gradient, use Convert Brush to Resource and name it “PressedBackgroundBrush”.

Your three buttons should now look something like this. Now we have all three states. You can go for more states if you want, such as Focused, disabled, etc. You can take a screenshot of this and send it to the client for approval. It’s a mockup, but it’s a functional mockup.

Prototype to Style

Now you have the approval and want to convert your design into an actual Style/Template. All of your elements are ready; you just need to define the states. Since the Brushes that define the states are ready as well, you have very little left to do.

Start by creating a button somewhere on the Window. Right-click the Button and select Edit Control Parts (Template) > Create Empty.

In the Create Resource dialog, select “Apply to all”. Select Application or a ResourceDictionary in the Define In section. If you remember, we stored all our Brushes similarly. This allows you to remove one step of copying brushes and color resources into different files, since they are globally accessible.

You now have an empty template to work in. Go back to the Window, select the original button design (Root) and copy it. Go to the empty template again and paste it there.

By default, Blend will have created Height and Width properties. Reset those by clicking the Set to Auto button next to the Height and Width properties in the Property panel. Do this for all elements that were copied.

Delete the TextBlock, and replace it with a ContentPresenter from the Toolbox Asset Library. Center it just like you did the TextBlock before.

Click the Advanced Property Options (small square) next to the Content property, and select TemplateBinding > Content.

In the Triggers panel add a Property Trigger for the property IsMouseOver = True.

In the Background property for the Glow object, switch to the Brush Resources tab and select the GlowBrush.

Add another Property Trigger, this time for IsPressed = True. Change the Root object’s background property to the PressedBackgroundBrush.

And last of all, hit F5. Yes, you’re done! Run the project now and you will see your new Button has acquired the look of your prototype design and is a fully working style!

Before we end, let me show you another big advantage of global brushes. Let’s imagine that the client suddenly comes back – whether it is during the prototype design or somewhere in the middle of the actual project – and says “I don’t like the black look, I want it a bit bluer in hue.”

In any other application, you would have to modify every object manually. In Blend, you just go to the Resources tab, open up the NormalBackgroundBrush gradient, modify the values a bit and the new color is propagated to the entire theme!

Conclusion

Directly prototyping in Blend saves you time, gives you better efficiency while designing, and creates a more robust end result. You will never lose visual feel like you sometimes do when switching between an illustration or paint program and Blend, and the client will never have to wonder why the end result is somewhat different from concept drawings you showed them.

Dax Pandhi is the founder of Nukeation Studios, an award winning studio dedicated to bridging the gap between design and technology, and trying to make User Experiences previously thought of as sci-fi as an everyday reality. He has been working in the UX industry for over a decade and with WPF/Silverlight since almost their conception. He specializes in themed user experience and has created the Reuxables Themes for WPF and Silverlight.

Dax is the first Expression Blend MVP. You can reach him on his blog at http://blog.nukeation.com