Page 0: Page 1: Page 2: WEB343 Shane Morris, User Experience Evangelist Microsoft Australia Page 3: Page 4: http://www.designeye.org/ideaguy/files/knemeyer-wireframe.jpg Page 5: http://www.openinterface.ie/prototype/proto_wire_example.html Page 6: WEB343 Shane Morris, User Experience Evangelist Microsoft Australia Page 7: Wireframes and Prototypes in User Experience Design Expression Blend is not a prototyping tool! Setting up and importing sketches Creating wireframe elements Styles and resource dictionaries Wiring up pages and screens Adding Dummy Data Deficiencies and Future Directions Page 8: "The creation of multiple possible solutions to problems sets designers apart" Page 9: Activity Scenarios Sketches Paper prototypes 'Functional' prototypes Clickthrough prototypes Wireframes Production code Page 10: Page 11: Paper and sticky notes Diagramming Tools Omnigraffle, Visio, PowerPoint Purpose-built tools Intuitect, Axure, ... Video Expression? Page 12: Pro’s Show transitions Smoother move to production Styles and Resource Dictionaries Easy to add dummy data Can model more complex behaviour Con’s Too functionally rich Codeless navigation is problematic Annotation is difficult No support for sitemaps Containment model awkward when just doing basic layout Page 13: Page 14: Page 15: Turn on snapping Consider a handwriting font E.g. “Augie” http://www.webpagepublici ty.com/freefonts/a/augie.ttf Optional Page 16: Start a new project WPF Application Create a main Window Add a first Page Page 17: Page 18: Page 19: Page 20: Optional: Make Navigation UI visible Navigation UI Page 21: Page 22: Often the first step is to link together existing sketches or mockups For each sketch: Add a new item: Page Add an existing item: Image file Drag image onto the page R Page 23: Export as a .png (Save as...) Or Go to Slide sorter view, copy slide, paste into Expression Design, copy as XAML (Shift+Ctrl+C) and paste into Blend Page 24: Page 25: Start with Rectangles and TextBlocks Then composite shapes Then styled controls Page 26: Take a Simple Style Edit Template Place in Resource Dictionary Edit appearance for standard and other states. Page 27: Re-usable styles Change in one place Swap in Resource dictionaries Eg Wireframes vs styled visual treatments. Page 28: Nav Bars, Menus, Status Bars... Draw up inside a grid Either: Create a User Control (Don’t forget to Save and Build – Shift-Ctrl-B – before using.) Create a new style from an element that can be templated, like a button, and place the components in that. Page 29: Page 30: Method 1: Hyperlinks Add a TextBlock Not TextBox Edit Text (Right Click) Add Hyperlink Note only the text is clickable Consider making the TextBlock Opacity=0 Page 31: Method 1: Hyperlinks Method 2: Graphics in Hyperlinks Have to edit XAML <TextBlock Opacity="0" x:Name="Page2_Link"> <Hyperlink NavigateUri="Page2.xaml"> <InlineUIContainer> <Rectangle Height="100" Fill="Red" Width="100"/> </InlineUIContainer> </Hyperlink> </TextBlock> Page 32: Method 1: Hyperlinks Method 2: Graphics in Hyperlinks Method 3: Predefined “GoToPage” method Add existing item: “WF_utils.cs” Set Event handler (e.g. Click) to “GoToPage” Set Control’s Tag to Page name (without ‘.xaml’) Page 33: Turn off automatic Event Handler creation Tools/Options/Event Handlers Page 34: Press “OK” whenever a new Event handler is added to the Clipboard. Page 35: Nothing happens when you click the control You didn't set the Click method to 'GoToPage' You have a code-behind stub for GoToPage in your page's .cs file You mis-typed the name of the Click Page 36: You didn’t set the target Page name in the control’s “Tag” property Page 37: Target Page does not exist! Page 38: Method 1: Method 2: Method 3: method Method 4: Hyperlinks Graphics in Hyperlinks Predefined “GoToPage” Commands Requires code Not shown here Page 39: Tip: Don’t change Page names! Page 40: Page 41: Some Options Comments outside the page Tooltips Future A user control which show’s or hides when a keystroke is pressed, for example. Page 42: Page 43: Use data binding to bind to dummy data in XML files Edit XML data in Excel Refer to many examples of data binding on the web Page 44: Page 45: Most of what we have discussed today in a ‘skeleton’ project. Window and 2 Pages Linking examples Some initial wireframe components Files GotoPage.cs, Wireframe_Dictionary.xaml Get it SOON at blogs.msdn.com/shanemo Page 46: Page 47: Pro’s Show transitions Smoother move to production Styles and Resource Dictionaries Easy to add dummy data Can model more complex behaviour Con’s Too functionally rich Codeless navigation is problematic Annotation is difficult No support for sitemaps Containment model awkward when just doing basic layout Page 48: Expand Control Toolkit Annotation mechanism Pop-up windows Catch more errors “Installing” resource dictionaries http://thewpfblog.com/?p=101 Page 49: Evaluated Bindings Blendables.com Site map? Visio Integration? Expression Web relationship? Page 50: Wireframes and Prototypes in User Experience Design Expression Blend is not a prototyping tool! Setting up and importing sketches Creating wireframe elements Styles and resource dictionaries Wiring up pages and screens Adding Dummy Data Deficiencies and Future Directions Page 51: microsoft.com/expression blogs.msdn.com/shanemo Starter project Updates and articles over time Page 52: Page 53: Page 54: © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Page 55: