the microsoft design language (by will tschumy)

70
The principles of Microsoft design Will Tschumy Principal User Experience Advisor 2-116

Upload: yefeng-liu

Post on 19-May-2015

1.031 views

Category:

Design


1 download

DESCRIPTION

The Microsoft design language given by Will Tschumy at http://www.buildwindows.com/

TRANSCRIPT

Page 1: The Microsoft design language (by Will Tschumy)

The principles of Microsoft design

Will TschumyPrincipal User Experience Advisor2-116

Page 2: The Microsoft design language (by Will Tschumy)

or

Page 3: The Microsoft design language (by Will Tschumy)

Why I joined Microsoft

Page 4: The Microsoft design language (by Will Tschumy)

Beginning in 2003, Microsoft made a strategic investment in design

Page 5: The Microsoft design language (by Will Tschumy)
Page 6: The Microsoft design language (by Will Tschumy)

And the results? The fastest selling, most critically acclaimed version of Office...

Page 7: The Microsoft design language (by Will Tschumy)

…at least until Office 2010 launched

Page 8: The Microsoft design language (by Will Tschumy)

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)
Page 10: The Microsoft design language (by Will Tschumy)
Page 11: The Microsoft design language (by Will Tschumy)

“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)
Page 13: The Microsoft design language (by Will Tschumy)
Page 14: The Microsoft design language (by Will Tschumy)

Microsoft is the only organization with a…

Page 15: The Microsoft design language (by Will Tschumy)

…single, consistent design language across each screen we touch

Page 16: The Microsoft design language (by Will Tschumy)
Page 17: The Microsoft design language (by Will Tschumy)

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)
Page 19: The Microsoft design language (by Will Tschumy)
Page 20: The Microsoft design language (by Will Tschumy)
Page 21: The Microsoft design language (by Will Tschumy)

The core idea

Page 22: The Microsoft design language (by Will Tschumy)

Content before chrome

Page 23: The Microsoft design language (by Will Tschumy)
Page 24: The Microsoft design language (by Will Tschumy)
Page 25: The Microsoft design language (by Will Tschumy)
Page 26: The Microsoft design language (by Will Tschumy)
Page 27: The Microsoft design language (by Will Tschumy)
Page 28: The Microsoft design language (by Will Tschumy)
Page 29: The Microsoft design language (by Will Tschumy)
Page 30: The Microsoft design language (by Will Tschumy)
Page 31: The Microsoft design language (by Will Tschumy)

Content before chrome

Page 32: The Microsoft design language (by Will Tschumy)

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)

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)

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)
Page 36: The Microsoft design language (by Will Tschumy)
Page 37: The Microsoft design language (by Will Tschumy)
Page 38: The Microsoft design language (by Will Tschumy)
Page 39: The Microsoft design language (by Will Tschumy)
Page 40: The Microsoft design language (by Will Tschumy)

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)

Start experienceNetflixPhotos

Page 42: The Microsoft design language (by Will Tschumy)

Embrace the medium

Modern

Cloud connected

Bold, vibrant colors

Motion

Authentically digital

Page 43: The Microsoft design language (by Will Tschumy)

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)

“…[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)
Page 46: The Microsoft design language (by Will Tschumy)
Page 47: The Microsoft design language (by Will Tschumy)
Page 48: The Microsoft design language (by Will Tschumy)
Page 49: The Microsoft design language (by Will Tschumy)
Page 50: The Microsoft design language (by Will Tschumy)
Page 51: The Microsoft design language (by Will Tschumy)
Page 52: The Microsoft design language (by Will Tschumy)
Page 53: The Microsoft design language (by Will Tschumy)
Page 54: The Microsoft design language (by Will Tschumy)
Page 55: The Microsoft design language (by Will Tschumy)

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)

Clearancesale

Gifts forkids

Holiday shopping

Home and garden

Everything for winter

Page 57: The Microsoft design language (by Will Tschumy)

Clearancesale

Gifts forkids

Holiday shopping

Home and garden

Everything for winter

Page 58: The Microsoft design language (by Will Tschumy)

Title

Page 59: The Microsoft design language (by Will Tschumy)
Page 60: The Microsoft design language (by Will Tschumy)

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)

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)

SearchAll recipes and PeopleInternet Explorer and Wikipedia

Page 63: The Microsoft design language (by Will Tschumy)

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)

Windows reimagined

Page 65: The Microsoft design language (by Will Tschumy)

“The beginning is a delicate time…”

— David Lynch, Dune, 1984

Page 66: The Microsoft design language (by Will Tschumy)

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)

Content before chrome

Page 68: The Microsoft design language (by Will Tschumy)

• design.windows.com

• windowsuserexpeirencetraining.com

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)

© 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.