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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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 />

    Be the first to comment

    Login to see the comments

  • SenthilKumar63

    Mar. 20, 2012
  • davidwkchen

    Apr. 2, 2012
  • TakeshiWatanabe2

    Apr. 2, 2012
  • cloudolphin

    May. 7, 2012
  • acmetobe

    May. 23, 2012
  • decosti

    May. 25, 2012
  • baijerry

    Jun. 1, 2012
  • nitinmehta

    Aug. 31, 2012
  • alvapma

    Sep. 5, 2012
  • ruchial

    Oct. 12, 2012
  • ShashankRastogi1

    Oct. 14, 2012
  • izaiasousa1

    Nov. 11, 2012
  • MuhNaa

    Mar. 25, 2013
  • Yuvakumarmummadi

    Apr. 16, 2013
  • clickwings

    May. 10, 2013
  • caohungs3i

    Sep. 19, 2013
  • mihuprivate

    Dec. 2, 2013
  • gopikrishna205101

    Feb. 6, 2014
  • rubir

    Jul. 16, 2014
  • JackHKHow

    May. 17, 2018

Views

Total views

5,176

On Slideshare

0

From embeds

0

Number of embeds

609

Actions

Downloads

0

Shares

0

Comments

0

Likes

25

×