telstra ux presentation 14 dec 2012
DESCRIPTION
TRANSCRIPT
The principles of Microsoft design
Nick HodgeProfessional GeekMicrosoft [email protected]
>_
Microsoft is the only organization with a…
…single, consistent design language across each screen we touch
For Microsoft, our design principles are the language for our experiences
For customers, the language creates confidence, comfort, and familiarity
It brings us together
The core idea
Content before chrome
Metro
“…[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
skeuomorphism
Content before chrome
The five principles of Microsoft designPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
Attention to detail
Make it safe and reliable
Balance, symmetry, and hierarchy
Alignment to the grid
Pride in craftsmanship
App layout aligns to silhouetteApps can purposely deviate from the standard silhouetteAny deviation should feel intentional and designed
1
3
2
Size and proportion
1
2
3
Position
Animation Library
Enter Page / Exit Page
App navigation
Enter Content / Exit ContentExpand / CollapseRepositionCrossfadeFade In / Fade OutPeekUpdate BadgeReveal / Hide
Animate content
Pointer animationsSwipe Select / Swipe DeselectSwipe Reveal
Selection
Show Edge UI / Hide Edge UI Show Panel / Hide PanelShow Pop Up / Hide Pop Up
Show or hide supplemental UI
Add / Delete
from listDrag and drop animations
Collections and lists
Windows 8 Touch Language
Press and hold to learn
Swipe to selectSlide to panTap for primary action
Pinch to zoomTurn to rotateSwipe from edge for app commands
Swipe from edge for system commands
Postures
Design for touch
Responsive
Intuitive interaction
Immersive and compelling
Delight with motion
Life is mobile
Be fast and fluid
Embrace the medium
Modern
Cloud connected
Bold, vibrant colors
Motion
Authentically digital
What is the role of design?What is the role of the designer?Is design inherent or surface?
Be great at something
Focused and direct
Content before chrome
Inspire confidence
Do more with less
Clearancesale
Gifts forkids
Holiday shopping
Home and garden
Everything for winter
Clearancesale
Gifts forkids
Holiday shopping
Home and garden
Everything for winter
Title
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Work together to complete scenarios
Fit into the user experience model
Leverage the platform
Win as one
SearchAll recipes and PeopleInternet Explorer and Wikipedia
The five principles of Microsoft designPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
Windows reimagined
“The beginning is a delicate time…”
— David Lynch, Dune, 1984
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?
Content before chrome
• design.windows.comResources
© 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.