Considering the Designer/Developer Workflow

The ability for XAML–based controls to be extensively styled and templated enables you to radically customize their appearance and permits the creation of visually pleasing applications. User interfaces can be designed that engage users and draw them into the application. However, simply using the Silverlight controls out of the box, on the default white canvas, can lead to a rather plain application, often followed by badly implemented attempts to make it more interesting by developers who may not have the skills to do so effectively. Unfortunately, this process results in many unsightly user interfaces. Silverlight projects can, therefore, greatly benefit from having a designer on board to create an attractive user interface.

Including designers as a part of the development process has, therefore, been a focus for Microsoft. That said, Visual Studio is not an application suited for use by designers, so Microsoft created the Expression Suite targeted toward designers' needs. From the Expression Suite, the Expression Blend and Expression Design tools are those that will be most useful to graphic designers when working on Silverlight projects.

Expression Blend is intended for designing XAML–based user interfaces for Silverlight and WPF. This includes extensive support for laying out controls, styling and templating them, and creating and applying animations to elements of the user interface. With Visual Studio 2010's new Silverlight designer, we now have a drag-and-drop design surface that we can view and interact with at design time, a feature not available in Visual Studio 2008. Therefore, developers who worked with XAML in addition to code now are less able to rely on Expression Blend than they may have previously. That said, Expression Blend still offers many design-related features that Visual Studio does not (without modifying the XAML directly, which can often be complex and inefficient). These features include

• Animations (including transition animations) can be designed for and applied to user interface elements. Animations can involve a lot of XAML, which would have to be hard-coded in Visual Studio. Not only does Expression Blend provide a friendly user interface for creating animations, but it also allows you preview the animation at design time without needing to compile and run your application first.
• Control templating is vastly easier in Expression Blend. Expression Blend also makes it much easier to create control templates for your own custom controls (discussed in Chapter 12).
• Sample data enables you to populate your user interface with data at design time, so you can see how the interface will look when you run your application.

These are just some of the areas in which Expression Blend provides guidance and makes those tasks much easier to implement. Therefore, for any nontrivial user interface design, it's generally recommended that you include Expression Blend as one of your tools.

Just as Visual Studio 2010 has some design-related features, Expression Blend has some code-related features too. Expression Blend can compile and run projects, and you can also modify code. However, Expression Blend's code-related features are as minimal as Visual Studio's design features. There are just enough code-related features in Expression Blend to do basic tasks but not enough for someone to solely use Expression Blend to create a Silverlight application in an efficient manner.

Microsoft has designed the Visual Studio and Expression Blend tools to enable developers and designers to work alongside each other on the same project in harmony. The two complement each other. Designers can work on the visual aspects of the application; developers work on the code aspects. This approach can be even more effective when using the Model-View-ViewModel (MVVM) design pattern discussed in Chapter 13, as it promotes a clear separation of the presentation of a view and its corresponding logic. This separation makes it much easier to enable both a designer and a developer to work on the same part of the project at the same time, with reduced numbers of collisions between them.

Expression Design is another tool for graphics designers focused toward working with vector graphics. Expression Blend has some support for working with vector graphics, but Expression Design is more targeted in that direction, and Expression Blend is more targeted toward designing user interfaces. Therefore, you could break up the graphics designer role further to a user interface designer, who would use Expression Blend, and a graphics designer, who would use Expression Design. However, these roles often blend into a single graphics designer role in practice.

Another role that is starting to become more popular in software projects is the user experience designer. A user experience designer typically takes the functional requirements of the software and creates a design for how the user will interact with the software that implements those requirements in the most efficient and user-friendly manner.

User experience design faces many misconceptions, and many people confuse it with the role of making the application attractive, believing that designing how users interact with the application is the role of the graphics designer. However, these should be treated as two completely separate skill sets: a user experience designer will determine the flow of the application based on the functional requirements, whereas a graphics designer will take this flow and implement it as an attractive user interface.

Another common misconception is that the graphic design or styling of the application should be one of the first tasks undertaken in the project. In fact, user experience design should be the main focus early on, with the styling performed later in the project. Support for the eventual styling should, of course, be included as a part of the user interface development process, but the interaction aspects are far more important to do up front. For this purpose, Microsoft added SketchFlow to Expression Blend. User experience designers can use SketchFlow to map the flow and rough layout of the application in order to generate prototypes.

As a summary, Visual Studio is targeted at developers; Expression Blend and Expression Design are targeted at user interface and graphics designers, and SketchFlow is targeted toward user experience designers.

Since this book is primarily targeted for developers, we are focusing primarily on what can be done in Visual Studio. Therefore, aspects such as how to use the Expression tools and how to create animations (which really requires Expression Blend to implement efficiently) will not be covered here.