2. Brennon Williams C.T.O. Splendid www.howsplendid.com http://www.brennonwilliams.com brennon.williams@howsplendid.com Expression Blend Design. Develop. Deliver

3. Session Overview What is Expression Blend? Design things User Centered Design Rapid prototyping with SketchFlow WP7 things SketchFlow for WP7 Design Templates for WP7 Q&A

4. What is Expression Blend? Expression Blend is a design and development tool Blend provides a toolset of drag and drop components Blend provides intuitive storyboard and animation features Blend enables the creation, modification and utilisation of resources Blend allows the user to create complex user interface interactions

5. What is Expression Blend? Expression Blend supports the designer/developer workflow Blend simplifies the creation of design time data Blend supports and interacts with Visual Studio Blend provides a simplified XAML and Code editor experience

6. What is Expression Blend? Expression Blend supports many platforms Windows Presentation Foundation (a.k.a. WPF) Silverlight Microsoft Surface V1 & V2 Windows Phone 7 Microsoft DeepZoom And some others yet to come…

7. What is Expression Blend? Expression Blend outputs XAML… FAST! Blend is much faster than hand coding XAML

8. Design is more than pretty colors… Design in Software Development User Experience Device/Environment dependant Brand values and Identity Application of interaction knowledge Testing and refactoring Iteration of concepts and ideas Visualisation and aesthetics Creative solutions to old problems Inspiration and loyalty

9. The importance of good design

10. Inspiration… Data visualisation Mark Coleran Visual Designer Generally recognised as one of the worlds best motion picture visual designers Thinks to watch for Visual signposting Fluid interfaces Use of Fonts, Iconography, Media Playback Mapping, Body Parts and Skeletal Imagery Scenes from The Island

11. A design process for premium experiences User Centered Design The user is at the heart of the experience Personas and Story’s depict the solution Prototype as fast as possible User Test against Personas Iterate the design Retest Document interaction, definitions and test cases for execution validation

12. Example collaboration between design and development

13. Visual Design in Expression Blend Expression Blend Visual Tooling Blend is not a Visual Designers tool Shapes and Vector tooling Simplified Visual Editing Primary file format support Photoshop.PSD Illustrator.AI.SVG format

14. Rapid prototyping with SketchFlow Simple rules to remember This is a demonstration of functionality and not visual styling Assume standard functionality (such as a login box) Add annotations to explain interaction if required This is not boiler plate code or a production solution Dirty hacks are allowed! This should be as fast as possible to get the concept across!

15. Rapid prototyping with SketchFlow Sketches and Wireframe concepts

16. Initial Sketch Image

21. Rapid prototyping with SketchFlow Wireframe concepts Demo with sample data Blend 4 Mockups Library http://goo.gl/sFRzh As fast as possible!

22. Windows Phone 7 design resources Microsoft Windows Phone 7 Resource Page http://goo.gl/EM3hs Photoshop PSD’s http://goo.gl/Udvnu

23. SketchFlow for WP7 Martin Tirion http://goo.gl/Ts4qn

24. Design templates for WP7 Expression Blend Design Templates http://wp7designtemplates.codeplex.com/ Demo Quick build with templates

25. WP7 solutions Visual Studio Emulator Tools Using the Accelerometer Using GPS Emulator Demo Flickr Image Sources

26. Summary The importance of design Don’t get a mullet Gather inspiration Build what your users want, not what you think is cool Rapid Prototyping Fast as possible Get the interaction concept across before you look at visuals and branding Iterate as much as possible on designs

27. Summary Use the resources Don’t re-invent the wheel every time Use Mockups Build with the Design Templates for WP7 Accurate and fast Learn Expression Blend The workflow for developers will improve in coming ecosystem releases Faster than hand coding XAML Have fun!

28. Contact me Books Expression Blend Unleashed (2008 SAMS) Expression Blend 4 Unleashed (2011 SAMS) Contact Details brennon.williams@howsplendid.com Blog www.brennonwilliams.com Site www.expressionblend.com (coming 2011)www.expressionblend.com

29. Q&A

30. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.