- The designer mocks up a user interface using various design tools. The interface looks amazing, modern, eye-catching, etc.
- The designer hands the developer screenshots and images of the wonderful interface.
- The developer looks at the images and realizes either there is not enough time to recreate the interface or there is no way that interface is even remotely possible.
- The developer throws the images in the trash and builds a boring yet functional user interface.
- The designer sees the developer's abomination of a user interface and resolves to never work with the developer again.
That scenario may be slightly exaggerated, but it is not far from reality. As a developer, I focus on creating an application that meets the functional expectations of the customer. Creating an application that looks "cool" is a luxury and usually not achievable within the time constraints. Building fancy custom controls or purchasing third-party controls are not always viable options.
Part of the problem in creating these "cool" applications is that the definition of the user interface is embedded in code. Microsoft solved this limitation with WPF and (more importantly for user interfaces) XAML. XAML allows for the separation of the visual aspect of an application from the underlying code. While XAML documents are nice, they do not, by themselves, help designers in creating slick interfaces. Designers, at least the ones I know, prefer to have actual design tools. They do not want to use Visual Studio or Notepad to edit XAML files in plain text.
Microsoft has not always been the greatest software vendor when it comes to design tools. Understanding that designers were an untapped market, Microsoft released Expression Studio 1.0 last year. Expression Studio consists of the following applications:
- Expression Web: a web design tool
- Expression Media: a tool for managing assets and media
- Expression Encoder: a video editor and encoder
- Expression Design: a graphic design tool
- Expression Blend: an interactive design tool
With Expression Design, designers finally have a true graphic design product from Microsoft (although, it is currently only available as part of the entire Expression Studio package). Design supports much of the functionality that designers expect from a vector-based tool. One important feature of Design is the ability to export to XAML. Now, designers can create cool graphics, export them to XAML, and expect the graphics to appear the same in an application.
Expression Design is an excellent tool for designers, but it still does not completely bridge the gap between designers and developers. Expression Blend aims to close that gap. Blend works on XAML files, making it a perfect fit for editing those cool graphics that the designer exported from Expression Design. Blend provides a WYSIWYG XAML editor, allowing the user to modify the XAML directly or use the designer. Blend allows users to do more than just select objects or zoom in and out. Blend also gives users the ability to draw paths and shapes. More importantly, Blend provides the ability to add layout panels and controls, including buttons, checkboxes, textboxes, and much more. Designers finally have a design tool where they can create actual user interfaces. By exposing the capabilities of WPF available in XAML, Expression Blend allows designers to build cutting-edge applications. Blend supports creating triggers and storyboards to add animation and interaction to applications. Designers can, for example, change a button's color when a user hovers over it, or fade controls in and out. Controls can be restyled and given totally unique looks. Who says that a checkbox always has to be a simple square with a checkmark? The possibilities are only limited by the designer's imagination.
But, how does Expression Blend help the developers? The projects and solutions that Blend creates and uses are, in fact, the same projects and solutions that a developer would create in Visual Studio. A WPF project created in Visual Studio can be opened in Expression Blend and vice versa. By using the same files, designers can focus on the user interface in Expression Blend while the developers focus on coding in Visual Studio. Expression Blend shares other similarities with Visual Studio. Blend contains a Project window that is like Visual Studio's Solution Explorer. Blend also has a Properties window that can set a variety of properties on the currently selected control, just like Visual Studio. Blend's Property window also displays events that are supported by the control. By default, naming an event handler in Expression Blend automatically creates the method in the corresponding code-behind file and then opens the file in Visual Studio. These similarities aid developers by making the transition back and forth between Expression Blend and Visual Studio a seamless one. One other area where Expression Blend helps both developers and designers is data binding. Blend supports creating data binding against XML data and CLR objects. Developers can create business objects in Visual Studio that designers can bind to in Expression Blend. Being able to set bindings in Blend gives further control to designers in how an application's data is displayed to the end user.
Knowing whether Expression Blend is the right tool for you depends on your needs. Developers and designers should consider it another tool in the toolbox. If you are looking to simply create graphics with XAML, Expression Design is probably the better choice; although some graphics work is possible, Blend does not provide the full graphic capabilities of Design. If you are interested in hard coding XAML using Intellisense, using Visual Studio would be wise; Blend does not currently support Intellisense in XAML view. If you want to design WPF or Silverlight applications using a drag-and-drop editor, Expression Blend is the best option; Visual Studio's WYSIWYG designer does not support drag-and-drop.
Microsoft intends to release new versions of Expression Blend when new versions of WPF and Silverlight are released. The following table identifies the .NET frameworks supported, the Visual Studio version of projects created in Blend, and Silverlight versions supported.
| Blend Version | .NET Frameworks | Visual Studio | Silverlight |
|---|---|---|---|
| 1.0 | 3.0 | 2005 | N/A |
| 2.0 | 3.0, 3.5 | 2008 | 1.0 |
| 2.5 Preview | 3.0, 3.5 | 2008 | 1.0, 2.0 |
2 comments:
I think the concept behind Blend is an excellent one, but I don't think they pulled it off quite yet. Maybe on the developer side, it's getting better, but from my vantage point as a UX designer, it's not working.
I worked as a designer for Microsoft for many years (working on System Center products over the past few years), and I worked and continue to work closely(in a different venue) with developers.
I'm not designing wow-factor web sites with custom controls, I'm designing what I hope are usable application interactions. I work with devs to make sure that what I designing can be developed.
Working in a corporate environment I think you have to learn that there are time and cost restraints, not to even mention usability concerns (when users have to figure out what a custom control is supposed to do), so it's a give and take, rather than "here's my design,develop it."
What I've found is that a good UI dev will create my designs with a good deal of satisfation in having done so, as part of a team to great a quality, usable product. Currently, my attempt at using Blend, rather than Fireworks or Photoshop, stems from my wanting to remove a step in the process -- the interpretation of my design from a written visual spec, which is time consuming.
What I was hoping for, when I heard about Blend, was a mixture of Visio and Visual Studio. I was hoping to be able to just drag and drop from a pallete of common UI elements, which would attach code (XAML), and allow me to hand it off for the dev to bind data to and incorporate into the application.
Instead, I got a complex heirarchy of palletes, laid out for a developer's mind (yes, not all of us see the the world in the same way), and as a designer, it's not making a whole lot of sense.
I will continue to try and figure it out (I'm using the June 3.5 beta), but so far it's not looking good. I have used Photoshop and related tools regularly since the mid-80s and they all have followed a similar model. It would be really cool if there was a tool that worked like one of our standard design tools, but that would interface with Visual Studio. I won't hold my breath.
Gary,
Thanks for your comments from a UX designer's point of view. When discussing a product like Blend, it helps to hear from developers and designers alike.
You mentioned wanting a standard design tool that interfaces with Visual Studio. You are correct that Blend is not a full design tool; it is intended for designing user interfaces. For full graphic design capabilities, you do need to use something like Expression Design, Photoshop, Illustrator, Fireworks, etc. Design does support exporting to XAML, and I also know that exporters exist for the other design tools I mentioned.
After thinking about it, I understand what you mean by Blend being laid out for a developer's mind. Developers are used to creating UIs in Visual Studio, and some similarities exist in Blend. I would add, though, that Blend provides a much richer environment for UI design than Visual Studio ever did.
I can easily see some developers and designers avoiding Blend because it is too much of a design or development environment. Using Blend requires adaptation from both designers and developers. I agree with you that Blend definitely has room for improvement, but I think it is a step in the right direction. We never had a tool like this from Microsoft until now.
Post a Comment