This document discusses the principles and philosophy behind Modern UI design at Microsoft. It describes Modern UI as a timeless design style based on established principles like information design and influences from Swiss design, Bauhaus, and wayfinding. The document outlines key elements of Modern UI like its use of color, type, icons, grids, motion and interaction principles. It provides examples of how Modern UI has been applied and discusses best practices for creating distinctly Modern UI experiences.

2. Modern UI IS OUR DESIGN PHILOSOPHY.
IT’S СLEAN, SIMPLE AND DIRECT. IT
ELEVATES CONTENT.
IT LOVES TYPOGRAPHY. AND WHILE IT’S
UNDENIABLY, AUTHENTICALLY
MICROSOFT, Modern UI IS A FRESH
PERSPECTIVE.

3. Modern UI is not a BRAND.
Modern UI is not a STYLE GUIDE.
Modern UI is not a TOOL SET.
Modern UI is not an INTERACTION GUIDE.

4. Modern UI is not a BOX.
Modern UI is not a STACK OF
TILES.

5. Modern UI IS A TIMELESS DESIGN STYLE
BASED ON ESTABLISHED PRINCIPLES.
ITS HEART AND SOUL IS FOUNDED ON
WORLD CLASS INFORMATION DESIGN.

6. Modern UIINSPIRATION & INFLUENCESwhat is Modern UI
origins
essence
application

7. Swiss Design

8. “International Typographic Style”
shortened to Swiss Design
became popular in the 1960’s

15. the inspirational style
are all san serif
– without adornments, not…

16. Way Finding

21. the inspiration
for wayfinding is from
complex navigating
environments
not…

22. Bauhaus

23. German Modernism
Bauhaus “House of Construction”
A school/method of architecture
Established in 1920’s

27. BAUHAUS GUIDING FOCUS
Urban transportation & service
Graphics, books, magazines, posters,
Iconography, typography and logotypes
people
get information
make a decision
Society
Information, efficient,
global culture, neutral
form ever follows
function.
this is the law

28. Motion

34. Information Design
BauhausSwiss
Wayfinding Motion
Modern UI
ID
B
MW
S

35. delivering on the inspiration of Modern UI
before it was Modern UI…

39. Modern UI has produced a new blended ecosystem for users

40. GAME:
Count the number of times Modern UI is used
over the next minute

41. Modern UIHISTORY & EVOLUTIONorigins continued

42. pre-Modern UI LUNA Design [circa 2001] XP

43. pre-Modern UI AERODesign [circa 2006] Vista

44. birth of Modern UI
Learn from the PAST > deliver the NOW > dream up the FUTURE
2007 2008 2009 2010
February
WinPhone 7
Modern UI
The
Codename
Zune
HD
WIN 7
Coins Term
MODERN
2011 2012 2013 2014 2015
Modern UI
Principles
defined
//Build Conf
WIN8 beta
Modern UI
Apps
Office Labs
Zune
WinMedia Cntr
Encarta

45. Encarta 1999 > 2000 UI is transformed by a new set of principles

46. Windows Media Center TV interfaceUX [circa 2004]

47. Windows Media Center TV interfaceUX [circa 2004]

48. Office Labs Vision of the future [circa 2007]

49. Zune matures the design style [circa 2005 - 2010]

50. Zune HD known as the direct formulation of Modern UI [circa 2008]

51. Modern UIPRINCIPLESwhat is Modern UI
origins
essence
application

52. designers on Modern UI [circa 2010]

53. Modern
Windows 7 - 8
UX Principles
Circa 2006

54. Our Look is…
 Clean and open
 Content not chrome
 Typographic
 Authentically digital
Our Feel is…
 Purposeful
 Fluid
 Soulful
 Alive
Our Voice is…
 Trustworthy
 Straight-forward
 Light
 Inspiring
Look expressed in:
Layout
Typography
Color
Imagery (graphics, photos; illustrations)
Symbols (icons; logos; emoticons)
Feel experienced in:
Motion
Animation
Behavior
Sound
Voice heard in:
Text
Editorial
Names
Modern is a paradigm shift in…
PERSONALITY – INTERACTION – UX BRAND – UI PLATFORM

55. Windows
Phone
Principles
Circa 2009
Airport to
Modern UI

56. Modern UI
content, not chrome
emotion through motion
honest and authentic
clean, light, open
celebration of typography
it’s about you
Circa 2010

