Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mini Metro<br />Windows Phone 7<br />UI tips & tricks<br />Coventry NxtGen UG Nugget<br />Nick Harewood : @spacescape<br />
Mini Metro<br />Metro Design Language<br />System Colours<br />System Fonts<br />Layout<br />Images<br />
Metro Design Language<br />Clean, Light, Open, Fast<br />Celebrate Typography<br />Alive in Motion<br />Content, Not Chrom...
Metro Design Language<br />Clean, Light, Open, Fast?<br />Alive in Motion?<br />
System Colours<br />Let the OS do its thing<br />
System Colours<br />Theme resources for Windows Phone<br />http://msdn.microsoft.com/en-us/library/ff769552(v=VS.92).aspx<...
System Fonts<br />Default Styles<br />
System Fonts<br />Font Names<br />
Layout<br />White space : ‘less is more’<br />Tesco App by Ribot<br />
Layout<br />Design templates - common layout scenarios<br />http://wp7designtemplates.codeplex.com<br />
Images<br />Optimise Images<br />Download & XAP size<br />Pano-vision : ‘Discoverability’<br />
Other tips<br />‘PgUp’ to use keyboard in emulator<br />Test on a Phone<br />True resolution<br />Easy on the Gradients<br...
Links<br />Mike Ormond’s Mega List<br />http://blogs.msdn.com/b/mikeormond<br />Windows Phone 7 Design Templates<br />http...
Thanks<br />www.space-scape.com<br />@spacescape<br />
Upcoming SlideShare
Loading in …5
×

Mini metro

1,293 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
  • Be the first to comment

  • Be the first to like this

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 />

×