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