57. GUIDING CONCEPTS
relevant, confident, contemporary
gives context to improve usability
consistency
differentiated
type is beautiful, not just legible
clear, straightforward
information design
uncompromising sensitivity
to weights and spacing
balance, scale
creates harmony
GUIDING TONE
clean, light, open, fast
content, not chrome
authentically digital
soulful and alive
focus on primary tasks
do a lot with very little
fierce reduction of
unnecessary elements
delightful use of whitespace
DESIRED RESPONCE
It feels like the new Microsoft
It’s fresh and clean
It’s simple and intriguing
I want to share this with others
Everything is different now (in a good way)
I get it
I want to be an integral part
I can’t wait to share with others
Modern UI

58. “Perfection is achieved, not when there is nothing left to add,
but when there is nothing left to remove.”
Antoine de Saint-Exupéry
Modern UI

60. What does the user think happened?

67. All for one, and one for all

68. ux principles & design philosophy
everything matters (Keenattentiontodetail)
clean, light, and open (Fiercereductionofelements)
alive with motion (informsinteraction)
design for our medium
type is beautiful
content not chrome
clear information hierarchy
Pride in craftsmanship
Fast and fluid
Authentically digital
Do more with less
Win as one
Delivering on HARMONY
for all in the ecosystem

69. Modern UIBEST PRACTICES TO FOLLOWdistinctly
Modern UI
examples

70. Zune HD

73. Windows Phone

78. Modern UIPRACTICES TO AVOIDquestionable
Modern UI
examples

81. Retro Modern UI - partridge family
bus
Disco Modern UI
CEO Modern UI meets eye candy Holiday Modern UI
NEARMISSESWITHModernUI
DONOTTRYTHISATYOURHOME

82. Modern UIPRACTICAL & TACTICAL
ELEMENTS
what is Modern UI
origins
essence
application

83. Practical & Tactical Elements for Modern UI

84. Color

85. Pantone 2010
fashion colors
Modern UI 2010
marketing colors

86. windows phone colors

87. bing
color
Comparing old and new
Our colors now focus on a reduced set to do more with less.

88. MS - Microsoft (Corp, Dynamics)
OF - Office
W - Windows
WP - Windows Phone
XB - Xbox
BI - Bing
SK - Skype

89. Modern UI
new color wheel draft
as of UX Day 2011
covers all product
and communications

90. Type
Modern UI’S MOST INSTINCTIVE DESIGN ASSET

91. Segoe family
created by
MS for MS

92. Segoe family created for Windows Phone…

93. Segoe
Segoe WP

94. Segoe variants
Segoe TV, Segoe Print, Segoe Script, Segoe
Media Center, Segoe Marker, Segoe 360,
Segoe Xbox, Segoe PMX, Segoe WP, Segoe
Chess, Segoe UI Symbol, Segoe Bing, Segoe
Key Caps, Segoe Wedge Keyboard, Segoe
Hardware, Segoe MacBU, Zegoe, Segoe UI
Light, Segoe UI Semibold, and many others…

96. Icons

99. Before
Modern UI
After
Modern UI

100. Grid

102. Windows 7 Developers Grid

103. 5 WVGA Portrait (480x800) with overlap. Alternating red and blue rectangles indicate full screen width.
Panorama Grid
Windows 7 Developers Grid

104. 1 unit = 20 x 20 pixels
1 subunit = 5 x 5 pixels

105. Standard
6 unit margin = 120 pixels

109. Modern UI
Beyond the 20 x 20 px Grid:
grid exploration
Fibonacci Sequence
Phi Patterns
Golden Triangle
Golden Ratio

110. Voice

111. Help content BEFORE Modern UI

112. in use today. Some have been
created by Microsoft, but the vast majority of codecs have been created by other
companies, organizations, or individuals. operating
system
There might be times, however
for free or for a fee.
In some cases, the Player can use the codecs that have been installed on your PC
by other digital media playback and creation apps.
Help content BEFORE Modern UI

113. There are hundreds of audio and video codecs. By default, Windows and the
Player include some of the most popular codecs, such as Windows Media Audio,
Windows Media Video, and MP3.
If you want to play content that was compressed with a codec that isn't included
in Windows or the Player, you can likely download the codec from the web.
Help content AFTER Modern UI

116. bing
voice

117. Motion

118. HELPS HURTSMotion Function

119. turnstile

120. continuum

121. 17 sec
Motion prototyping
before you code

123. Interaction

124. What’s really different?

125. Oh… That…

126. Hick’s Law (1952):
…in other words, decisions take time
T = blog2(n + 1)

128. why Modern UI
matters
VEHICLE FOR GENERATING LOVE
EXPERIENCE HARMONY
consistent, cohesive cravable
CONNECTS PEOPLE TO WHAT THEY LOVE
AND IN A WAY THEY LOVE IT

129. Information Design
Bauhaus
Industrial
Typography
Wayfinding Motion
Modern
UI
primers

130. http://color.method.ac/color
http://type.method.ac/type space
http://shape.method.ac/type shape