If you think GOOD Design is EXPENSIVE, you should look at the COST of BAD Design!

1. Designing Stunning UX with
Expression Blend
Tech Talk Series
Oshadha
@oshadhaj
Kosala Nuwan Perera
@kosalanuwan

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

3. How Blend looks like?

4. How Blend looks like?

5. How Blend looks like?

6. How Blend looks like?

7. What’s in Blend?
Silverlight and WPF
Windows Phones (with SP1)
Metro Style Applications (in future)
SketchFlow
Graphics and Layout
Controls
Views and ViewModel support
Data and resources
Animation
Projects

8. 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…

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

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

11. Design & Anime Workspace
1) Menu 4) Artboard
2) Tools panel 5) Projects, properties, and
3) Objects and timeline resource panel
6) Results panel

12. Tools Panel
1) Path tools
2) Shape tools
3) Layout panels
4) Text controls
5) Common controls
6) Results panel

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

14. Templates and Styles Demo!

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

16. Power of Data Binding
WPF provides a simple and
powerful way to Auto-Update
data between the Business
Model and the User Interface.

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

18. Data Binding Demo!

19. We believe :
WITH EXPRESSION
BLEND, YOU CAN BIND
ALMOST EVERYTHING!
- Blend Team

20. Follow me!
t: @kosalanuwan
w: kosalanuwan.tumblr.com
e: kpe@exilesoft.com