Flat Design. Microsoft Story

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.

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.

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

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

Modern UIINSPIRATION & INFLUENCESwhat is Modern UI
origins
essence
application

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

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

the inspiration
for wayfinding is from
complex navigating
environments
not…

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

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

Information Design
BauhausSwiss
Wayfinding Motion
Modern UI
ID
B
MW
S

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

Modern UI has produced a new blended ecosystem for users

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

Modern UIHISTORY & EVOLUTIONorigins continued

pre-Modern UI LUNA Design [circa 2001] XP

pre-Modern UI AERODesign [circa 2006] Vista

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

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

Windows Media Center TV interfaceUX [circa 2004]

Office Labs Vision of the future [circa 2007]

Zune matures the design style [circa 2005 - 2010]

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

Modern UIPRINCIPLESwhat is Modern UI
origins
essence
application

designers on Modern UI [circa 2010]

Modern
Windows 7 - 8
UX Principles
Circa 2006

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

Windows
Phone
Principles
Circa 2009
Airport to
Modern UI

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

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

“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

What does the user think happened?

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

Modern UIBEST PRACTICES TO FOLLOWdistinctly
Modern UI
examples

Modern UIPRACTICES TO AVOIDquestionable
Modern UI
examples

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

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

Practical & Tactical Elements for Modern UI

Pantone 2010
fashion colors
Modern UI 2010
marketing colors

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

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

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

Type
Modern UI’S MOST INSTINCTIVE DESIGN ASSET

Segoe family
created by
MS for MS

Segoe family created for Windows Phone…

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…

Before
Modern UI
After
Modern UI

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

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

Standard
6 unit margin = 120 pixels

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

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

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

17 sec
Motion prototyping
before you code

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

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

Information Design
Bauhaus
Industrial
Typography
Wayfinding Motion
Modern
UI
primers

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

Flat Design. Microsoft Story

More Related Content

Viewers also liked (20)

Similar to Flat Design. Microsoft Story (20)

More from Nikita Lukianets (13)

Recently uploaded (20)

Flat Design. Microsoft Story