Experience Expression Tour Part II: FAQ

  • Article

In my last post, I gave an overview of the tour. In this post, Paul and I will list the frequently asked questions during the tour and provide our answers.

How do the tools in Expression Studio work together?

First of all, there are four tools in Expression Studio: Expression Web, Expression Design, Expression Blend, and Expression Media. Creative professionals can use these tools separately and together as part their workflow. In particular, web and interactive design disciplines share many fundamental qualities, such as visual design, storyboarding/wireframing, typography and fonts, animation, and digital imagery/photography, to a name a few. Expression Studio brings together core workflow tools associated with web and interactive/interface development and design for both standards based websites and Windows client applications

Specifically:

  • Expression Media unifies the asset management process across tools in the Expression Studio, and across designer and developer collaboration since both can use Expression Media as a central view and repository for the overall assets associated with a project.
  • Designers can use Expression Design together with Expression Blend to incorporate visual elements that are exported as XAML(Extensible Application Markup Language) markup, thus preserving the full visual resolution and fidelity throughout the design process.
  • Expression Design can also export images as JPEG, GIF, or PNG files for incorporation with Expression Web for standards-based Web sites.
  • Expression Studio also includes a full copy of Visual Studio 2005 Standard, for greater capability in developing and debugging code for applications designed in Expression Blend. This designer/developer collaboration can occur between individuals on a team or by more technical designers who will appreciate Visual Studio’s advanced development capabilities.
  • Expression Media makes digital asset management easy by enabling creative professionals to keep their focus where it belongs – on being creative.  With drag-and-drop import for more than 100 file types, Expression Media is the perfect choice for centralizing digital assets, including images, video, audio, graphics, fonts, HTML, XML, etc. files created in Expression Studio.

How can Expression Studio support the workflow between designers and developers?

 Expression Blend shares Visual Studio solution and project files which allows easier collaboration between designers and developers who can now have the identical “project view” into the source tree, and can share build process with either designer/developer testing the solution with the familiar F5 keyboard shortcut. XAML code files can be opened and edited in both VS & Expression, and iterated upon in either product without breaking compatibility or compromising the design in the process.

Expression Web and Visual Studio can be used in collaboration by teams developing and designing websites. Expression Web offers an advanced CSS design surface, which can be paired with Visual Studios development, data, and testing capabilities. Websites can be opened and modified by both tools at anytime, with fully standards compatible code in XHTML, CSS, ASP.NET, XSLT, XML standards being generated automatically or by hand.

An example of workflow may look like:

 

The Metaliq Top Banana demo Danny showed during the presentation were created by a team of 2 developers, 1 UI designer/developer, and 1 interaction designer in 3 weeks. Channel 9 has a great video talking about how Designers and Developers worked together on real-world WPF applications.

What is the difference between Silverlight applications and WPF applications?

Silverlight is a web browser plug-in for delivering media and rich interactive applications (RIA) for the web. It runs cross-platform (both Mac and Windows) and cross-browser (IE, Firefox, Safari, and Opera). Silverlight will be used for broad reach interactive media content and browser-based experiences which require cross-platform support and fast and easy deployment.

Windows Presentation Foundation (WPF) is part of .NET Framework 3.0. It is used for building rich immersive applications and experiences that can take full advantage of the Windows platform, including UI, Media, offline communication and Document support. WPF applications can be deployed using ClickOnce or run in IE browser.

Both Silverlight app and WPF app use XAML to mark-up UI. WPF provides even richer user experience than Silverlight applications. For example, WPF applications can utilize 3D acceleration, GPU rendering, and local file manipulation. However, Silverlight runs cross-browser and platform.

What does XAML look like?

Silverlight Pad is a great demo for illustrating XAML. You can see how XAML mark-up complex vector graphics such as the bug and camera examples in the demo. You can see how to using XAML code to create simple animation in the rotating movie clip example. Try to edit the XAML code in the bottom code view and see how the examples change without even compiling the code.

Where can I find the video that illustrated a lot of WPF applications?

The video delivered by Silverlight Streaming service can be viewed here.

How is Silverlight different than Flash?

Many people asked us this question during the tour, which I think is quite natural to ask. Here is how we think:

Some of the scenarios for Flash and Silverlight usage are similar, such as rich media/video within websites, or interactive rich content for e-commerce, e-learning, or advertising. However, Silverlight uses a dramatically different approach for creating and delivering experiences in a way that aligns more with our customers development and deployment needs.

First of all, Silverlight is part of our UX platform, which spans from Windows to the Web, and include emerging surfaces such as the media/living room (Xbox360, Media Center PC), as well as mobile devices. Each of these platforms has shared capabilities and development tooling, but greatly different performance and integration characteristics. Similar to developing Windows based desktop application, Silverlight apps can be developed using Expression Studio and Visual Studio.

Second, as we mentioned in the answer to question 2, designers and developers can work together building Silverlight apps more effectively using the integration between Expression and Visual Studio. The “secret sauce” to the process is XAML which provides the ability for both designers and developers to work on assets with the two tools with little to know re-work as the assets are passed back and forth between the two roles.  The most interesting thing about Designers for SL is that your vector based graphics and layout are immediately “ready” for use by the dev’s and will look exactly the way they were designed in the final product.  Furthermore, you can make changes to the graphics and animations (XAML) after deployment as an afterthought, and not have to recompile. It’s just like changing a font color or image source in HTML today, and refresh the page. (See Silverlight Pad)

Third, the intent of the product is not to replace Flash, but rather provide a choice for designers. First, it enhances the skillsets of designers making them more marketable. Second, it makes design businesses more flexible as they allow greater choice for their clients when implementing a solution. In addition, Silverlight control and interact with Flash controls with JavaScript. Expression tools can work with adobe tools together to create compelling UX as well. For example, in Expression Design, designers can import Adobe Illustrator files and images files from Photoshop into a workspace and then export as XAML.