Metro and Windows Phone 7
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Metro and Windows Phone 7

on

  • 18,147 views

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

Statistics

Views

Total Views
18,147
Views on SlideShare
15,392
Embed Views
2,755

Actions

Likes
38
Downloads
1,009
Comments
1

37 Embeds 2,755

http://uxfactory.com 1164
http://techmaster.vn 446
http://www.uxfactory.com 372
http://slashwong.blog.com 276
http://ep.t3.co.kr 136
http://helloux.tistory.com 103
http://ryangcamp.wordpress.com 66
http://www.slideshare.net 48
http://ryangcamp.com 22
http://inuxist.tistory.com 15
http://cafe425.daum.net 14
http://www.redditmedia.com 9
http://saltcakernd.tistory.com 8
http://sharediscover.tistory.com 8
http://xserve.intranet.cellular.net 7
http://www.slashwong.blog.com 6
http://127.0.0.1 6
http://pinterest.com 4
http://www.slashwong.co.cc 4
http://uxfactory.tistory.com 4
http://dvint1.tumblr.com 4
https://twitter.com 4
http://www.e-presentations.us 3
http://herkulano.posterous.com 3
http://cache.baidu.com 3
http://ubelly.com 3
http://shareanddiscover.tistory.com 2
http://sharendiscover.tistory.com 2
https://intranet.cellular.de 2
http://twitter.com 2
http://amobileteam.posterous.com 2
http://10.2.5.155 2
http://a0.twimg.com 1
http://editor.daum.net 1
http://intranet.cellular.de:9080 1
http://www.akki.fr 1
https://ryangcamp.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Metro and Windows Phone 7 Presentation 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