Not Just Better, Faster - Expression and Sketchflow

Editor's Notes

• #3: User Experience Evangelist
• #4: Platforms like Silverlight
• #10: What is Expression Blend.Slide highlights 3 key focus areas outlining the purpose of Blend.Some areas you can touch on if you want to go deeper:Unique capabilities for fast, rich, dynamic prototyping, reviewing and feedbackEfficient production toolsCreative Design and UI ElementsVector graphics, layout, animation, media, resourcesIntegration with traditional design workflow: Adobe Photoshop and IllustratorControl skin design AnimationDataData-bound UI, live data design, sample dataInteractivityBehaviors for designer-driven interactivity, extensible interactivityDeveloper IntegrationShared project format with VSSource code control support with TFS
• #12: Today it’s difficult to take an initial idea and rapidly create and iterate on a Prototype without either getting involved in the underlying delivery platforms or delivering via a technology or mechanism, such as pen and paper that allows for zero reuse when it come to taking the ideas into production. SketchFlow enables you to take an idea, turn it into an interactive prototype in a visual way that helps the client understand the concept and provides you a way to leverage the time and effort you put into building the prototype by enabling you to carry forward any components, styles, graphics etc that makes sense when you move to production.Conceptual prototyping:SketchFlow gives you the capability to create the flow of the application UI before you start to design the functionality that will appear on each screen. This enables you to iterate quickly on ideas, produce multiple variations and to be more free thinking in how a user will move through an application as you don’t get caught up in the ‘how should I build this’ instead the question is what would a user of this application find useful. As you build out the flow you can start to decide what functionality should appear on each screen of the application. While still being able to rapidly make changes to the overall flow. Total Flexibility:SketchFlow gives you total flexibility to make your prototypes as real as particular project or client demands. From a UI flow that contains nothing more than sticky notes on each screen identifying roughly what functionality will appear, to a low fidelity interactive prototype to illustrate how the application might function and that uses the built in sketchy styles of SketchFlow … the sketchy style helps the client focus on the functionality of each screen rather than getting caught up in the detail of the UI. Sometimes though a high-fidelity prototype is the only way to sell an idea and of course SketchFlow fully supports this approach as well. In fact one of the most powerful aspects of SketchFlow is that it can support all of these different prototype styles simultaneously within the same prototype. Which means you have total freedom to apply the right amount of detail and depth to the most appropriate areas of your to really help you get your message across and bring your prototype to life.Effective Communication:Often your client might be remote from your work location so once a prototype is ready to be shown being able to to effectively present this to your client is also critical. SketchFlow provides the SketchFlow Player. This is built as part of the prototype and is freely distributable. For Silverlight prototypes the player is built as a Silverlight 3 application which will allow your client to open, view and interact with your prototype. All the client needs is a browser and the Silverlight plug-in. With desktop WPF applications the player is built as a WPF application which can be sent or shared with the cleint for review.The capability for the client to quickly and easily test the prototype really helps bring a concept to life and enables them to understand not only the flow of the application but also compare and contrast different ideas within a prototype and quickly decide on the direction they’d prefer to take.Rapid testing / reviewing:The SketchFlow player also allows the client to fully review and annotate on the prototype. SketchFlow provides a pen and highlighter than can be used to annotate directly on the prototype as well as a text feedback area for each screen. Once the client has complete compiling their feedback they can easily send it back via email or dropping it into a Live Mesh folder and that feedback can be displayed directly on the design surface within Expression Blend. This provides a very strong and rapid feedback loop between the client and development team.In short SketchFlow provides a rich, fast and cost-effective to prototypecomplex, dynamic UX.
• #13: Make complex interactivity – simple to useDuring the prototype stages of a project it has often been difficult for designers to express themselves in a way that would live on beyond the prototype as complex interactivity would often need to be represented by videos produced in applications such as After Effects which essentially offered high production values but zero reuse or would require extensive coding to bring the ideas to life. Behaviors are providing a powerful bridge here… allowing the exploration of different interaction methods and design ideas while having the capability to create these as reuseable components. In fact Behaviors shouldn’t just be considered in this context… Behaviors can actually be used throughout the entire project. If you need to provide a hit counter for a game, don’t just code it… build it as a reusable Behavior… need to an object to follow the mouse cursor… build it as a reusable Behavior! If need to add physics to an object… enable this as a Behavior that can be applied to multiple objects by simply using drag and drop. Behaviors are incredibly flexible and powerful.Talking points: Interactivity can be encapsulated in a Behavior by a developer, then applied to UI elements by a designer, the interactivity can be finessed by the designer using properties that the developer has exposed. These can be changed in the Properties Panel in Expression Blend. Behaviors can be shared across projects. Behaviors enable libraries of interactivity to be built and leveraged by design and development teams. Possible talking point: A business analyst could be apply behaviors from a provided library and experiment with how an application behaves.
• #14: Designing a UI without access to sample data is both time consuming and difficult and to make matters more difficult once data has been imported it’s been hard to design with that data on the design surface. In today’s fast moving interactive world being able to quickly and easily utilize and manipulate design time data enables the rapid exploration of ideas and concepts. Talking points: Blend makes working with design time data easy. Easy to create the data, easy to use the data, easy to customize the data and importantly… easy to style the data.Sample data can be created on the fly using the built in sample XML datasets or imported via data objects. Again you have total flexibility.In the screen shots here you can see how we’ve imported a sample data set, in this case some simply XML. When we dragged this to the design surface Blend automatically created a listbox which was then styled into this unique circular control. Of course under the covers that circular control is still just a list box that has simply had a style applied to it! This ability to quickly restyle components and data is a very powerful aspect of the Silverlight and WPF platforms that is fully leveraged within Blend.
• #15: Visual designers love using Photoshop. Often people assume that the Expression products are trying to get designers to switch from Photoshop to Microsoft based products. This is simply a crazy idea! Rather than try and get people to move from Photoshop we’re instead providing best in class import capabilities, this allows workflows for visual designers to remain the same while providing them a simply way to integrate Photoshop visuals into Silverlight and WPF projects. Additional talking points:Import your Photoshop files at full fidelity directly into Blend.Expression Blend 3 provides you with industry leading Photoshop import.Imported file is editable within Blend, vectors can be edited directly on the design surface. Text is imported as editable text with the same font and size attributes as the original file. At import you have full control over which layers are imported, you can choose which layers to import and any incompatibilities can be resolved by using the merge layer command. A live preview enables you to see changes you are making to the import file immediately.
• #16: Do more in Blend.In earlier versions of Blend you needed to use Visual Studio to add code to your projects, even for something as simple as an event or mouse trigger. Blend 3’s code editor now enables you to reduce the need to switch between Visual Studio and Blend. You can set up your workflow so it makes sense to you.1: Doing the majority of your C# or VB coding in Blend and switching to Visual Studio to debug and deploy.2: Doing less demanding coding in Blend and switching when appropriate.3: Continuing to do all coding in Visual Studio.The choice is yours. You now only need to change tools when you decide!The new code editor complete with XAML intellisense in Blend 3 makes hand coding XAML much simpler and more streamlined than in previous versions.
• #17: When we talk about TFS support in Blend what do we really mean… in this initial integration with TFS we’re providing the key integration Blend users need to be first class citizens of the ALM workflow. TFS support is seamlessly integrated into the Blend Project panel which allows the learning curve to be kept to a minimal for designers and the TFS integration has been designed so it doesn’t interrupt the usual design flow within Blend or between Blend and Visual Studio.
• #18: This slide is simply to show that Blend 3 is a massive release and contains many more features and enhancements that just the headline features.If you want to talk in more depth here are a few notes to help you:Improved Support for VSMSupport for Visual State Manager (VSM) in Expression Blend 3 Preview has been improved with a revised UI for the States Pane, support for inline previews where properties of the state are applied to the artboard but any further changes you make will not be applied to that state, seeing more states for controls independent of whether those states were defined in XAML originally, and displaying a warning indicator when a property has been changed in more than one state group.Support for Importing Photoshop and Adobe Illustrator FilesExpression Blend 3 Preview allows you to import Adobe Photoshop (.PSD) files as well as Adobe Illustrator (.AI) files directly into your projects while retaining layers, shapes, text elements, and more for easy editing inside Blend itself.Docking and Workspace ConfigurationExpression Blend 3 Preview extends the workspace configuration features found in earlier releases by providing full docking support for all panels. You have the ability to customize the Blend user interface to your liking and save this configuration as a preset.Better Support for EasingIn a Silverlight project, keyframes, visual transitions and From/To animations have an EasingFunction property which is used to control animation easing characteristics.Redesigned Asset LibraryThe Asset Library has been redesigned to better support the large number of controls. The Asset Library can now be docked to keep it open for easier access.Extensible Asset LibraryThe Asset Library lets you populate its contents by registering a directory that contains one or more assemblies, display custom icons, and more. You can instantiate controls stored in those known assemblies, and Expression Blend will then add the necessary assembly references to your project.Using the WPF and Silverlight EffectsExpression Blend 3 Preview introduces support for WPF and Silverlight Effects. Open the Asset Panel, select the Effects tab, and drag the effect to the element in the Object Tree or to the artboard. You can modify properties of the Effect in the Properties panel.Support for Silverlight 3 Projection Transform Expression Blend 3 Preview allows you to manipulate an object so that it appears to be positioned in 3D space by creating and editing the Projection transform available in Silverlight 3.Artboard ExtensibilityExpression Blend 3 Preview introduces more refinements to the extensibility APIs for WPF and Silverlight. The extensibility points are compatible with Visual Studio’s Designer, and you also have more flexibility to extend the artboard.Fluid LayoutFluid Layout is a feature whereby instead of layout happening abruptly, the transition between the two layouts is more smooth. For example, with a standard animation that moves vertical alignment from left to right, the element will instantly leap across the screen from left to right. However, with Fluid Layout turned on, the element will glide from being left aligned to being right aligned. To turn Fluid Layout on and off for a state group, use the button immediately to the left of the Add State button in the States Pane. With Fluid Layout turned on, try animating Visibility, Grid.Row/Column, alignments animating Width and Height to or from Auto, and so on. With Fluid Layout on, resizing on the artboard affects layout properties.Gradient ImprovementsIn Expression Blend 3 Preview, we have made using the gradient tool easier to use and more powerful. You can now change the offset values of a gradient directly on the element in the artboard that has a gradient element applied to it. To change a stop position, you just drag on the stop. To add a new stop, hold down the ALT key and click the gradient adorner. You can also quickly redefine the gradient by dragging out a new gradient adorner on the artboard. When you double click on the artboard a color picker appears that allows you to edit the color of the stop. Using the Property panel you can now numerically edit properties for the selected brush.
• #22: Professional code editor speeds developmentIntellisense and color-coding for HTML, CSS, JavaScript, and PHP make your editing and debugging more productive. And real-time standards validation provides instant feedback on standards issues so you can make corrections as you code. Choose any schema you want – HTML, XHTML, Strict/Transitional/Frameset and CSS 1.0, 3.0, or 3.1 - Expression Web 3 will help you build appropriate code with a compatibility checker that highlights non-conforming elements.Preview ASP.NET & PHP pages with the included development server.
• #23: SuperPreview provides cross-browser visual diagnosticsDebug your pages in multiple browsers on the same machine that you use for development, with SuperPreview. SuperPreview is a visual debugging tool that helps you visualize and understand how pages display on multiple browsers, including IE6 - 8 and Firefox. You can even overlay your page on top of your Photoshop comp to verify your coding.
• #24: Snapshot Preview saves debugging timeSnapshot Preview provides a high-fidelity browser preview that updates live as you edit your code, saving you the time and effort of loading the page in a browser for each code change.