electric beach

Christian Schormann

Thursday, March 19, 2009

Blend 3 – An Overview

Today at Mix, Doug Olson and I presented an overview of what the next version of Blend will bring. Blend 3 is going to be a huge and exciting release, and it offers a wide range of powerful tools for both production and design phases of software development.

Blend 3 will make it easier and more cost-effective than ever to create great user experiences for WPF and Silverlight, allowing designers to retain control over their designs throughout the design and development process.

There are 6 major pillars to Blend 3:

Platform support: Silverlight 3

Blend 3 creates and edits Silverlight 3 websites and applications, and gives a great editing experience to many of the new features in SL3. For example, there is support for image effects, perspective 2.5D transforms, and great editing for the new SL data grid.

SketchFlow: Early stage-design and prototyping in Blend 3

I already blogged about SketchFlow yesterday, so I’ll be very brief today – SketchFlow is an exciting new toolset for prototyping, designed to address three pain points in the software design process:

It makes it easier to experiment with ideas for dynamic user interaction. It facilitates communication of design ideas and intent between designers and other stakeholders. And helps you to gather, evaluate and use stakeholder feedback on design ideas.

SketchFlow will help making common design workflows, including responses to RFPs in agency environments significantly more cost effective – so there is immediate business value, not “just” better design.

Better visual design in Blend

We want to make Blend 3 much more approachable for designers. This is a journey that will take more than a single release, but Blend 3 contains a number of big steps:

We added importers for Photoshop and Illustrator. The Photoshop importer preserves layers, and imports vector layers as vectors, and text layers as text, with as much font information intact as possible.

Blend 3 also greatly extends support for state-based control skinning. See this previous post for an introduction to visual state manager. In Blend 3, support for visual states got many major improvements. For one, you can now take any bit of content (for example, straight from the Photoshop importer) and convert it into a control skin, quickly and easily.

We also added many new options to state and transition editing, resulting in much more creative control. I’ll blog about the details of that in a later post.

To make visual designer feel more at home on the art board, we also cleaned up the selection model and drawing performance, made countless improvements to the way how automatic layout is controlled and added a lot to the gradient editing experience.

And for those of my readers that have used Blend before, the yellow insertion point is gone. May it rest in peace.

Interactivity for Designers

Designing for interactive applications and content is all about, well, interactivity. Blend 2 already lets you build quite a bit of interactivity through data binding, triggers (in WPF) and visual states. But there are still many places where you need to fall back to code.

In Blend 3, we introduce Behaviors as a design pattern for interactivity. Behaviors are basically re-usable black boxes of interactivity that can be applied to any element on your art board with drag and drop.

Behaviors let designers apply interactivity in a solid, production quality manner. Behaviors can be used for simple things: Change a state of a control, show a dialog, play a storyboard or change a property. They could also be used to talk to a web service to update data or to validate from entry.

We have written behaviors that create procedural animations. We made an experiment wrapping an open source physics engine in a small set of behaviors that let you make any UI physics-based just with drag and drop.

With behaviors, only your imagination is the limit. 

Blend 3 will ship with a set of generally useful behaviors (not quite sure yet which will be included), but one of the core points of Behaviors is extensibility: Designers or developers can write new behaviors and build their own re-usable vocabulary of interactivity.

Behaviors are very much compatible with skills already known from WPF: The design pattern is a straightforward extension to the Trigger and Action model of WPF.

And yes, through the Behaviors model in Blend 3, the equivalent of triggers and actions (and more!) is available in Silverlight!

Designing with Data

Almost every modern UI is driven by data in some form or other. Data binding and visual styling of “hot” data therefore always has been a strong point in Blend. However, in the design phase of a project, real data in form of a data base or other data source may not be available. And even if there is a data source, it may not be viable for design-time use.

To mitigate this, Blend now lets you create sample data on the fly. You can create a new data set structure from scratch, right in Blend, and have Blend fill it with formatted random values that appear reasonably real. For example, for string columns you can choose if the generated data should look like a name, and email address, a price or a website URL, to just mention a few examples.

You can also import data and generate a design-time sample data source from that.

Additionally, we improved the overall experience of creating data bound lists, data grids, and detail views fairly massively. A lot more scenarios are now handled with simple and straight-forward drag and drop. It is a lot of fun, and really makes designing with data a whole lot easier and a whole lot more real.

Source Code Control

From our enterprise design customers, one of the most frequent feature requests for Blend was source code control . We listened, and provide TFS integration for Blend 3. You can now checkout files right from Blend, and of course check back in, access version history, and do many other things.

Other Additions to the Cast of Characters

Blend 3 has much more to offer than I could mention here. A few things are still worth mentioning:

  • We now have IntelliSense in the XAML editor
  • There is a new code editor built right into Blend
  • We have a new docking system that lets you undock and re-dock all the panes in Blend, and create your own window pane arrangements
  • There is a lot more extensibility for custom control editing, such as art board adorners and so on

