Designing Compelling Silverlight User Experiences with Expression Studio

Shane MorrisUser Experience EvangelistMicrosoft Australia

Session Code: WEB311

Expression Studio Ecosystem

ExpressionBlend

ExpressionWeb

PhotoShop

Illustrator

Visio...

AfterEffects

FinalCut Pro

Audigy...

DeepZoomComposer

ExpressionMedia

ExpressionBlend

ExpressionWeb

Zam3D

...

ExpressionDesign

ExpressionEncoder

Process – 5 C’s

Don’t start at the end!

Concept

Wireframes1. PowerPoint2. 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

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_VicUC_PeepControl.VS_NSW...

Visual State Visual State if from Victoria(etc. for NSW, Qld, SA, WA, Tas, ACT, NT)

Construction

Content

VideoAudioGraphicsCopy

Composition

Assemble HTMLLoad Assets

Expression Studio Ecosystem

PhotoShop

Illustrator

Visio...

AfterEffects

FinalCut Pro

Audigy...

DeepZoomComposer

ExpressionMedia

ExpressionBlend

ExpressionWeb

Zam3D

...

ExpressionDesign

ExpressionEncoder

ExpressionBlend

ExpressionWeb

Lessons Learnt

WireframingExpression Design does have a role

Comps without layoutBitmap effectsMore complex elementsSlicing

The ContractAgreed NamesNaming Conventions

Related Content - SessionsWEB312Wed 5:30pm

Self-service usability: making it easy for people to help themselvesSusan Wolfe

OFC303Wed 5:30pm

Enhance the SharePoint User Interface with Silverlight 2William Cornwill

WEB???Thu

Silverlight 2 for DevelopersJonas Follesø

DEV350Thu 10:15am

Introducing Silverlight for mobile applicationsAmit Chopra

SVR320Fri 10:15am

Delivering Rich Media on Windows Server 2008Jorke Odolphi

WEB304Fri 10:15am

Web Futures - the next 18 months Panel

TOT344Fri 2:00pm

Implementing RFID with BizTalk server Rahul Garg

Related Content – Hands On LabsOFC303 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 Please complete ancomplete anevaluationevaluation

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