Downloaded 1,042 times
Uploaded byJohan Lindfors
Metro and Windows Phone 7
The document discusses design principles for Metro, a clean, minimalist design language for Windows phones. The key principles are that Metro design should be clean and light, focus on primary tasks with minimal unnecessary elements, celebrate typography, feel responsive and in motion, prioritize content over visual chrome, and be authentically digital by designing for the device form factor. Examples are provided of how these principles can be applied to elements like color, typography, motion, gestures, common controls, and iconography. The document provides guidance to help balance Metro principles with an original design style.
More Related Content
Similar to Metro and Windows Phone 7
Metro and Windows Phone 7
- 8.
- 9. METRO IS OURDESIGN LANGUAGE. WE CALL IT METRO ETRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.
- 10.
- 11. Principle: Clean, Light,Open, Fast Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas
- 12. Principle: Celebrate Typography Typeis Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale
- 13. Principle: Alive inMotion Feels Responsive and Alive Creates a System Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth
- 14. Principle: Content, NotChrome Delight through Content Instead of Decoration Reduce Visuals that are Not Content Contents is the UI Direct interaction with the Content Directly
- 15. Principle: Authentically Digital Designfor the Form Factor Don’t Try to be What It’s NOT Be Direct
- 16. Principles Clean, Light, Open,Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital
- 18. Who we designfor: Anna + Miles Anna PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.”
- 19. Metro User Experience Focuseson the individual and their tasks Helps organize information and applications
- 20. Start Glance & Go Get Me There
- 22.
- 23. RED THREADS. THESE ARE THE PRINCIPLES THAT GUIDE THE EXPERIENCES
- 24. Weather Personal Relevant Connected Weather surfaced on the live tile in Start Weather updated based on your location Weather for your contacts
- 25. Build delightful experience Beinspired by Metro …but look for balance between the Metro principles and your own style
- 27. Color Use color todelight the user Use color to personalize experience Use color to emphasize hierarchy
- 30. Typography Make words feelwelcome Pay attention to balance, weight & scale
- 32. Motion Use motion todelight the user Remember that pacing is important: the more you use it, the less special it becomes
- 33. Make It Easyto Use Familiar = Easy to use Provide consistent and predictable experience
- 34. Hardware Implications Hardware buttons Optionallandscape keyboards Design for one hand usage whenever possible
- 35.
- 36. Touch Recommended touch targetsize is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size
- 37.
- 38. Application Bar +Menu Up to 4 icons Don’t fill all 4 slots if not needed Swipe up the bar to bring up the menu Trigger
- 39. Tabs Separate multiple tasks Tapor flick tabs to change them Trigger
- 40.
- 41.
- 42. Iconography Icons in theapplication menu should be consistent Test icons with users (pay attention to context)
- 43.
- 44.
- 45.