This document provides guidance on designing applications for Windows Phone 7 using Metro design principles. It outlines the key Metro principles of clean, lightweight design that focuses on content over chrome, celebrates typography, brings content to life through motion, and feels authentically digital. It discusses designing for personas and common touch targets and controls. The document encourages applying Metro principles while maintaining one's own style and ends by calling developers to stay informed, connect with others, and start creating applications.

2. Designing Windows Phone 7 SeriesDesign language (codenamed Metro)Designing delightful applications for Windows PhoneCall to actionAlbert Shum – That DudeMichael Smuga – Studio DirectorChad Roberts – UX Design Lead

3. Story of Metro

5. Metro

10. METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.ETRO

11. Metro Principles

12. Principle: Clean, Light, Open, FastFeels Fast and ResponsiveFocus on Primary TasksDo a Lot with Very LittleFierce Reduction of Unnecessary ElementsDelightful Use of WhitespaceFull Bleed Canvas

13. Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale

14. Principle: Alive in MotionFeels Responsive and AliveCreates a SystemGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UIAdds Dimension and Depth

15. Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly

16. Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct

17. PrinciplesClean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital

20. Metro User ExperienceFocuses on the individual and their tasksHelps organize information and applications

21. StartGlance & GoGet Me There

23. Metro

24. Building Great Windows PhoneApplicationsFocus on designing the experienceBuild delightful experiencesBuild experiences that are easy to useMichael Smuga – Studio Director

25. Who we design for: Anna + MilesAnnaPart time PR professional and busy mom“My life is a balancing act between work,family, friends, and my own personal needs.”MilesGrowing his own architectural biz“I love running my life real-time so I can takeadvantage of whatever is inspiring me…whetherit’s a new project, a pick up game or a stolenmoment with Anna.”

26. RED THREADS.THESE ARETHE PRINCIPLESTHAT GUIDE THE EXPERIENCES

27. WeatherPersonalWeather surfaced on the live tile in StartRelevantWeather updated based on your locationConnectedWeather for your contacts

28. Build delightful experienceBe inspired by Metro…but look for balance between the Metroprinciples and your own style

30. ColorUse color to delight the userUse color to personalize experienceUse color to emphasize hierarchy

32. TypographyMake words feel welcomePay attention to balance, weight & scale

34. MotionUse motion to delight the userRemember that pacing is important: the moreyou use it, the less special it becomes

35. Make It Easy to UseFamiliar = Easy to useProvide consistent and predictable experience

36. Hardware ImplicationsHardware buttonsOptional landscapekeyboardsDesign for one hand usagewhenever possible

37. Gestures

38. TouchRecommended touch target size is 9mmMinimum touch target size is 7mmMinimum spacing betweenelements is 2mmVisual size is 60-100% of the touchtarget size

39. Common controls

40. Application Bar + MenuUp to 4 iconsDon’t fill all 4 slots if not neededSwipe up the bar to bring upthe menuTrigger

41. TabsSeparate multiple tasksTap or flick tabs to change themTrigger

42. HubsRich experienceAggregate multiple sources

43. Hubs vs. Single-Page Apps

44. IconographyIcons in the application menu should be consistentTest icons with users(pay attention to context)

45. Call to ActionFamiliarize yourself with MetroStay Connected & Get InformedDownload & Start CreatingChad Roberts – UX Design Lead

46. SummaryMetroPersonasRed ThreadsFocus on designing the experienceMake applications delightful and easy to use

47. Stay Connected & Be InformedAttend “An Introduction to Developing Applications for Microsoft Silverlight”. Watch “Authoring for Microsoft Silverlight 4 with Microsoft Expression Blend.Read about design on Christian Schormann’s blog.http://electricbeach.org

48. Download & Start CreatingGet the Windows Phone Developer ToolsDownload the UI Design and Interaction GuideInteract with the design tools when Availablehttp://developer.windowsphone.com

49. Thank you!Albert Shum – That DudeMichael Smuga – Studio DirectorChad Roberts – UX Design Lead