Upload
fitc
View
555
Download
1
Tags:
Embed Size (px)
DESCRIPTION
So you’ve seen the UI on Windows Phone and Windows 8 and you’re saying to yourself, “interesting and unique, yet flat and boxy with lots of popping colours”. You think you’ve figured out Microsoft’s Modern UI in that thought? You might be surprised to know that boxes, bright colours and that Segoe typeface are NOT what make Microsoft’s Modern UI. They are merely implementations on a grander, more subtle set of ideas. I promise you that if you come to this session, you’ll learn what the Modern UI is REALLY about and why you should care, even if you don’t touch the Microsoft platform!
Citation preview
microsoft’s modern ui mojoLAYING THE GROUNDWORK FOR THE FUTURE MULTI-SCREEN EXPERIENCE
paul labergetechnical evangelistmicrosoft [email protected]@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.