5. 2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Modern UI
principles
6.
7.
8. Modern UI IS OUR DESIGN PHILOSOPHY.
IT’S CLEAN, SIMPLE AND DIRECT. IT
ELEVATES CONTENT.
IT LOVES TYPOGRAPHY. AND WHILE IT’S
UNDENIABLY, AUTHENTICALLY
MICROSOFT, Modern UI IS A FRESH
PERSPECTIVE.
9. 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.
10. Modern UI is not a BOX.
Modern UI is not a STACK OF
TILES.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50. 1. Modern UI
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Modern UI
principles
56. • Text commands
> Command output
> more command more output
?
Command line interface
• Text commands
• Click, double-click, right click
Graphical user interface Touch user interface
• How to select?
• How to jump in a list?
• How to hover?
57.
58. Press and hold to learn Swipe to selectSlide to dragTap for primary action
Pinch to zoom Rotate to rotate
Swipe from edge for
system and app UI
59.
60.
61.
62.
63. 1. Modern UI
2. Fast and fluid
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Modern UI
principles
78. 1. Modern UI
2. Fast and fluid
3. Snap and scale beautifully
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Modern UI
principles
91. 1. Modern UI
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Modern UI
principles
92.
93. Tiles
A front door A complete picture
Draw you inPersonal
Next up
Remind you
An extension of the app While you were away
Connected
94.
95.
96.
97.
98.
99. 1. Modern UI
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
7. Roam to the cloud
8. Embrace Modern UI
principles
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110. 1. Modern UI
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
8. Embrace Modern UI
principles
122. 1. Modern UI
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud