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
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
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