telstra ux presentation 14 dec 2012

81
The principles of Microsoft design Nick Hodge Professional Geek Microsoft Australia [email protected]

Upload: nick-hodge

Post on 08-Sep-2014

184 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Telstra ux presentation 14 dec 2012

The principles of Microsoft design

Nick HodgeProfessional GeekMicrosoft [email protected]

Page 2: Telstra ux presentation 14 dec 2012
Page 3: Telstra ux presentation 14 dec 2012

>_

Page 4: Telstra ux presentation 14 dec 2012

Microsoft is the only organization with a…

Page 5: Telstra ux presentation 14 dec 2012

…single, consistent design language across each screen we touch

Page 6: Telstra ux presentation 14 dec 2012
Page 7: Telstra ux presentation 14 dec 2012
Page 8: Telstra ux presentation 14 dec 2012
Page 9: Telstra ux presentation 14 dec 2012
Page 10: Telstra ux presentation 14 dec 2012
Page 11: Telstra ux presentation 14 dec 2012
Page 12: Telstra ux presentation 14 dec 2012
Page 13: Telstra ux presentation 14 dec 2012
Page 14: Telstra ux presentation 14 dec 2012

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 15: Telstra ux presentation 14 dec 2012
Page 16: Telstra ux presentation 14 dec 2012
Page 17: Telstra ux presentation 14 dec 2012
Page 18: Telstra ux presentation 14 dec 2012

The core idea

Page 19: Telstra ux presentation 14 dec 2012

Content before chrome

Page 20: Telstra ux presentation 14 dec 2012
Page 21: Telstra ux presentation 14 dec 2012
Page 22: Telstra ux presentation 14 dec 2012
Page 23: Telstra ux presentation 14 dec 2012
Page 24: Telstra ux presentation 14 dec 2012
Page 25: Telstra ux presentation 14 dec 2012
Page 26: Telstra ux presentation 14 dec 2012

Metro

Page 27: Telstra ux presentation 14 dec 2012
Page 28: Telstra ux presentation 14 dec 2012
Page 29: Telstra ux presentation 14 dec 2012
Page 30: Telstra ux presentation 14 dec 2012
Page 31: Telstra ux presentation 14 dec 2012

“…[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 32: Telstra ux presentation 14 dec 2012
Page 33: Telstra ux presentation 14 dec 2012

skeuomorphism

Page 34: Telstra ux presentation 14 dec 2012

Content before chrome

Page 35: Telstra ux presentation 14 dec 2012

The five principles of Microsoft designPride in craftsmanship

Be fast and fluid

Authentically digital

Do more with less

Win as one

Page 36: Telstra ux presentation 14 dec 2012

Attention to detail

Make it safe and reliable

Balance, symmetry, and hierarchy

Alignment to the grid

Pride in craftsmanship

Page 37: Telstra ux presentation 14 dec 2012

App layout aligns to silhouetteApps can purposely deviate from the standard silhouetteAny deviation should feel intentional and designed

Page 38: Telstra ux presentation 14 dec 2012
Page 39: Telstra ux presentation 14 dec 2012
Page 40: Telstra ux presentation 14 dec 2012
Page 41: Telstra ux presentation 14 dec 2012
Page 42: Telstra ux presentation 14 dec 2012
Page 43: Telstra ux presentation 14 dec 2012
Page 44: Telstra ux presentation 14 dec 2012
Page 45: Telstra ux presentation 14 dec 2012
Page 46: Telstra ux presentation 14 dec 2012
Page 47: Telstra ux presentation 14 dec 2012
Page 48: Telstra ux presentation 14 dec 2012
Page 49: Telstra ux presentation 14 dec 2012
Page 50: Telstra ux presentation 14 dec 2012
Page 51: Telstra ux presentation 14 dec 2012

1

3

2

Size and proportion

Page 52: Telstra ux presentation 14 dec 2012

1

2

3

Position

Page 53: Telstra ux presentation 14 dec 2012

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

Page 54: Telstra ux presentation 14 dec 2012

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

Page 55: Telstra ux presentation 14 dec 2012

Postures

Page 56: Telstra ux presentation 14 dec 2012

Design for touch

Responsive

Intuitive interaction

Immersive and compelling

Delight with motion

Life is mobile

Be fast and fluid

Page 57: Telstra ux presentation 14 dec 2012

Embrace the medium

Modern

Cloud connected

Bold, vibrant colors

Motion

Authentically digital

Page 58: Telstra ux presentation 14 dec 2012

What is the role of design?What is the role of the designer?Is design inherent or surface?

Page 59: Telstra ux presentation 14 dec 2012
Page 60: Telstra ux presentation 14 dec 2012
Page 61: Telstra ux presentation 14 dec 2012
Page 62: Telstra ux presentation 14 dec 2012
Page 63: Telstra ux presentation 14 dec 2012
Page 64: Telstra ux presentation 14 dec 2012
Page 65: Telstra ux presentation 14 dec 2012
Page 66: Telstra ux presentation 14 dec 2012
Page 67: Telstra ux presentation 14 dec 2012

Be great at something

Focused and direct

Content before chrome

Inspire confidence

Do more with less

Page 68: Telstra ux presentation 14 dec 2012

Clearancesale

Gifts forkids

Holiday shopping

Home and garden

Everything for winter

Page 69: Telstra ux presentation 14 dec 2012

Clearancesale

Gifts forkids

Holiday shopping

Home and garden

Everything for winter

Page 70: Telstra ux presentation 14 dec 2012

Title

Page 71: Telstra ux presentation 14 dec 2012
Page 72: Telstra ux presentation 14 dec 2012

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Page 73: Telstra ux presentation 14 dec 2012

Work together to complete scenarios

Fit into the user experience model

Leverage the platform

Win as one

Page 74: Telstra ux presentation 14 dec 2012

SearchAll recipes and PeopleInternet Explorer and Wikipedia

Page 75: Telstra ux presentation 14 dec 2012

The five principles of Microsoft designPride in craftsmanship

Be fast and fluid

Authentically digital

Do more with less

Win as one

Page 76: Telstra ux presentation 14 dec 2012

Windows reimagined

Page 77: Telstra ux presentation 14 dec 2012

“The beginning is a delicate time…”

— David Lynch, Dune, 1984

Page 78: Telstra ux presentation 14 dec 2012

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 79: Telstra ux presentation 14 dec 2012

Content before chrome

Page 80: Telstra ux presentation 14 dec 2012

• design.windows.comResources

Page 81: Telstra ux presentation 14 dec 2012

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