Information for designers and interactive developers - Issue 1 - February 2008
home  |  articles  |  register for the newsletter  |  Issue 2  |  Issue 3  |  Issue 4  |  Issue 5  |  Issue 6
The Designer Role - Part 1
As the desktop becomes much richer with the introduction of Windows Presentation Foundation and the Expression family of products, the role of the designer becomes an integral part of the project. This article discusses some main concepts of how a designer fits into this new age of software and development and what they can do to integrate themselves into the team easily.

Introduction
Adoption of Windows Presentation Foundation (or WPF) is increasing almost exponentially in the world of software development. WPF allows developers to create sophisticated user experiences for their software like never before. However, as they delve deeper into WPF and start using it in earnest on a real project, the role of a dedicated designer becomes a mandatory requirement for the team.

A designer with the knowledge of Microsoft Expression Blend and creating good UI (User Interface) and UX (User eXperience) is a very valuable thing. If the designer has knowledge of XAML, or the eXtensible Application Markup Language that powers WPF and Blend, that is an invaluable thing.

The key to working in tandem with a developer - whether it is a team of people or just an individual - is to understand software. It is not necessary that you should know the coding language or how to program something, but rather the basic concepts of how the developers will take your user interface created in Blend and work with it. Generally, it takes a bit of time and experience to completely understand these concepts, but we'll take a quick look at some of the most common ones in this article and hopefully it will give you a head start!

Planning Stage
During the initial planning stage, it is essential that the designer be included in the discussions about the UX that will be built. If the designer is given the power to start with UX first, then a developer is mandatory in the planning stage.

Both the designer and the developer will have some specific requirements that the other side may find hard to fulfill or sometimes would be just plain impossible to do. Sometimes, the designer may create a special control or set of controls on the Window and the developers may have something else planned for it in their code. Other times, a developer may want a specific feature or need a special interactive control on the interface which may not be designable. Such things seem trivial, but in the long run, they save everyone a lot of time and headaches. It is very helpful for everyone involved if such items or features are identified before any actual work begins.

Designer and Developer Integration Techniques
A proper method for integration of the designer in the project lifecycle (as the developers call it) is yet to emerge. In the meantime, these are the techniques you can expect.

The Designer Prerogative
In this technique, the designer is given basic sketches or documented plans on what the application will have and what screens or dialogs are required. Often they might be screenshots of a previous version of the application. The designer creates the entire UX in Blend while the developers either wait or create their code separately. The coding process begins once the designer hands over the fully designed UX project.

The designer gets more freedom in this technique without restricting the developer.

The Developer Prerogative
The second technique is the exact opposite of the first one. The developers create the entire application including the UX (you can expect them to do this in Visual Studio, instead of Blend) and then hand off the XAML files to the designer to enhance. After the designer completes his or her work, the XAML code is reintegrated into the developers' code.

The designer gets very little freedom in this method, as he or she can only enhance what exists, rather than create something entirely new. However, thanks to Styles and Templates (as we will see later in this article) you can still be extremely creative.

Skinning Only
Sometimes the developers want only a skin or custom theme for their application. In such a scenario, the developers themselves design the UI. The designer separately develops a skin, stores it in a XAML ResourceDictionary and sends only that one file to the developer. On importing that XAML file, the whole application that the developers built will be instantly skinned.

Unique and Back-and-Forth
There are lots of unique techniques that people develop themselves. In most of them the XAML files for the UX will go back and forth between the designer and developer. Often, after the completion of either of the previous two techniques, if changes or additional work is required on the UX side, you can expect this third technique to be used.

All these techniques have their own pros and cons. You can easily change techniques depending on the project's specifications and your own preferences. It is very important for the designer to know these techniques, because more often than not, the developer will ask the designer: "So how will we go around doing the project?" They're still very new to this!

Managing Assets
No matter which technique you use, it is of utmost importance that the designer-created assets be stored and managed properly. In the following we will see how to do just this, and the advantages we get because of it.

These assets could include colors, brushes (Gradients, Textures, etc. are all called Brushes in XAML), custom Styles, and Templates among others.

In this sample scenario, the Designer Prerogative technique will be used. The developer has given you the freedom to start the UX design, but has also said that they will require changes afterwards once they finish working on the UX you design.

