Expression Studio Overview

Expression Studio opens up a new world of creative possibility. Understand how its design tools can help make your vision real.


Fun and games at work… why not? Spend your day creating a video player, building a cool new application, or even a game and you are well on your way into the exciting new world of interactive and web design. With Microsoft Expression Studio you can get there faster by taking advantage of all your talents.

If you’ve never dabbled with interactive design, you can now confidently dip your toes into waters once foreign to you. Perhaps you are an Adobe Photoshop or Illustrator expert, but don’t know a thing about coding – well, that no longer needs to stop you from creating interface designs for applications, because Expression Studio lets you extend your skills, and bring new life to your once static designs.

The left-brain and right-brain ways of thinking come together with Expression Studio, where designers and developers collaborate to create great interactive applications.

Expression Studio lets designers work in a rich visual environment, importing images and artwork from other programs like Photoshop and Illustrator, including layers, while developers can use code to create and modify controls and make connections to back-end data or services in a .NET environment.

Expression Studio includes a complete set of tools:

Expression Blend
Use Expression Blend to plan and prototype your projects, including SketchFlow, a workspace included with Expression Blend. Then use the intuitive Expression Blend workspaces to produce your working WPF or Silverlight applications.

Expression Web
Build standards-based websites that include exciting rich Internet applications created using Expression Studio.

Expression Design
Build visual assets here. Expression Design is a drawing tool similar to Adobe Illustrator, but writes XAML, the code used to communicate user interface elements.

Expression Encoder
Edit and prepare video for your online interactive applications here.

Read on to discover how these tools offer the opportunity to create rich interactive user experiences from start to finish:

Step 1: Come up with the idea, build a Prototype
It is no surprise that good solutions start with lots of ideas that are developed into a well-thought-out solution. SketchFlow is where this happens; it’s a part of Expression Blend and is where you can start early design concepts by drawing buttons, shapes, and text. This is where you also can decide how the application will flow from one screen or page to another.

Using SketchStyles is like working with a pencil and paper, so you can design without the distractions of worrying about colors or the final look and feel of your application. SketchStyles allows you to focus on what’s important at this stage: the user experience.

SketchFlow is the starting point for creating a fully functional application prototype. Using the SketchFlow player you can collect feedback from clients or stakeholders and see input displayed directly on the design surface within Expression Blend. Once you have nailed down your prototype you can quickly create detailed project documentation for your prototypes.

Step 2: Turn your ideas into Reality
Once you nail down your ideas, continue the design process in Expression Blend, where objects from Adobe Photoshop, Illustrator, Expression Design, and even video or audio from Expression Encoder can be imported and visually integrated into an intuitive workspace for your application. You can even continue to create new visual assets using graphics tools found in Expression Blend.

In Expression Blend, both designers and developers can add interactivity, without writing code. You can easily take your interactive objects and save them as reusable elements, so that cool button you made can easily be used in 10 different places by simply dragging and dropping it into your workspace - without writing additional code. If you are a coder, you will be happy to know that Expression Blend integrates with Visual Studio, or that you can write and edit code directly in Blend using the integrated code editor. Expression Blend includes a feature that developers have come to rely on, Intellisense. Intellisense provides you with hints to help you with the coding portion of XAML, C# or VB code.

Adding video
With the clean user interface found in Expression Encoder, getting video into your rich interactive applications is easier than ever. Using Expression Encoder you can encode WMV and MP4 videos as well as export videos to Smooth Streaming format. The Smooth Streaming Format allows users to enjoy smart streaming that adapts to a viewer’s Internet connection speed. In Encoder, you can add simple edits, captions, metadata, and more to your video. Once you are finished with your edits, you can publish your video to a range of pre-built templates, or customize a template to match specific branding or style requirements.

Step 3: Deliver your creation
So now you have an interactive application…what do you do with it? Use Expression Web to create your website and import Silverlight, Flash, video, and even native Photoshop files – including those with layers. Of course you can import other standard file formats, whether images or text files, as you use Expression Web to bring all of your content together and put it online. Expression Web offers powerful CSS Standards-based website creation, and also includes capabilities that make it simple to organize and debug your sites. Just like Expression Blend, your split personality of designer and coder can thrive in the Expression Web workspace. You can use the same tool for both visual design and coding, so your designs can supported by underlying technologies such as PHP, JavaScript, XML/XSLT, and ASP.NET. And when you’re done, use comprehensive site uploading and management features found in Expression Web to post and maintain your site.

Now that you’ve discovered that Expression Studio includes the tools you need to bring your ideas to reality, get started creating interactive applications and great websites by downloading the free trial at www.microsoft.com/expression. For great training, visit the Expression Community site at http://expression.microsoft.com.