1. Metro By
Design Chin Wye Jin

2. "Metro" is an internal
code name created by
Microsoft.
"Metro" is based on the
Introduction design principles of
classic Swiss graphic
design. -- wikipedia
In designer's language:
Is a typography-based
design.

3. Introduction

4. Less is More
Design based on "Best At"
Principles Typography

5. Content is the focus, not UI elements.
Feels fast and responsive
Focus on main task
Less is more
Heavily Reduce Unnecessary Elements
Resulting not just a clean, but also
simplify the application flow.

6. Content is King, not UI elements.
Chrome Bad
(UI chrome, not google chrome)
Interaction with Content
Less is more

9. Different Font styles, size and color to
show "The King" (Content) in a
structured ordered.
Typography is a ART.
Typography

10. Pick 3 most usage
Highest Usage Lower Usage
Build First
< Search >
1
"Best At" < Compare >
2
< Bookmark >
< Contact >
3 < Share >
Build Last

11. Sneak Preview

12. Buttons
Check Boxes
Radio Buttons
Toggle Switches
Sliders
Rating Control
Select / Dropdown / Combo box Controls
Bonus 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.

13. Thank You