Design stunning user experience with expression blend
-
Upload
kosala-nuwan-perera -
Category
Technology
-
view
108 -
download
1
description
Transcript of Design stunning user experience with expression blend
![Page 1: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/1.jpg)
Designing Stunning UX with Expression BlendTech Talk Series
Oshadha@oshadhaj
Kosala Nuwan Perera@kosalanuwan
![Page 2: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/2.jpg)
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
![Page 3: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/3.jpg)
How Blend looks like?
![Page 4: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/4.jpg)
How Blend looks like?
![Page 5: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/5.jpg)
How Blend looks like?
![Page 6: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/6.jpg)
How Blend looks like?
![Page 7: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/7.jpg)
What’s in Blend?
Silverlight and WPFWindows Phones (with SP1)Metro Style Applications (in future)SketchFlowGraphics and LayoutControlsViews and ViewModel supportData and resourcesAnimationProjects
![Page 8: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/8.jpg)
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…
![Page 9: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/9.jpg)
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.
![Page 10: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/10.jpg)
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.
![Page 11: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/11.jpg)
Design & Anime Workspace
1) Menu2) Tools panel3) Objects and timeline
4) Artboard5) Projects, properties, and
resource panel6) Results panel
![Page 12: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/12.jpg)
Tools Panel
1) Path tools2) Shape tools3) Layout panels4) Text controls5) Common controls6) Results panel
![Page 13: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/13.jpg)
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
![Page 14: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/14.jpg)
Templates and Styles Demo!
![Page 15: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/15.jpg)
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.
![Page 16: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/16.jpg)
Power of Data Binding
WPF provides a simple and powerful way to Auto-Update data between the Business Model and the User Interface.
![Page 17: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/17.jpg)
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.
![Page 18: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/18.jpg)
Data Binding Demo!
![Page 19: Design stunning user experience with expression blend](https://reader035.fdocuments.us/reader035/viewer/2022062511/54c785e34a7959575f8b4582/html5/thumbnails/19.jpg)
We believe :
WITH EXPRESSION BLEND, YOU CAN BIND ALMOST EVERYTHING!
- Blend Team