Designing Stunning UX withExpression BlendTech Talk SeriesOshadha@oshadhajKosala Nuwan Perera@kosalanuwan
We believe this applies to all disciplines:IF YOU THINK GOODDESIGN ISEXPENSIVE, YOU SHOULDLOOK AT THE COST OFBAD DESIGN   ...
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 Lay...
Apps we can designWindows Phone applications designed to run on Windows Phone.Games (desktop or online) intended for enter...
Zammel, WPF, and Code-behindXAML (Zammel); Extensible Application Markup Language.Part of WPF.WPF; Deals with visual prese...
Other Tools work with Blend?Microsoft Expression Design;Import graphics as XAML.Microsoft Expression Encoder;Import Silver...
Design & Anime Workspace1) Menu                   4) Artboard2) Tools panel            5) Projects, properties, and3) Obje...
Tools Panel      1)   Path tools      2)   Shape tools      3)   Layout panels      4)   Text controls      5)   Common co...
Control templates and stylesControls in WPF are separated into logic, that defines theStates, Events, and Properties and T...
Templates and Styles Demo!
Best practices (Very Important)Avoid Fixed Positions; Use the Alignment properties in combinationwith Margin to position e...
Power of Data Binding          WPF provides a simple and          powerful way to Auto-Update          data between the Bu...
Ways of Data BindingOne way (Default); Automatically update the Target.Two way; Auto update Target and vise versa.One way ...
Data Binding Demo!
We believe :WITH EXPRESSIONBLEND, YOU CAN BINDALMOST EVERYTHING!               - Blend Team
Follow me!t: @kosalanuwanw: kosalanuwan.tumblr.come: kpe@exilesoft.com
Upcoming SlideShare
Loading in …5
×

Design stunning user experience with expression blend

1,513 views
1,338 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,513
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design stunning user experience with expression blend

  1. 1. Designing Stunning UX withExpression BlendTech Talk SeriesOshadha@oshadhajKosala Nuwan Perera@kosalanuwan
  2. 2. We believe this applies to all disciplines:IF YOU THINK GOODDESIGN ISEXPENSIVE, YOU SHOULDLOOK AT THE COST OFBAD DESIGN - Mervin Silva
  3. 3. How Blend looks like?
  4. 4. How Blend looks like?
  5. 5. How Blend looks like?
  6. 6. How Blend looks like?
  7. 7. What’s in Blend?Silverlight and WPFWindows Phones (with SP1)Metro Style Applications (in future)SketchFlowGraphics and LayoutControlsViews and ViewModel supportData and resourcesAnimationProjects
  8. 8. Apps we can designWindows 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 abroader customer base, in addition to line-of-business apps such as MSOffice.And More such as Kiosks, IT pro utilities…
  9. 9. Zammel, WPF, and Code-behindXAML (Zammel); Extensible Application Markup Language.Part of WPF.WPF; Deals with visual presentation of Windows-based and Webbrowser-based client apps.Uses XAML to construct STUNNING user interfaces, instead ofprogramming language.Code-behind; underlying code for XAML document.
  10. 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. 11. Design & Anime Workspace1) Menu 4) Artboard2) Tools panel 5) Projects, properties, and3) Objects and timeline resource panel 6) Results panel
  12. 12. Tools Panel 1) Path tools 2) Shape tools 3) Layout panels 4) Text controls 5) Common controls 6) Results panel
  13. 13. Control templates and stylesControls in WPF are separated into logic, that defines theStates, Events, and Properties and Template.Defines the Visual Appearance of the control.Wire up between Logic and Template is done via Data Binding
  14. 14. Templates and Styles Demo!
  15. 15. Best practices (Very Important)Avoid Fixed Positions; Use the Alignment properties in combinationwith Margin to position elements in a panel.Avoid Fixed Sizes; Set the Width and Height of elementsto Auto whenever possible.Vector Graphics; Dont abuse the canvas panel to layout elements. Useit 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 thelabels and a Star sized column for the TextBoxes.
  16. 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. 17. Ways of Data BindingOne 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. 18. Data Binding Demo!
  19. 19. We believe :WITH EXPRESSIONBLEND, YOU CAN BINDALMOST EVERYTHING! - Blend Team
  20. 20. Follow me!t: @kosalanuwanw: kosalanuwan.tumblr.come: kpe@exilesoft.com

×