The Microsoft design language (by Will Tschumy)
-
Upload
yefeng-liu -
Category
Design
-
view
1.031 -
download
1
description
Transcript of The Microsoft design language (by Will Tschumy)
![Page 1: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/1.jpg)
The principles of Microsoft design
Will TschumyPrincipal User Experience Advisor2-116
![Page 2: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/2.jpg)
or
![Page 3: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/3.jpg)
Why I joined Microsoft
![Page 4: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/4.jpg)
Beginning in 2003, Microsoft made a strategic investment in design
![Page 5: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/5.jpg)
![Page 6: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/6.jpg)
And the results? The fastest selling, most critically acclaimed version of Office...
![Page 7: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/7.jpg)
…at least until Office 2010 launched
![Page 8: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/8.jpg)
Put another way, with Office 2007, Microsoft made and won a $20 billion/year bet on design
![Page 9: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/9.jpg)
![Page 10: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/10.jpg)
![Page 11: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/11.jpg)
“The next Windows Phone: It’s pretty great… It’s almost like the phone is happy to be alive. Which kind of makes you feel happy to use it.”
— Matt BuchannanGizmodo
“While Mango catches up with the other major smartphone OS’, it still manages to remain true to itself. It’s different… but Microsoft OS is beautiful, fast and powerful…”
— Michael OrylMobileBurn
“Windows Phone 7 takes a genuinely different approach to communication than its main rivals.”
— Sascha SeganPC World
“Make no mistake, Microsoft isn’t playing coy in the smartphone market any longer. The folks in Redmond are making a significant jump forward…”
— Brad MolenEngadget
“As anticipation builds [for Windows Phone Mango], Microsoft continues to add features to make this platform even better than what was expected.”
— Jordon CrookTechCrunch
“The OS is a mix of elegance and whimsy that’s a treat to use. Mango is sprinkled with delightful animations on nearly every screen.”
— Katherine Boehret All Things Digital
![Page 12: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/12.jpg)
![Page 13: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/13.jpg)
![Page 14: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/14.jpg)
Microsoft is the only organization with a…
![Page 15: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/15.jpg)
…single, consistent design language across each screen we touch
![Page 16: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/16.jpg)
![Page 17: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/17.jpg)
For Microsoft, our design principles are the language for our experiences
For customers, the language creates confidence, comfort, and familiarity
It brings us together
![Page 18: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/18.jpg)
![Page 19: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/19.jpg)
![Page 20: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/20.jpg)
![Page 21: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/21.jpg)
The core idea
![Page 22: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/22.jpg)
Content before chrome
![Page 23: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/23.jpg)
![Page 24: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/24.jpg)
![Page 25: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/25.jpg)
![Page 26: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/26.jpg)
![Page 27: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/27.jpg)
![Page 28: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/28.jpg)
![Page 29: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/29.jpg)
![Page 30: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/30.jpg)
![Page 31: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/31.jpg)
Content before chrome
![Page 32: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/32.jpg)
The five principles of Microsoft designPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
![Page 33: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/33.jpg)
Attention to detail
Make it safe and reliable
Balance, symmetry, and hierarchy
Alignment to the grid
Pride in craftsmanship
![Page 34: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/34.jpg)
App layout aligns to silhouetteApps can purposely deviate from the standard silhouetteAny deviation should feel intentional and designed
![Page 35: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/35.jpg)
![Page 36: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/36.jpg)
![Page 37: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/37.jpg)
![Page 38: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/38.jpg)
![Page 39: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/39.jpg)
![Page 40: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/40.jpg)
Design for touch
Responsive
Intuitive interaction
Immersive and compelling
Delight with motion
Life is mobile
Be fast and fluid
![Page 41: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/41.jpg)
Start experienceNetflixPhotos
![Page 42: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/42.jpg)
Embrace the medium
Modern
Cloud connected
Bold, vibrant colors
Motion
Authentically digital
![Page 43: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/43.jpg)
What is the role of design?What is the role of the designer?Is design inherent or surface?
![Page 44: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/44.jpg)
“…[the] designer should be offered no refuge in the past but should be equipped for the modern world in its various aspects, artistic, technical, social, economic, spiritual, so that he may function in society not as a decorator but as a vital participant.”
— Bauhaus, Alfred Barr, 1938
![Page 45: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/45.jpg)
![Page 46: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/46.jpg)
![Page 47: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/47.jpg)
![Page 48: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/48.jpg)
![Page 49: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/49.jpg)
![Page 50: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/50.jpg)
![Page 51: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/51.jpg)
![Page 52: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/52.jpg)
![Page 53: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/53.jpg)
![Page 54: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/54.jpg)
![Page 55: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/55.jpg)
Be great at something
Focused and direct
Content before chrome
Inspire confidence
Do more with less
![Page 56: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/56.jpg)
Clearancesale
Gifts forkids
Holiday shopping
Home and garden
Everything for winter
![Page 57: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/57.jpg)
Clearancesale
Gifts forkids
Holiday shopping
Home and garden
Everything for winter
![Page 58: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/58.jpg)
Title
![Page 59: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/59.jpg)
![Page 60: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/60.jpg)
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
![Page 61: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/61.jpg)
Work together to complete scenarios
Fit into the user experience model
Leverage the platform
Win as one
![Page 62: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/62.jpg)
SearchAll recipes and PeopleInternet Explorer and Wikipedia
![Page 63: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/63.jpg)
The five principles of Microsoft designPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
![Page 64: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/64.jpg)
Windows reimagined
![Page 65: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/65.jpg)
“The beginning is a delicate time…”
— David Lynch, Dune, 1984
![Page 66: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/66.jpg)
How will your apps be reimagined?How can you be authentic to the mediumWhere will your apps become alive?What do your users need to focus on?How will your apps integrate with the ecosystem?
![Page 67: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/67.jpg)
Content before chrome
![Page 68: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/68.jpg)
• design.windows.com
• windowsuserexpeirencetraining.com
Resources
Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions
![Page 69: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/69.jpg)
• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512
• Design: http://design.windows.com/
• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
• Videos: http://channel9.msdn.com/Windows
Resources
Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions
![Page 70: The Microsoft design language (by Will Tschumy)](https://reader036.fdocuments.us/reader036/viewer/2022062704/555a51a6d8b42ad56a8b4cb3/html5/thumbnails/70.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.