microsoft’s modern ui mojoLAYING THE GROUNDWORK FOR THE FUTURE MULTI-SCREEN EXPERIENCE

paul labergetechnical evangelistmicrosoft canadapaul.laberge@microsoft.com@plaberge

OUR NEW DESIGN PHILOSOPHY IS MODERN AND CLEAN, SIMPLE AND DIRECT. IT ELEVATES CONTENT. IT LOVES TYPOGRAPHY. AND WHILE IT’S UNDENIABLY, AUTHENTICALLY MICROSOFT, IT IS A FRESH PERSPECTIVE.

notit not a BRAND.

it is not a STYLE GUIDE.

it is not a TOOL SET.

it is not an INTERACTION GUIDE.

notit is not a BOX.

it is not a STACK OF TILES.

OUR MODERN DESIGN IS A TIMELESS STYLE BASED ON ESTABLISHED PRINCIPLES.ITS HEART AND SOUL IS FOUNDED ONWORLD CLASS INFORMATION DESIGN.

inspiration

pre-modern ui LUNA Design [circa 2001] XP

pre-modern ui AERO Design [circa 2006] Vista

Information

designSwiss Design

“International Typographic Style”

shortened to Swiss Design

became popular in the 1960’s

the inspirational styleare all san serif

– without adornments, not…

Information

designWay Finding

the inspirationfor wayfinding is from

complex navigating environments

not…

Information

designBauhaus

German Modernism

Bauhaus “House of Construction”

A school/method of architecture

Established in 1920’s

not this this

BAUHAUS GUIDING FOCUS

expressionUrban transportation & service Graphics, books, magazines, posters,Iconography, typography and logotypes

peopleget informationmake a decision

SocietyInformation, efficient, global culture, neutral

form ever follows function. this is the law

Information

designMotion

Information Design

Bauhaus

Swiss

Wayfinding Motion

microsoft’s modern ui

ID

B

MW

S

principles

fiercereduction

“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.”

Antoine de Saint-Exupéry

metro

consistency of experience

The Modern UI has produced a new blended ecosystem for users

“Three different products, one cohesive user experience: Suddenly, Microsoft has a strategy that makes sense.”

Paul Thurrott, Windows Super Site6.07.2011

wrap-up

?why microsoft’s modern uimatters

VEHICLE FOR GENERATING LOVE

EXPERIENCE HARMONY consistent, cohesive cravable

CONNECTS PEOPLE TO WHAT THEY LOVE

AND IN A WAY THEY LOVE IT

What you have just experienced is a new beginning.

Think of it as a design renascence at Microsoft.

These are our principles coupled with our products, together in one place for the first time. Already you can see how our Modern UI is gaining momentum.

It’s an exciting time.

Together, with the strength of our ideas, each and every one of us can help make Experience a fundamental approach to software.

Make awesome experiences.

icons

which shape(s) implement our modern ui?

which type face(s) implement our modern ui?

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

A

1

MSegoe

UI LightSegoe WPSemi-light

Adobe Caslon

Calibri Agency Impact

which type face(s) implement our modern ui?

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

A

1

MZegoe

SemiboldSegoeScript

SegoeMarker

Segoe WPBlack

Segoe WPSemibold

Segoe 360nItalic

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

A

1

M

which colour(s) implement our modern ui?

1 2 3 4 5 6

7 8 9 10 11 12

1 2 3 6

7 9 12

Thank you.

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