The document discusses the Metro design language introduced by Microsoft for Windows 8. It describes Metro as a unified design language focused on clean, minimalist typography and content. The key principles of Metro are described as pride in craftsmanship, being fast and fluid, authentically digital, doing more with less, and winning as one unified platform. Metro aims to make content the priority over chrome and navigation, with functional minimalism and flatter, wider navigation.

1. The system UX

2. Windows 8 Quick Start – About The presentation Author

3. Windows 8 Quick Start – Metro Concepts
“METRO IS A UNIFIED DESIGN
LANGUAGE. WE CALL IT METRO
BECAUSE IT’S MODERN AND
CLEAN. IT’S FAST AND IN MOTION.
IT’S ABOUT CONTENT AND
TYPOGRAPHY. AND IT’S ENTIRELY
AUTHENTIC.”
Shane Morris

4. Inspired By the signage.
All about content and clear
communication

5. Windows 8 Quick Start – Metro Concepts
MODERN DESIGN
FORM FOLLOWS FUNCTION
MASS PRODUCTION
Now: Mass digitisation
historiarte1.wikispaces.com
METRO DESIGN LANGUAGE 5

6. Windows 8 Quick Start – Metro Concepts
*international style
* INFORMATION IS BEAUTIFUL
wikimedia.org

7. Windows 8 Quick Start – Metro Concepts

8. Windows 8 Quick Start – MetroPrinciples

9. Windows 8 Quick Start – MetroPrinciples
 Pride in craftsmanship
 Be fast and fluid
 Authentically digital
 Do more with less
 Win as one

10. Windows 8 Quick Start – About The presentation Author
pride in craftsmanship
* SWEAT THE DETAILS
* MAKE IT SAFE AND
RELIABLE
* BALANCE, SYMMETRY,
HIERARCHY
* ALIGN TO THE GRID
* LOOK LIKE YOU BELONG

11. Windows 8 Quick Start – About The presentation Author
be fast and fluid
* LIFE IS MOBILE
* DELIGHT WITH MOTION
* DESIGN FOR TOUCH
* INTUITIVE INTERACTION
* BE RESPONSIVE AND
READY
* IMMERSIVE AND
COMPELLING
* ORIENT WITH MOTION

12. Windows 8 Quick Start – About The presentation Author
authentically digital
* CLOUD CONNECTED
* DYNAMIC AND ALIVE
* BEAUTIFUL USE OF TYPOGRAPHY
* BOLD VIBRANT COLORS
* MOTION

13. Windows 8 Quick Start – About The presentation Author
do more with less
* BE GREAT AT SOMETHING
* FOCUSED AND DIRECT
* CONTENT BEFORE CHROME
* INSPIRE CONFIDENCE

14. Windows 8 Quick Start – About The presentation Author
win as one
* FIT INTO THE UI MODEL
* REDUCE REDUNDANCY
* WORK TOGETHER TO COMPLETE SCENARIOS
* TOOLS AND TEMPLATES ARE DESIGNED TO SCALE

15. Windows 8 Quick Start – About The presentation Author
Where metro Lives?

16. Windows 8 Quick Start – About The presentation Author
Main Goals
* LOOKS EASY, EH?
* BUT YOUR MISTAKES ARE EVEN MORE OBVIOUS
* LESS VISUAL DEVICES TO
 Direct attention
 Communicate grouping
 Delight
 Brand
METRO DESIGN LANGUAGE 16

17. Windows 8 Quick Start – About The presentation Author
metro is more than visual
* ATTITUDE…
* NAVIGATION STYLE AND
STRUCTURE
* INTERACTION STYLE AND
STRUCTURE
* SILHOUETTE
* VISUAL LANGUAGE
* LIKE ALL GOOD
DESIGN, DESIGNING FOR METRO
DOES NOT START WITH VISUALS

18. Windows 8 Quick Start – About The presentation Author
getting metro right
* CONTENT BEFORE CHROME
* FUNCTIONAL MINIMALISM
* FLATTER, WIDER NAVIGATION
* INFORMATION HIERARCHY
* PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 18

19. Windows 8 Quick Start – About The presentation Author
content before chrome
LET THE CONTENT BE THE INTERFACE
MOVE COMMANDS TO THE APP BAR
METRO DESIGN LANGUAGE 19

20. Windows 8 Quick Start – About The presentation Author

21. Windows 8 Quick Start – About The presentation Author

22. Windows 8 Quick Start – About The presentation Author

23. Windows 8 Quick Start – About The presentation Author

24. Windows 8 Quick Start – About The presentation Author

25. Windows 8 Quick Start – About The presentation Author

26. Windows 8 Quick Start – About The presentation Author

27. Windows 8 Quick Start – About The presentation Author

28. Windows 8 Quick Start – About The presentation Author

29. Windows 8 Quick Start – About The presentation Author
http://blendinsider.com/technical/ux-
guidelines-for-metro-style-app-
development-2011-10-21/
8 traits of great Metro style apps
Designing Metro style: principles and
personality
Designing Metro style apps that are touch-
optimized
Reach your customers’ devices with one
beautiful HTML5 user interface

30. Windows 8 Quick Start – About The presentation Author