3. Metro Design Tips I learned since I joined the Windows Phone Design Studio @arturot

4. Metro in a Nutshell

13. Do not just go straight to coding your app…

14. PLA N

15.  What will your application do?  Who is your application for?  How does your application fit in?  Where and when will your application be used?  What kind of content will you display?  How can your application leverage the hardware?  The four touch points You are a Story Teller

16. Sketch, Wireframe, Prototype

19. When to use Panorama / When to use Pivot

20. Panorama Central App Hub for your app Ideal as an entry point Can show different panels with content that unrelated to each other Think of a “Magazine” Pivot Content is related or different views for the same content Content is different but on the same subject matter

24. Design Considerations with Pivot

25.  Minimize the number of pivot pages (less than 7)  Pivot Pages are cyclical  Pivot Pages must not override the horizontal pan and horizontal flick functionality  Use one or two word pivot page headers to provide user visual clue as to existence of next pivot page  Pivot Control should only be used to display items of similar type

26. Design Considerations with Panorama

27.  Minimize the number of Panorama sections to no more than 5.  Panorama control is portrait orientation only. Dialogs launched from within Panorama control should not be rotated to avoid jarring experience.  The panorama can show a progress bar in system tray or full screen ‘loading’ indicator on launch.  First visit: the first panel shown should have the panorama title correctly aligned on the left  Subsequent visits: By default, user should be taken back to the pane where they left off when user re-visits the same Panorama.

29. Background Art Best Practices  Don’t always need to have a background, or a complex background.  Photographic backgrounds make Panorama look good visually.  Panos can be themed and the app Branding color can override the system theme.  Be careful about including embedded text and logos within the panorama.  Keep the beauty of the pano experience intact by being selective about the text and any images included in the content.  Use dark, soft, and low-contrast backgrounds.  Use one background image at a time.

30. 4 Resources that saved my bacon

31. User Experience Design Guidelines for Windows Phone http://bit.ly/nylbAo Design Resources for Windows Phone http://bit.ly/rhWpyK Design Templates for Windows Phone http://bit.ly/pLMIyk Microsoft Design.toolbox http://bit.ly/o5laV1