Design stunning user experience with expression blend
Upcoming SlideShare
Loading in...5
×
 

Design stunning user experience with expression blend

on

  • 1,239 views

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

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

Statistics

Views

Total Views
1,239
Views on SlideShare
1,227
Embed Views
12

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 12

http://www.linkedin.com 9
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design stunning user experience with expression blend Design stunning user experience with expression blend Presentation Transcript

  • 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 - 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 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…
  • 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.
  • 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 Workspace1) Menu 4) Artboard2) Tools panel 5) Projects, properties, and3) Objects and timeline resource panel 6) Results panel
  • Tools Panel 1) Path tools 2) Shape tools 3) Layout panels 4) Text controls 5) Common controls 6) Results panel
  • 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
  • Templates and Styles Demo!
  • 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.
  • 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 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.
  • Data Binding Demo!
  • We believe :WITH EXPRESSIONBLEND, YOU CAN BINDALMOST EVERYTHING! - Blend Team
  • Follow me!t: @kosalanuwanw: kosalanuwan.tumblr.come: kpe@exilesoft.com