Let's create a sample asset - a custom button based on a graphic - and see how we can manage it.
  • In your Expression Blend project, import your custom graphic (Project Menu > Add Existing Item, or Ctrl+I). This can be either something you designed in Expression Design and exported it to XAML or an image, like a PNG file.
  • Open a Window or Page file in the design view. In the Project Tab, in the Files pane, right-click your imported graphic and select INSERT. View details
  • Your custom graphic will now be inserted into the design view. Now we will make it into a button. Go to Tools Menu > Make Button. View details
  • You will see the Create Style Resource dialog. Give a name to your custom button in the Name textbox. Optionally, if you want all buttons in this application to look like the custom graphic, select "Apply to All" instead. View details
  • Now we will select the "Scope" of the custom button. Scope is a developer term that refers to where a specific item is available. Our options are Application (the button would be available throughout the project), This Document (the button would be available only in that specific screen/window), or ResourceDictionary (the button would be available throughout the application or a specific scope defined by the developer later on). We want to store this in a ResourceDictionary. However, this option is disabled since we don't have a ResourceDictionary. Click the NEW button next to the option.
  • You will see the Add New Item dialog (you can also add a ResourceDictionary via File > New Item). Enter a filename and click OK. You will now be able to select the ResourceDictionary option and even select which ResourceDictionary to define the button in (if you have multiple ResourceDictionaries). Click OK.
  • You will now see the graphic you imported has been transformed into a Button object. View details
Let's assume that the entire project has now been completed and sent for the developer to work on. After a few weeks they would like you to change something in the button - the background color for example. However, they can't stop work while you do this. This is where a ResourceDictionary comes in handy.

While you sent the entire project folder to the developer, they need to send you back only one XAML file - the ResourceDictionary. You can overwrite the ResourceDictionary in the initial version of project you had created, or start a new project and add the ResourceDictionary to it (Project > Add Existing Item).

The entire contents of a ResourceDictionary are available via the Resources tab in Blend. In the screenshot below, you can see the buttonStyle1 we created in our ResourceDictionary. Simply right-click it and select Edit. You will instantly see the Design view of the button and edit it any way you like.


Once you're done, just save your work and send the ResourceDictionary file back to the developers. All they need to do is overwrite the file they already had in their project and they will see the new changes instantly!

ResourceDictionary in Action
If you want to see a real example of a ResourceDictionary, start a new project and open the Asset Library dialog (the chevron at the end of the toolbox), select the Controls tab, and click Simple Styles in the list on the left. You will see a large list of available controls on the right side. Select any of these controls and create it on a Window or Page. Blend will automatically add a new ResourceDictionary called SimpleStyles.xaml that is included with Blend. You can explore this ResourceDictionary through the Resources tab like we did with our custom button. Drag any item from the Resources tab and on to your design area to create it.


You will notice that SimpleStyles uses a predefined set of brushes (also available in the Resources tab under SimpleStyles.xaml) in all their controls. This way, if you want to change the look of all the controls, you need to edit only one brush and the change will be applied everywhere. Try it. It is highly recommended that you follow this same technique in any skins or custom styles you create.

Experiment with ResourceDictionaries and you will easily see the great possibilities it presents you with. Advanced designers or those keen on learning how XAML works may want to see the actual XAML code of SimpleStyles.xaml. Simply double-click the file in the Project tab, and switch to the XAML tab. It is a great source of examples for Styles, Templates, and custom theming.

Conclusion
We've only scratched the surface of designer-developer collaboration! It is up to the designer to usher in the next generation of rich interactive applications and change the way we look at software!

If you are interested in learning more about how developers work and even want to add your own C# or VB code to your Blend projects, you can easily download a free copy of Visual Studio Express Edition (C# or VB).
MIX essentials
Save the date! MIX Essentials is coming to Belgium on the 24th of April 2008. Get the very best of MIX (sold out) in a 1-day 'MIX Essentials' conference with great local & international professional speakers. And a special guest keynote by Steve Ballmer, CEO of Microsoft Corporation. Registration and detailed info in the next edition of this newsletter!
MSDN Designer Academic Alliance
The Designer Academic Alliance is the recent addition to the MSDN Academic Alliance program which is the easiest and most inexpensive way for students and faculty to get the latest Microsoft software they need for teaching and research purposes.
Lynda.com online training
From understanding the concept of smart web design, to creating, editing, and maintaining web site, instructor Joe Marini, Group Product Manager at Microsoft, gives his insider tips for real-world web site design using Expression Web.
Microsoft