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.

Windows Phone 7- The Metro design

  • Be the first to comment

Windows Phone 7- The Metro design

  1. 1. shirily bar-or<br />Balora UX @NG Soft <br />partners of the IMA<br />Introduction to WP7 Metro UI <br />7<br />2011 © All Rights Reserved to Microsoft<br />
  2. 2. WP7 METRO UI<br />windows mobile metro ui design philosophy origins and inspiration<br />2011 © All Rights Reserved to Microsoft<br />
  3. 3. metro uidesign philosophy origins and inspiration windows mobile <br />2011 © All Rights Reserved to Microsoft<br />
  4. 4. design philosophy origins and inspiration windows mobile metro ui<br />2011 © All Rights Reserved to Microsoft<br />
  5. 5. origins and inspiration windows mobile metro uidesign philosophy <br />2011 © All Rights Reserved to Microsoft<br />
  6. 6. origins and inspiration windows mobile metro uidesign philosophy <br />2011 © All Rights Reserved to Microsoft<br />
  7. 7. what is metro design principles metro ux bringing metro to practice <br />METRO IS A DESIGN LANGUAGE.<br />MICROSOFT CALLS IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. <br /> IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.<br />2011 © All Rights Reserved to Microsoft<br />
  8. 8. design principles metro ux bringing metro to practice what is metro <br />CLEAN, LIGHT, OPEN, FAST<br />Feels Fast and Responsive<br />Focus on Primary Tasks<br />Do a Lot with Very Little<br />Fierce Reduction of Unnecessary Elements<br />Delightful Use of Whitespace<br />Full Bleed Canvas<br />2011 © All Rights Reserved to Microsoft<br />
  9. 9. design principles metro ux bringing metro to practice what is metro <br />CELEBRATE TYPOGRAPHY<br />Type is Beautiful, Not Just Legible<br />Clear, Straightforward Information Design<br />Uncompromising Sensitivity to Weight, Balance and Scale<br />2011 © All Rights Reserved to Microsoft<br />
  10. 10. design principles metro ux bringing metro to practice what is metro <br />ALIVE IN MOTION<br />Feels Responsive and Alive<br />Creates a System<br />Gives Context to Improve Usability<br />Transition Between UI is as Important as the Design of the UI<br />Adds Dimension and Depth<br />2011 © All Rights Reserved to Microsoft<br />
  11. 11. design principles metro ux bringing metro to practice what is metro <br />CONTENT, NOT CHROME<br />Delight through Content Instead of Decoration<br />Reduce Visuals that are Not Content<br />Content is the UI<br />Direct Interaction with the Content<br />2011 © All Rights Reserved to Microsoft<br />
  12. 12. design principles metro ux bringing metro to practice what is metro <br />AUTHENTICALLY <br />DIGITAL<br />Design for the Form Factor<br />Don’t Try to be What It’s NOT<br />Be Direct<br />2011 © All Rights Reserved to Microsoft<br />
  13. 13. design principles metro ux bringing metro to practice what is metro <br />2011 © All Rights Reserved to Microsoft<br />
  14. 14. metro uxbringing metro to practice what is metro design principles<br />PERSONAL, RELEVANT, CONNECTED<br />Focuses on the Individual and their Tasks<br />Helps Organize Information and Applications<br />2011 © All Rights Reserved to Microsoft<br />
  15. 15. metro uxbringing metro to practice what is metro design principles<br />Glance & Go<br />Get Me There<br />2011 © All Rights Reserved to Microsoft<br />
  16. 16. metro uxbringing metro to practice what is metro design principles<br />Personal<br />Weather surfaced on the live tile in Start<br />Relevant<br />Weather updated based on your location<br />Connected<br />Weather for your contacts<br />2011 © All Rights Reserved to Microsoft<br />
  17. 17. metro uxbringing metro to practice what is metro design principles<br />2011 © All Rights Reserved to Microsoft<br />
  18. 18. metro uxbringing metro to practice what is metro design principles<br />2011 © All Rights Reserved to Microsoft<br />
  19. 19. metro uxbringing metro to practice what is metro design principles<br />2011 © All Rights Reserved to Microsoft<br />
  20. 20. bringing metro to practice what is metro design principles metro ux<br />Be inspired by Metro…<br />… but look for balance between the Metro principles and your own style<br />2011 © All Rights Reserved to Microsoft<br />
  21. 21. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  22. 22. bringing metro to practice what is metro design principles metro ux<br />Use Colour to…<br />delight the user, personalize the experience and emphasize hierarchy<br />2011 © All Rights Reserved to Microsoft<br />
  23. 23. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  24. 24. bringing metro to practice what is metro design principles metro ux<br />Use Typography…<br />pay attention to balance, weight & scale<br />2011 © All Rights Reserved to Microsoft<br />
  25. 25. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  26. 26. bringing metro to practice what is metro design principles metro ux<br />Use motion to delight the user but…<br />Remember that pacing is important: the more<br />you use it, the less special it becomes<br />2011 © All Rights Reserved to Microsoft<br />
  27. 27. bringing metro to practice what is metro design principles metro ux<br />Make it easy to use<br />Familiar = easy to use<br />Provide consistent and predictable experience<br />2011 © All Rights Reserved to Microsoft<br />
  28. 28. bringing metro to practice what is metro design principles metro ux<br />Use Iconography<br />Be consistent <br />Test icons with user<br />2011 © All Rights Reserved to Microsoft<br />
  29. 29. bringing metro to practice what is metro design principles metro ux<br />Hardware buttons<br />Optional keyboard<br />Gestures<br />One hand usage<br />Touch size and spacing<br />2011 © All Rights Reserved to Microsoft<br />
  30. 30. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  31. 31. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  32. 32. bringing metro to practice what is metro design principles metro ux<br />2011 © All Rights Reserved to Microsoft<br />
  33. 33. Thank you…<br />2011 © All Rights Reserved to Microsoft<br />

×