Microsoft has continued to evolve the Fluent Design System’s set of controls, patterns, principles and design guidance since its debut at Build 2017. Get a hands-on look at how 1st-party Microsoft experiences are taking advantage of the system and empowering their users to achieve more by crafting experiences that are natural on each device, intuitive, powerful, engaging, and immersive. Come learn how you can build experiences with the latest Fluent Design features to help your users do more in our multi-device, multi-sensory world

2. Tim Allen
Partner Design Director
Fluent Design
Chigusa Sansen
Senior Project Manager
DEV Platform R&D

3. Chigusa Sansen
Senior Project Manager
DEV Platform R&D
Partner Design Director
Fluent Design

4. Tim Allen
Partner Design Director
Fluent Design
Senior Project Manager
DEV Platform R&D

5. Fluent- Why
Fluent Design: Evolving our Design System
Chigusa Sansen, Tim Allen
Tue 3:00pm – 4:15pm
What's New for Windows UX Developers?
Fluent and XAML
Paul Gusmorino
Tue 4:45pm – 6:00pm
Designing for Fluent with Adobe XD
and other design tools
Joey Pitt, K.C. Sullivan
Mon 5/7 1:00PM-1:20PM
Creating Innovative Experiences for
Fluent Design using the Visual Layer
Danielle Neuberger, Sohum Chatterjee
Tue 1:00pm-1:45pm
Fluent Design System inside of
Microsoft: Office
Chris Bimm, William Devereux
Wed 5/9 11:30am-11:50am
Rapidly Construct LOB Applications with UWP
and Visual Studio 2017
Daniel Jacobson, Ryan Demopoulos
Tue 2:45pm- 4:00pm
Our Fluent Path to Spatial Computing:
Easy as 1-2D-3D
Mike Harnisch
Wed 5/9 1:30pm-1:50pm
Fluent Design System
provides developers with
set of controls, patterns,
principles and design
guidance. Learn how it can
make your application be
engaging and immersive,
natural on each device and
intuitive and powerful to
empower users to achieve
more.
Fluent- How Case Studies

6. How are we enabling better experiences for your customers?
What is available for you today?
What can you look forward to next?

9. Light Depth Motion Material Scale

10. Light

11. Depth

12. Motion

13. Material

14. Scale

15. When will Fluent Design be
applied to the OS?
Why is Fluent iteration
so slow?
How does Fluent Design
incorporate Inclusive
Design?
Will Office incorporate
Fluent Design?
Can Fluent Design be used
outside of the Universal
Windows Platform (UWP)?
Will more materials be
introduced?

16. 1
Incubation
Co-creators
4
Pervasive
Ecosystem
2
Systematization
Developers
3
Critical Mass
End Users

17. Fall 2018
Spring 2019
Fall 2019
Spring 2018
Fall 2017
Spring 2017

18. Intelligent Edge
Intelligent Cloud

20. Light Depth Motion Material Scale

21. 2D
L I G H T
S O U N D
L I G H T
S O U N D
H A P T I C
L I G H T
S O U N D
G L A N C E A B L E
S O U N D
H A P T I C
V I S U A L ( 0 ’ )
S O U N D
H A P T I C
V I S U A L ( 0 - 3 ’ )
S O U N D
H A P T I C
V I S U A L ( 0 ’ - 6 ’ )
S O U N D
H A P T I C
V I S U A L ( 3 ’ - 10 ’ )
S O U N D
H A P T I C
V I S U A L ( 0 ’ - 10 ’ )
S O U N D
H A P T I C
2 D - 3 D ( 0 ’ - 12 ’ )
S O U N D
H A P T I C
I M M E RS I V E ( 0 ’ - X’ )
S O U N D
H A P T I C
INPUTSOUTPUTS
V I S U A L ( 1 0 ’ )
S O U N D
H A P T I C
V I S U A L ( 0 ’ - 6 ’ )
S O U N D
H A P T I C
0 D S M A L L 2 D S C R E E N S 2 D L A R G E 2 D S C R E E N S 3 D

26. Acrylic materials
Perspective parallax
Conscious controls
Reveal highlight
Connected animations

27. Command bar flyout​
Z-depth and shadow​
Acrylic material in transient UI​
Simplified color system ​
Navigation view (left and top)​
Fluent standard and compact sizing​
Form validation​
@ mentions​
Inline handwriting​
Contextual commanding​
Data collections​
Reveal focus​
Spatial sound​
Motion system improvements​
...and more!​

38. Before After

42. Z-depth pixel values

46. Before After

55. Primary
Secondary
Tertiary

62. Current size

63. New Fluent
Standard

66. Before After

67. Compact Size

80. Command bar flyout​
Z-depth and shadow​
Acrylic material in transient UI​
Simplified color system ​
Navigation view (left and top)​
Fluent standard and compact sizing​
Form validation​
@ mentions​
Inline handwriting​
Contextual commanding​
Data collections​
Reveal focus​
Spatial sound​
Motion system improvements​
...and more!​
Acrylic materials
Perspective parallax
Conscious controls
Reveal highlight
Connected animations

83. all

85. Susan Goltsman
ms.aka/inclusivedesign

88. XAML Controls Gallery and
sample code download
Fluent Design
Toolkits
fluent.microsoft.com
aka.ms/fluentdesignforwindows
aka.ms/xamlcontrolsgallery
aka.ms/xamlcontrolsgalleryongit
aka.ms/designtoolkits

89. BREAKOUT SESSIONS – Tuesday 5/8 BREAKOUT SESSIONS – Wednesday 5/9 THEATER SESSIONS – Mon & Wed
Modernizing Desktop Apps
on Windows 10
Mike Harsh
10:30am-11:45am
Building powerful desktop and MR applications
with new windowing apis
Roberth Karman
8:30AM-9:15AM
Designing for Fluent with Adobe XD
and other design tools
Joey Pitt, K.C. Sullivan
Mon 5/7 1:00PM-1:20PM
Courageous Design – embracing successes
and failures through iteration.
Jon Friedman
1:15PM-2:30pm
Developing for Sets on Windows 10
Jason Watson, Raymond Chen
10:15-11:30am
Fluent Design System inside of
Microsoft: Office
Chris Bimm, William Devereux
Wed 5/9 11:30am-11:50am
Fluent Design: Evolving our Design System
Chigusa Sansen, Tim Allen
3:00pm – 4:15pm
Harnessing the Power of AI with Windows Ink
Avani Reddy, Yibo Sun
10:15am-11:00am
Our Fluent Path to Spatial Computing:
Easy as 1-2D-3D
Mike Harnisch
Wed 5/9 1:30pm-1:50pm
What's New for Windows UX Developers?
Fluent and XAML
Paul Gusmorino
4:45pm – 6:00pm
Creating Innovative Experiences for
Fluent Design using the Visual Layer
Danielle Neuberger, Sohum Chatterjee
1:00pm-1:45pm
Rapidly Construct LOB Applications with UWP
and Visual Studio 2017
Daniel Jacobson, Ryan Demopoulos
2:45pm- 4:00pm

90. Insider.windows.com Fluent.microsoft.com Linkedin.com/company/1035/ medium.com/@microsoftdesign @MicrosoftDesign

91. Please complete an Evaluation Form
for every session you attend. Your input is important!
@microsoftdesign
fluent.microsoft.com