Michael KoesterDesigner Marketing Manager

The World of Expression

Agenda

• Microsoft User Experience technologies & tools:• The Microsoft UX platform• Designer – Developer workflow• Microsoft Expression Toolset for Designers

• Demo: Build a „real“ application:• Create the visual design and UI• Add some data• Build functionality for data filtering• Add interaction, fit and finish

• Wrap-Up, Q&A

Introducing: The Agency

A Project Briefing

Monday, 9:00 AM, The Agency, Meeting Room

Client:Client:Museum of Antiques

The Project:The Project:

We need an application that will run

on the information kiosks in the

museum, displaying the museum

catalog. The application will be used

by our visitors to get more

information on the exhibition, so it

needs to be easy to use and look

good! Later, we might want to reuse

this application and publish it to our

web site. Also, we might want to use

audio and video at a later stage ...

UX Richness (Features) >

Pla

tform

Reach

>

Microsoft UX Technologies

ASP.NET 2.0(HTML)

Win32

Direct 3D v9

ASP.NETAJAX

(DHTML)

WPF

Silverlight 2SL 1.0

Console;-)

Direct 3Dv10

Designers & Developers: better togetherThe Designer role:

Today: Designer creates static UI concepts that have no form or functional correlation to development or presentation technology that will be used to deliver the content/application.

The Developer role:Today: Developer evaluates UI and considers development approach, inevitably encounters project/time scoping issues, and re-design is necessary.

Expression = Better designer-developer workflow.

Designer-Developer Experience

Designers & Developers: Speak the same language

Designers design Developers add business logic

Designers & Developers: Speak different languages

XAML Declarative Programming

• Extensible Application Markup Language – XAML• UI is defined in XAML (text format, XML)• XAML markup and code are peers in

functionality and performance.• XAML markup can contain code and can be

compiled for execution.• Easy for tools to consume/generate,

enables interop between design and developer tools.

• Expression offers a full toolset for XAML.

<Button Width="100px"> OK <Button.Background> HorizontalGradient White LtBlue </Button.Background></Button>

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = new Length(100);

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New SolidColorBrush(Colors.LightBlue)b1.Width = New Length(100)

Brainstorming!

• Application will run on Windows OS machines• WPF desktop application• Screen size is 1024x768 pixels• Window size is 800x600• Dynamic XML data• Data filtering• Transparent/shadows• Rounded corners• Displays text & images• Optional: Web site re-use

The Tools

Expression Blend (WPF, Silverlight 1.0, Silverlight 2)

Expression Design

Visual Studio

Microsoft Expression

Expression 1.0

Supports WPF

Expression (Studio) 2

Supports WPF and Silverlight 1.0Trial version available for downloadOn Sale Now!

Expression Blend 2.5

Supports WPF, SL 1.0 and SL 2Beta available for downloadRelease 2009

Expression DesignExpression Blend-Visual Studio 2008

Demo

Wrap Up

• What you have seen today are basic concepts of both WPF and Silverlight application development:• XAML/Designer-Developer Workflow• Data Templates/Control Templates

• Try it! Download the trial version of Expression:• http://www.microsoft.com/expression• Also download Expression Blend 2.5 Preview!

• Get the ArtViewer application Hands-On lab here:• http://koestie.wordpress.com

• Visit the Expression community for more samples:• http://expression.microsoft.com

Questions?