brennon williams c.t.o. splendid expression blend design. develop
DESCRIPTION
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&ATRANSCRIPT
Brennon WilliamsC.T.O. Splendidwww.howsplendid.com
http://www.brennonwilliams.com
Expression BlendDesign. Develop. Deliver
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
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
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
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…
What is Expression Blend?Expression Blend outputs XAML… FAST!
• Blend is much faster than hand coding XAML
Design is more than prettycolors…
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
The importance of gooddesign
Inspiration…Data visualisation
• Mark Coleran• Visual Designer• Generally recognised as one of the worlds best motion picture
visual designersThinks to watch for
• Visual signposting• Fluid interfaces• Use of Fonts, Iconography, Media Playback• Mapping, Body Parts and Skeletal Imagery• Scenes from The Island
A design process for premium experiences
User Centered Design
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
Example collaboration between design and development
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
Rapid prototyping withSketchFlow
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!
Rapid prototyping withSketchFlow
Sketches and Wireframe concepts
Initial Sketch Image
Rapid prototyping withSketchFlow
Wireframe concepts
• Demo with sample data
• Blend 4 Mockups Library• http://goo.gl/sFRzh
• As fast as possible!
Windows Phone 7 designresources
• Microsoft Windows Phone 7 Resource Page• http://goo.gl/EM3hs
• Photoshop PSD’s• http://goo.gl/Udvnu
Design templatesfor WP7Expression Blend Design Templates• http
://wp7designtemplates.codeplex.com/
• Demo• Quick build with templates
WP7 solutionsVisual Studio Emulator Tools
• Using the Accelerometer• Using GPS Emulator
• Demo• Flickr Image Sources
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
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!
Contact me
• Books• Expression Blend Unleashed (2008 SAMS)• Expression Blend 4 Unleashed (2011 SAMS)
• Contact Details• [email protected]
• Blog• www.brennonwilliams.com
• Site• www.expressionblend.com (coming 2011)
Q&A
© 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.