Successfully reported this slideshow.

Metro Design


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Metro Design

  1. 1. Metro ByDesign Chin Wye Jin
  2. 2. "Metro" is an internal code name created by Microsoft. "Metro" is based on theIntroduction design principles of classic Swiss graphic design. -- wikipedia In designers language: Is a typography-based design.
  3. 3. Introduction
  4. 4. Less is More Design based on "Best At"Principles Typography
  5. 5. Content is the focus, not UI elements. Feels fast and responsive Focus on main taskLess is more Heavily Reduce Unnecessary Elements Resulting not just a clean, but also simplify the application flow.
  6. 6. Content is King, not UI elements. Chrome Bad (UI chrome, not google chrome) Interaction with ContentLess is more
  7. 7. Different Font styles, size and color to show "The King" (Content) in a structured ordered. Typography is a ART.Typography
  8. 8. Pick 3 most usage Highest Usage Lower Usage Build First < Search > 1"Best At" < Compare > 2 < Bookmark > < Contact > 3 < Share > Build Last
  9. 9. Sneak Preview
  10. 10. Buttons Check Boxes Radio Buttons Toggle Switches Sliders Rating Control Select / Dropdown / Combo box ControlsBonus Progress Controls Tooltips Text box **Although it is a guidelines for building Metro Style App, but most of the stuff stated inside is UX related.
  11. 11. Thank You