Metro Design TipsI learned since I joined the

Windows Phone Design Studio

@arturot

Metro in a Nutshell

Do not just go straight to coding your app…

PLAN

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

Sketch, Wireframe, Prototype

Sketch, Wireframe, Prototype

Sketch, Wireframe, Prototype

When to use Panorama / When to use Pivot

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

Design Considerationswith Pivot

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

Design Considerations with Panorama

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.

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.

4 Resources that saved my bacon

User Experience Design Guidelines for Windows Phonehttp://bit.ly/nylbAo

Design Resources for Windows Phonehttp://bit.ly/rhWpyK

Design Templates for Windows Phonehttp://bit.ly/pLMIyk

Microsoft Design .toolboxhttp://bit.ly/o5laV1