The document discusses the Windows Design Language called Metro and its principles for user interface design. It focuses on clean, minimalist interfaces that prioritize content over visual decoration with a emphasis on typography, responsiveness to motion, and authentic digital experiences. Key principles are outlined like using color to delight users and emphasize hierarchy while ensuring usability across devices with touch targets and controls that are optimized for touchscreens.

1. Windows Design Language
Metro Style
ASP.NET , Windows Phone , WPF, Silverlight, Windows
Store
http://about.me/khalilsaleem
http://about.me/yousefsami

2. New united design style
Windows 8 , Windows Phone and more

3. Examples

12. Metro Principles

13. For Good Reasons
Smart Design
Integrated Experiences

15. METRO principles





Clean, light, open
Content not chrome
Emotion thru motion
Great typography
Honest

18. Metro

19. Concepts

25. Feels Fast and Responsive
Focus on Primary Tasks
Do a Lot with Very Little
Delightful Use of Whitespac
Principle: Clean,
Light, Open, Fast

26. Principle: Celebrate Typography
Type is Beautiful, Not Just Legible
Clear, Straightforward Information Design
Uncompromising Sensitivity to Weight, Balance and Scale

27. Typography
Make words feel welcome
Pay attention to balance,
weight & scale

28. Principle: Alive in Motion
Feels Responsive and Alive
Gives Context to Improve Usability
Transition Between UI is as Important as the Design of the
UI

29. Principle: Content, Not Chrome
Delight through Content Instead of Decoration
Reduce Visuals that are Not Content
Contents is the UI
Direct interaction with the Content Directly

30. Principle: Authentically Digital
Design for the Form Factor
Don’t Try to be What It’s NOT
Be Direct

31. Principles
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital

32. Metro User Experience
Focuses on the individual and their tasks
Helps organize information and applications

33. Color
Use color to delight the user
Use color to personalize experience
Use color to emphasize hierarchy

34. Touch
Recommended touch target size is 9mm
Minimum touch target size is 7mm
Minimum spacing between
elements is 2mm
Visual size is 60-100% of the touch
target size

35. Common controls

36. Iconography
Icons in the application menu
should be consistent
Test icons with users
(pay attention to context)

44. Orientation