Designing Compelling Silverlight User Experiences with Expression Studio Shane Morris User Experience Evangelist Microsoft Australia Session Code: WEB311

Expression Studio Ecosystem Expression Blend Expression Web PhotoShop Illustrator Visio... AfterEffects FinalCut Pro Audigy... DeepZoom Composer Expression Media Expression Blend Expression Web Zam3D ... Expression Design Expression Encoder

Process – 5 C’s Don’t start at the end!

Don’t start at the end!

Concept Wireframes 1. PowerPoint 2. Expression Design Graphic Design proceeds... 3. Expression Blend Interaction Design proceeds... Development proceeds...

Wireframes

1. PowerPoint

2. Expression Design

Graphic Design proceeds...

3. Expression Blend

Interaction Design proceeds...

Development proceeds...

Contract Agreed objects and events that form the conduit between front end and back end

Agreed objects and events that form the conduit between front end and back end

Contract Name Type Notes UC_PeepControl User Control Avatar UC_PeepControl.SB_Enter Storyboard Attendee arrival UC_PeepControl.SB_Exit Storyboard Attendee departure CV_Theatre Canvas Boundary for Theatre Scene TBL_Pax TextBlock # Attendees ME_Video Media Element Logos video loop GD_ChartContainer Grid Container for graphs TBL_SponsorType Text Block Type of current sponsor UC_PeepControl.VS_Vic UC_PeepControl.VS_NSW ... Visual State Visual State if from Victoria (etc. for NSW, Qld, SA, WA, Tas, ACT, NT)

Construction

Content Video Audio Graphics Copy

Video

Audio

Graphics

Copy

Composition Assemble HTML Load Assets

Assemble HTML

Load Assets

Expression Studio Ecosystem PhotoShop Illustrator Visio... AfterEffects FinalCut Pro Audigy... DeepZoom Composer Expression Media Expression Blend Expression Web Zam3D ... Expression Design Expression Encoder Expression Blend Expression Web

Lessons Learnt Wireframing Expression Design does have a role Comps without layout Bitmap effects More complex elements Slicing The Contract Agreed Names Naming Conventions

Wireframing

Expression Design does have a role

Comps without layout

Bitmap effects

More complex elements

Slicing

The Contract

Agreed Names

Naming Conventions

Related Content - Sessions WEB312 Wed 5:30pm Self-service usability: making it easy for people to help themselves Susan Wolfe OFC303 Wed 5:30pm Enhance the SharePoint User Interface with Silverlight 2 William Cornwill WEB??? Thu Silverlight 2 for Developers Jonas Follesø DEV350 Thu 10:15am Introducing Silverlight for mobile applications Amit Chopra SVR320 Fri 10:15am Delivering Rich Media on Windows Server 2008 Jorke Odolphi WEB304 Fri 10:15am Web Futures - the next 18 months Panel TOT344 Fri 2:00pm Implementing RFID with BizTalk server Rahul Garg

Related Content – Hands On Labs OFC303 Using Microsoft Silverlight to Enhance the Look and Feel of Microsoft Office SharePoint Server 2007 WUX06 Using the ASP.NET Silverlight Control and Microsoft Silverlight Tools WUX07 Animations in Microsoft Silverlight 2.0 WUX09 Building Reusable Controls with Microsoft Silverlight 2.0 WUX11 Microsoft Silverlight 2.0 Foundations WUX13 Using the ASP.NET MediaPlayer Control WUX16 Communications and Data with Microsoft Silverlight 2.0 WUX17 Creating a Great Looking Windows Presentation Foundation Button with Microsoft Expression Blend and Expression Design

Please complete an evaluation

© 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.