Windows Design Language - Metro Style ( for the WP8 Course )

821 views

Published on

مقدمة حول نمط ميترو لتصميم تطبيقات للهواتف الويندوز فون، ونظام الويندوز 8

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
821
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Windows Design Language - Metro Style ( for the WP8 Course )

  1. 1. Windows Design Language Metro Style ASP.NET , Windows Phone , WPF, Silverlight, Windows Store http://about.me/khalilsaleem http://about.me/yousefsami
  2. 2. New united design style Windows 8 , Windows Phone and more
  3. 3. Examples
  4. 4. Metro Principles
  5. 5. For Good Reasons Smart Design Integrated Experiences
  6. 6. METRO principles      Clean, light, open Content not chrome Emotion thru motion Great typography Honest
  7. 7. Metro
  8. 8. Concepts
  9. 9. Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Delightful Use of Whitespac Principle: Clean, Light, Open, Fast
  10. 10. Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale
  11. 11. Typography Make words feel welcome Pay attention to balance, weight & scale
  12. 12. 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
  13. 13. 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
  14. 14. Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct
  15. 15. Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital
  16. 16. Metro User Experience Focuses on the individual and their tasks Helps organize information and applications
  17. 17. Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy
  18. 18. 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
  19. 19. Common controls
  20. 20. Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context)
  21. 21. Orientation

×