Mini metro

1,223 views
1,126 views

Published on

Windows Phone 7 - UI tips & tricks
Ten minute talk given at the NxtGen User Group in Coventry; Oct 2010

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Some quick and simple tips to use when constructing the UI for your Windows Phone 7 application. It’s hard work looking this good, so let the Metro design language baked into the SDK do what it does best, while you make the most of some useful techniques to get the best out of it.
  • Some quick and simple tips to use when constructing the UI for your Windows Phone 7 application. It’s hard work looking this good, so let the Metro design language baked into the SDK do what it does best, while you make the most of some useful techniques to get the best out of it.
  • Typography – Segoe WP font – looks great largeMotion – fluid transitions, panoramas, 3DNo Chrome – the content IS the ChromeLess of the bevels, simple flat colour – the UI is not the device
  • Launched 30 Years ago last monthClean lines? Dynamic Handling?
  • Rather than specifying your own light and dark foreground and background colours – just use the default controls. They are all plumbed into the OS, so that the underlying default styles pick up whether the user is on the light or dark theme. This saves you having to worry about whether your interface will display appropriately in the different themes..
  • Useof the Light / Dark visibility convertersUse of the inverted light dark foreground / background
  • All used in the text style from the previous slideAlso text sizes in system styles
  • The best looking apps and hubs tend to have plenty of space, and don’t try and fill the available screen space with content.We have relatively big, full colour screens with up to 4.3 inch diagonal – no need to cram as much in as though we were producing a WAP page for a 10 year old Nokia.
  • The Blend team have done the hard work to figure out all the common layout scenarios and provide templates for usage.The templates are based on the UI Design and Interaction Guide for Windows Phone 7.
  • Keep it simple – if using a pano background image, you don’t want it to detract from the contentso images with a couple of key areas of detail / interest work well. Because images with less detail also optimise more easily this is also a benefit in keeping image size down – important for performance.
  • Better if going from light to dark within the same colour palette, as it suggests depth.
  • Mini metro

    1. 1. Mini Metro<br />Windows Phone 7<br />UI tips & tricks<br />Coventry NxtGen UG Nugget<br />Nick Harewood : @spacescape<br />
    2. 2. Mini Metro<br />Metro Design Language<br />System Colours<br />System Fonts<br />Layout<br />Images<br />
    3. 3. Metro Design Language<br />Clean, Light, Open, Fast<br />Celebrate Typography<br />Alive in Motion<br />Content, Not Chrome<br />Authentically Digital<br />
    4. 4. Metro Design Language<br />Clean, Light, Open, Fast?<br />Alive in Motion?<br />
    5. 5. System Colours<br />Let the OS do its thing<br />
    6. 6. System Colours<br />Theme resources for Windows Phone<br />http://msdn.microsoft.com/en-us/library/ff769552(v=VS.92).aspx<br />System Brushes<br />TextBox Brushes<br />RadioButton and CheckBox Brushes<br />
    7. 7. System Fonts<br />Default Styles<br />
    8. 8. System Fonts<br />Font Names<br />
    9. 9. Layout<br />White space : ‘less is more’<br />Tesco App by Ribot<br />
    10. 10. Layout<br />Design templates - common layout scenarios<br />http://wp7designtemplates.codeplex.com<br />
    11. 11. Images<br />Optimise Images<br />Download & XAP size<br />Pano-vision : ‘Discoverability’<br />
    12. 12. Other tips<br />‘PgUp’ to use keyboard in emulator<br />Test on a Phone<br />True resolution<br />Easy on the Gradients<br />Light & Dark<br />
    13. 13. Links<br />Mike Ormond’s Mega List<br />http://blogs.msdn.com/b/mikeormond<br />Windows Phone 7 Design Templates<br />http://wp7designtemplates.codeplex.com<br />Design Resources for Windows Phone<br />http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx<br />
    14. 14. Thanks<br />www.space-scape.com<br />@spacescape<br />

    ×