metro design tips i learned since i joined the windows phone design studio @arturot
TRANSCRIPT
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