telstra ux presentation 14 dec 2012

The principles of Microsoft design

Nick HodgeProfessional GeekMicrosoft Australianhodge@microsoft.com

>_

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.