Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Metro Design Tips I learned since I joined the Windows Phone Design"— Presentation transcript:



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 Design Resources for Windows Phone Design Templates for Windows Phone Microsoft Design.toolbox

Download ppt "Metro Design Tips I learned since I joined the Windows Phone Design"

Similar presentations

Ads by Google