Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad...
-
Upload
hilary-harper -
Category
Documents
-
view
219 -
download
4
Transcript of Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad...
![Page 1: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/1.jpg)
![Page 2: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/2.jpg)
Designing Windows Phone 7 Series
Albert Shum – That Dude
Michael Smuga – Studio Director
Chad Roberts – UX Design Lead
Design language (codenamed Metro)
Designing delightful applications for Windows Phone
Call to action
![Page 3: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/3.jpg)
Story of Metro
![Page 4: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/4.jpg)
![Page 5: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/5.jpg)
Metro
![Page 6: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/6.jpg)
![Page 7: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/7.jpg)
![Page 8: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/8.jpg)
![Page 9: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/9.jpg)
![Page 10: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/10.jpg)
ETRO
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.
![Page 11: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/11.jpg)
Metro Principles
![Page 12: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/12.jpg)
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
![Page 13: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/13.jpg)
Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale
![Page 14: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/14.jpg)
Principle: Alive in Motion
Feels Responsive and AliveCreates a SystemGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UIAdds Dimension and Depth
![Page 15: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/15.jpg)
Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly
![Page 16: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/16.jpg)
Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct
![Page 17: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/17.jpg)
Principles
Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital
![Page 18: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/18.jpg)
![Page 19: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/19.jpg)
![Page 20: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/20.jpg)
Metro User Experience
Focuses on the individual and their tasks
Helps organize information and applications
![Page 21: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/21.jpg)
Start
Glance & Go
Get Me There
![Page 22: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/22.jpg)
![Page 23: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/23.jpg)
Metro
![Page 24: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/24.jpg)
Building Great Windows PhoneApplications
Focus on designing the experienceBuild delightful experiencesBuild experiences that are easy to use
Michael Smuga – Studio Director
![Page 25: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/25.jpg)
Who we design for: Anna + Miles
AnnaPart 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.”
![Page 26: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/26.jpg)
RED THREADS.
THESE ARETHE PRINCIPLESTHAT GUIDE THE EXPERIENCES
![Page 27: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/27.jpg)
Weather
PersonalWeather surfaced on the live tile in Start
RelevantWeather updated based on your location
ConnectedWeather for your contacts
![Page 28: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/28.jpg)
Build delightful experience
Be inspired by Metro
…but look for balance between the Metroprinciples and your own style
![Page 29: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/29.jpg)
![Page 30: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/30.jpg)
Color
Use color to delight the userUse color to personalize experienceUse color to emphasize hierarchy
![Page 31: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/31.jpg)
![Page 32: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/32.jpg)
Typography
Make words feel welcome
Pay attention to balance, weight & scale
![Page 33: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/33.jpg)
![Page 34: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/34.jpg)
Motion
Use motion to delight the user
Remember that pacing is important: the moreyou use it, the less special it becomes
![Page 35: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/35.jpg)
Make It Easy to Use
Familiar = Easy to use
Provide consistent and predictable experience
![Page 36: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/36.jpg)
Hardware Implications
Hardware buttons
Optional landscape
keyboards
Design for one hand usage
whenever possible
![Page 37: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/37.jpg)
Gestures
![Page 38: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/38.jpg)
Touch
Recommended touch target size is 9mm
Minimum touch target size is 7mm
Minimum spacing betweenelements is 2mm
Visual size is 60-100% of the touchtarget size
![Page 39: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/39.jpg)
Common controls
![Page 40: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/40.jpg)
Application Bar + Menu
Up to 4 icons
Don’t fill all 4 slots if not needed
Swipe up the bar to bring upthe menuTrigger
![Page 41: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/41.jpg)
Tabs
Separate multiple tasks
Tap or flick tabs to change them
Trigger
![Page 42: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/42.jpg)
Hubs
Rich experience
Aggregate multiple sources
![Page 43: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/43.jpg)
Hubs vs. Single-Page Apps
![Page 44: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/44.jpg)
Iconography
Icons in the application menu should be consistent
Test icons with users(pay attention to context)
![Page 45: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/45.jpg)
Call to Action
Familiarize yourself with MetroStay Connected & Get InformedDownload & Start Creating
Chad Roberts – UX Design Lead
![Page 46: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/46.jpg)
Summary
Metro
Personas
Red Threads
Focus on designing the experience
Make applications delightful and easy to use
![Page 47: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/47.jpg)
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
![Page 48: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/48.jpg)
Download & Start Creating
Get the Windows Phone Developer Tools
Download the UI Design and Interaction Guide
Interact with the design tools when Available
http://developer.windowsphone.com
![Page 49: Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dd95503460f94acf4ae/html5/thumbnails/49.jpg)
Thank you!
Albert Shum – That DudeMichael Smuga – Studio DirectorChad Roberts – UX Design Lead