Your SlideShare is downloading. ×
0
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Metro and Windows Phone 7

16,328

Published on

Presentation from TechDays 2010, introducing Metro, the design language of Windows Phone 7

Presentation from TechDays 2010, introducing Metro, the design language of Windows Phone 7

Published in: Education
1 Comment
38 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,328
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
1,016
Comments
1
Likes
38
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Metro
  • 2. METRO IS OUR DESIGN 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.
  • 3. Metro Principles
  • 4. 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
  • 5. Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale
  • 6. Principle: Alive in Motion 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
  • 7. 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
  • 8. Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct
  • 9. Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital
  • 10. Who we design for: 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.”
  • 11. Metro User Experience Focuses on the individual and their tasks Helps organize information and applications
  • 12. Start Glance & Go Get Me There
  • 13. Metro
  • 14. RED THREADS. THESE ARE THE PRINCIPLES THAT GUIDE THE EXPERIENCES
  • 15. Weather Personal Relevant Connected Weather surfaced on the live tile in Start Weather updated based on your location Weather for your contacts
  • 16. Build delightful experience Be inspired by Metro …but look for balance between the Metro principles and your own style
  • 17. Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy
  • 18. Typography Make words feel welcome Pay attention to balance, weight & scale
  • 19. Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes
  • 20. Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience
  • 21. Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible
  • 22. Gestures
  • 23. 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
  • 24. Common controls
  • 25. 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
  • 26. Tabs Separate multiple tasks Tap or flick tabs to change them Trigger
  • 27. Hubs Rich experience Aggregate multiple sources
  • 28. Hubs vs. Single-Page Apps
  • 29. Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context)
  • 30. Expression Blend
  • 31. developer.windowsphone.com
  • 32. msdn.se/johan

×