Designing Stunning UX with Expression BlendTech Talk Series

Oshadha@oshadhaj

Kosala Nuwan Perera@kosalanuwan

We believe this applies to all disciplines:

IF YOU THINK GOOD DESIGN IS EXPENSIVE, YOU SHOULD LOOK AT THE COST OF BAD DESIGN

- Mervin Silva

How Blend looks like?

How Blend looks like?

How Blend looks like?

How Blend looks like?

What’s in Blend?

Silverlight and WPFWindows Phones (with SP1)Metro Style Applications (in future)SketchFlowGraphics and LayoutControlsViews and ViewModel supportData and resourcesAnimationProjects

Apps we can design

Windows Phone applications designed to run on Windows Phone.

Games (desktop or online) intended for entertainment.

Consumer applications such as media players, security tools, gadgets.

Productivity applications that improve productivity and efficiency for a broader customer base, in addition to line-of-business apps such as MS Office.

And More such as Kiosks, IT pro utilities…

Zammel, WPF, and Code-behind

XAML (Zammel); Extensible Application Markup Language.Part of WPF.

WPF; Deals with visual presentation of Windows-based and Web browser-based client apps.Uses XAML to construct STUNNING user interfaces, instead of programming language.

Code-behind; underlying code for XAML document.

Other Tools work with Blend?

Microsoft Expression Design;Import graphics as XAML.

Microsoft Expression Encoder;Import Silverlight media projects.

Microsoft Visual Studio 2010;Work with code-behind, deploy apps and so on.

Design & Anime Workspace

1) Menu2) Tools panel3) Objects and timeline

4) Artboard5) Projects, properties, and

resource panel6) Results panel

Tools Panel

1) Path tools2) Shape tools3) Layout panels4) Text controls5) Common controls6) Results panel

Control templates and styles

Controls in WPF are separated into logic, that defines the States, Events, and Properties and Template. Defines the Visual Appearance of the control.Wire up between Logic and Template is done via Data Binding

Templates and Styles Demo!

Best practices (Very Important)

Avoid Fixed Positions; Use the Alignment properties in combination with Margin to position elements in a panel.

Avoid Fixed Sizes; Set the Width and Height of elements to Auto whenever possible.

Vector Graphics; Don't abuse the canvas panel to layout elements. Use it only for vector graphics.

Dialog Buttons; Use a StackPanel to layout buttons of a dialog.

Data Entry Forms; Use a GridPanel. Create a Auto sized column for the labels and a Star sized column for the TextBoxes.

Power of Data Binding

WPF provides a simple and powerful way to Auto-Update data between the Business Model and the User Interface.

Ways of Data Binding

One way (Default); Automatically update the Target.

Two way; Auto update Target and vise versa.

One way to Source; Reverse of One way, updates the Source.

One Time; Set the value to the Target when app is initialized.

Data Binding Demo!

We believe :

WITH EXPRESSION BLEND, YOU CAN BIND ALMOST EVERYTHING!

- Blend Team

Follow me!

t: @kosalanuwanw: kosalanuwan.tumblr.come: kpe@exilesoft.com