About Expression Blend
Microsoft Expression Blend is a visual tool for designing and prototyping desktop and web applications. You build an application by drawing shapes, drawing controls such as buttons and list boxes, making the pieces of your application respond to mouse clicks and other user input, and styling everything to look uniquely your own.
The BeeHive sample, showing the drawing of an object that will respond to a collision with another object
.png "Cc296376.6232ba4d-5aa0-4185-b1cf-fe9fbfe3ed8e(en-us,Expression.30).png")
You can also insert images, audio and video clips, and custom controls from SDK libraries or third parties. What you see on the design surface in Expression Blend is what your users will see when they run your application.
The Zune3D sample, showing images and objects rotated in a 3D projection transformation
.png "Cc296376.37f9786c-c8bc-43c3-8789-2e5654c6ae90(en-us,Expression.30).png")
With SketchFlow, a new feature set in Expression Blend, you can create prototypes that are functioning applications instead of a series of static images that must be clicked through to get a sense of your final application.
The development of the PCGaming sample, showing the progression of a document
.png "Cc296376.7dc469b2-4ab8-4d56-96a6-f30c33370916(en-us,Expression.30).png")
In Expression Blend, you work on real pieces of a working application, but you can still draw and style everything as easily as you can in other illustration software. When you want to draw something that represents an interactive control, you can actually select and draw a functioning control (such as a button or a list box) and then style it.
The ColorSwatchSL sample, showing two custom styles (ItemContainerStyle, then ItemsPanel) being applied to a ListBox control to display items fanned in a circle
.png "Cc296376.16d8c960-f49f-46fd-9993-a0d06b4e268a(en-us,Expression.30).png")
Behind the scenes, the functionality of your application is provided by two powerful technologies: Microsoft Silverlight and Windows Presentation Foundation (WPF). With Expression Blend, you can create websites and applications based on Silverlight 3, and desktop applications based on WPF 3.5 with Service Pack 1 (SP1).
Tip
The samples that come with Expression Blend can be opened from the Help menu by clicking Welcome Screen, clicking the Samples tab, and then clicking a sample name from the list. To build and run a sample, press F5.
How does Expression Blend work?
In Expression Blend, you design your application visually, drawing shapes, paths, and controls on the artboard, and then modifying their appearance and behavior. You can import images, video, and sound. In Windows-based applications, you can also import and change 3D objects.
You can create storyboards that animate the visual or audio elements of your design, and optionally trigger those storyboards when users interact with your application. When you work on Windows-based or Silverlight-based applications, you can redesign the templates that are applied to basic controls so that your application looks and behaves uniquely.
When you work on your application, you can update your project at any time with code-behind files or custom control files that programmers are working on. When you use Expression Blend, designers and programmers can work on the same project at the same time without getting in each other's way.
What other tools work with Expression Blend?
You can import graphics and Extensible Application Markup Language (XAML) resources that are generated by Microsoft Expression Design into your Expression Blend project. You can also import Silverlight media projects that were created in Microsoft Expression Encoder, to add new features or visual elements to the project, or to modify the media player template that can be reused in Expression Encoder.
In Microsoft Expression Web, you can import Silverlight websites and compiled Silverlight application files into an existing or new project, and then publish your work.
Microsoft Visual Studio 2008 works seamlessly with Expression Blend to stay in sync when you are simultaneously modifying files in Visual Studio 2008 and Expression Blend. In the Projects panel in Expression Blend, you can open individual code-behind files or your whole project in Visual Studio 2008. You can also use the deployment tools of Visual Studio 2008 to deploy your applications.
What does Expression Blend produce?
Expression Blend produces Windows Presentation Foundation (WPF) applications, Silverlight 3 websites (.xap and supporting files), and Silverlight 3 user controls. Your visual design is represented by XAML. Just as HTML is the markup language for web applications, XAML is the markup language for WPF.
For more information about XAML and WPF, see Working with XAML and Learning and community resources.
What features come with Expression Blend?
Expression Blend includes the following:
A full suite of vector drawing tools, which includes text and three-dimensional (3D) tools.
SketchFlow, a new feature set for creating prototypes that are real WPF or Silverlight applications.
An easy-to-use, modern visual interface with dockable panels and on-object shortcut menus.
Real-time animation.
3D and media support for enhancing user experiences.
Advanced, flexible, and reusable customization and skinning options for a variety of common controls.
Powerful integration points for data sources and external resources.
Real-time design and markup views.
Artwork import capabilities from Expression Design.
Site import capabilities from Expression Encoder.
Interoperability with Visual Studio 2008 to help designers and developers work together more closely and efficiently as a team.
Target application types
Expression Blend is optimized to produce the following types of applications:
Productivity applications Applications that improve productivity and efficiency for a broader customer base, in addition to line-of-business applications such as Microsoft Office.
Consumer applications Applications such as media players, security tools, and desktop gadgets.
Games Simple desktop or online games intended for entertainment.
Kiosks Applications intended to run on kiosks that users can interact with to receive information, review product directories, check in at an airport, and so on.
IT pro utilities Tools for small jobs, such as bug tracking, that may be unique to a specific company or customer need.
Best practices
Some design ideas are good just because they improve usability. Here are some common ways to improve usability with Expression Blend and the Microsoft .NET Framework 3.5:
Model the real world You can use custom visuals and interactions to make specific controls look and behave like their real-world counterparts. This technique is best used when users are familiar with the real-world object, and the real-world approach is the best, most efficient way to perform the task. For example, simple utilities like calculators just work better when they model their real-world counterparts.
Show instead of explain You can use animations and transitions to show relationships, causes, and effects. This technique is best used to provide information that would otherwise require text to explain what users might miss. For example, a book for young children could animate page turns to show how the controls work.
Improve affordance Affordance is a property of an object that suggests how the object is used (instead of using a label to explain it). You can use custom control visuals and animations to suggest how nonstandard controls are used.
Use natural mapping Natural mapping is a clear relationship between what the user wants to do and how to do it. You can use custom appearances and interactions to create natural mappings when standard common controls won't do.
Reduce required knowledge You can use custom interactions to limit the number of ways to perform an operation and the amount of knowledge required to perform a task.
Improve feedback You can use custom control visuals and animations to give feedback that shows when the user is doing something correctly or incorrectly, or to show progress. For example, the Address bar in Internet Explorer in Windows Vista shows the progress of loading the page in the background.
Make objects easier to interact with A model of human movement known as Fitts' law states that the effort required to click a target is proportional to its distance and inversely proportional to its size. For example, you can use animations to make objects larger when the pointer is nearby and smaller when the pointer is far away. Doing so makes the objects easier to click. It also lets you use screen space more efficiently, by typically making objects smaller.
Focus You can use rich layout and custom visuals to emphasize screen elements that are required for the task, and to de-emphasize secondary elements.
Note
If you are designing for Windows Vista, consider adhering to the Windows Vista User Experience Guidelines to establish a high-quality, consistent baseline for all Windows Vista–based applications, regardless of how they are implemented.