1 / 31

Metro Design Tips I learned since I joined the Windows Phone Design Studio

Metro Design Tips I learned since I joined the Windows Phone Design Studio. @arturot. Metro in a Nutshell. Do not just go straight to coding your app…. PLAN. You are a Story Teller. What will your application do? Who is your application for? How does your application fit in?

oona
Download Presentation

Metro Design Tips I learned since I joined the Windows Phone Design Studio

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Metro Design TipsI learned since I joined the Windows Phone Design Studio @arturot

  2. Metro in a Nutshell

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

  4. PLAN

  5. You are a Story Teller • 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

  6. Sketch, Wireframe, Prototype

  7. Sketch, Wireframe, Prototype

  8. Sketch, Wireframe, Prototype

  9. When to use Panorama / When to use Pivot

  10. 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

  11. Design Considerationswith Pivot

  12. 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

  13. Design Considerations with Panorama

  14. 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.

  15. 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.

  16. 4 Resources that saved my bacon

  17. 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

More Related