Metro Design Tips I learned since I joined the Windows Phone Design Studio @arturot.
Metro Design Tips I learned since I joined the Windows Phone Design Studio
description
Transcript of Metro Design Tips I learned since I joined the Windows Phone Design Studio
![Page 1: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/1.jpg)
![Page 2: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/2.jpg)
![Page 3: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/3.jpg)
Metro Design TipsI learned since I joined the
Windows Phone Design Studio
@arturot
![Page 4: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/4.jpg)
Metro in a Nutshell
![Page 5: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/5.jpg)
![Page 6: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/6.jpg)
![Page 7: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/7.jpg)
![Page 8: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/8.jpg)
![Page 9: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/9.jpg)
![Page 10: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/10.jpg)
![Page 11: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/11.jpg)
![Page 12: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/12.jpg)
![Page 13: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/13.jpg)
Do not just go straight to coding your app…
![Page 14: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/14.jpg)
PLAN
![Page 15: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/15.jpg)
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
![Page 16: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/16.jpg)
Sketch, Wireframe, Prototype
![Page 17: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/17.jpg)
Sketch, Wireframe, Prototype
![Page 18: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/18.jpg)
Sketch, Wireframe, Prototype
![Page 19: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/19.jpg)
When to use Panorama / When to use Pivot
![Page 20: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/20.jpg)
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
![Page 21: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/21.jpg)
![Page 22: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/22.jpg)
![Page 23: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/23.jpg)
![Page 24: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/24.jpg)
Design Considerationswith Pivot
![Page 25: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/25.jpg)
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
![Page 26: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/26.jpg)
Design Considerations with Panorama
![Page 27: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/27.jpg)
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.
![Page 28: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/28.jpg)
![Page 29: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/29.jpg)
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.
![Page 30: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/30.jpg)
4 Resources that saved my bacon
![Page 31: Metro Design Tips I learned since I joined the Windows Phone Design Studio](https://reader036.fdocuments.in/reader036/viewer/2022062520/568163e8550346895dd5544d/html5/thumbnails/31.jpg)
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