More  on all of these at a later time…

Summary

Blend 3 is a major new version of Blend. We hope it will give you new levels of productivity and fun from design to production.

Blend 3 helps designers to stay in control of the design process in deeper ways than ever before. It adds immediate business value and return on investment from concept design to final production.

The building blocks of Blend 3 were designed to provide a whole that, as we hope, you will find to be much more than the sum of its parts. The core features of Blend 3 are synergistic and provide support and added value for each other. For example behaviors are not just valuable in themselves, but they also give a boost to SketchFlow or the VSM editing system. Blend 3 features play well with each other.

You can download an early preview version that contains most of the building blocks I talked about here at www.microsoft.com/expression. We would love to hear your feedback!

posted by cs at 12:01  

12 Comments

  1. [...] Read the overview on Electric Beach. [...]

    Pingback by the chronicles of misterscheff » Blog Archive » An Overview of Microsoft Expression Blend 3 — March 19, 2009 @ 23:55

  2. [...] Blend 3 – An Overview (Christian Schormann) – Link of the Day [...]

    Pingback by Dew Drop - March 20, 2009 | Alvin Ashcraft's Morning Dew — March 20, 2009 @ 04:47

  3. [...] of the Silverlight 3 Beta is a beta of Expression Blend 3. It looks like there are a ton of improvements in this [...]

    Pingback by Mix 09: Microsoft swings for the fences | Programming and Development | TechRepublic.com — March 22, 2009 @ 05:29

  4. Expression Blend 3 looks very promising, but I have one question. I’ve been reading about some of the new features in Visual Studio 2010 and really look forward to having the ability to undock windows and display and work with them on a secondary monitor. Will Blend 3 have this capability?

    Comment by AlBruAn — March 22, 2009 @ 21:56

  5. i downloaded blend 3 preview from http://www.microsoft.com/expression site, i watched your mix video, and i wanted to test sketch flow but i dont know why blend 3 preview does not have that panel, maybe it will only be available in blend 3 ? not in the preview ?
    can u answer me this?
    thanks
    ivana microsoft student partner from argentina

    Comment by ivanatilca — March 23, 2009 @ 03:01

  6. Thanks for your feedback and questions. Some answers:

    Yes, Blend 3 has dockable UI panes that can be placed on a second monitor.

    SketchFlow will be available in a future preview release.

    Regards,
    CS

    Comment by cs — March 23, 2009 @ 08:16

  7. Will the navigation for SketchFlow in WPF or SL work using a common navigate panel? Meaning, if you have a Ribbon menu in WPF, could you have another section ( Frame, etc. ) navigate based on controls in Ribbon? In the session videos, it appeared as the pages flow from one to another instead of using a master navigation panel. Also, what if you navigate to a page that passes a parameter to process and display data. Then you navigate to another page and then navigate back to the previous page ( The one that processed and displayed info ). Will the displayed info still be there or will you need to know how to pass the parameter back to it when navigating back? I noticed on the session video that the drag-drop info ( Added Snowboards ) were missing when navigating back to the page. Understand sessions were brief intro and this has not even reached Beta. Just curious about technology and how it will work. Can’t wait to use. Keep up good work. Thanks.

    Comment by shaggygi — March 23, 2009 @ 11:02

  8. You can use a master component for navigation to other screens. I believe I did show this in a sample in the second session video: http://videos.visitmix.com/MIX09/C01F.

    Regarding your question ablut state preservation: The interaction sample uses a Behavior. Behaviors can be written to preserve state, but the one used in the sample does not do it.

    Comment by cs — March 23, 2009 @ 14:22

  9. Thanks for reply. I recall the master component in your video, but it seems like it was an item that was created and could be reused in multiple pages. I was thinking more of the lines of having one navigation ( Ribbon, menu, etc. ) and one Frame/Page. The navigation button would communicate with the Frame/Page instead of being directly in it.

    ( With buttons for navigation )

    Maybe I’m not understanding the whole concept yet and should wait until Beta is released. Thanks again.

    Comment by shaggygi — March 23, 2009 @ 18:56

  10. [...] Christian Schorman – Blend 3 overview [...]

    Pingback by Blend 3 - User Experience Design — March 24, 2009 @ 02:11

  11. [...] Blend 3 – An Overview [Christian] [...]

    Pingback by Expression Blend and Design : Round-Up of Blog Posts (and other Activities) by the Expression Blend Team! — March 25, 2009 @ 12:35

  12. [...] electric beach Blend 3 An Overview Posted by root 2 hours 23 minutes ago (http://electricbeach.org) Mar 19 2009 i 39 ve been reading about some of the new features in visual studio 2010 and really look forward to having the ivana microsoft student partner from argentina comment by ivanatilca march 23 2009 3 01 am pingback by expression blend and design Discuss  |  Bury |  News | electric beach Blend 3 An Overview [...]

    Pingback by electric beach Blend 3 An Overview | Paid Surveys — June 1, 2009 @ 23:48

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress