Fluent Design: Evolving our Design System
Download as pptx, pdf1 like949 views
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
More Related Content
Similar to Fluent Design: Evolving our Design System (20)
More from Windows Developer (20)
Recently uploaded (20)
Fluent Design: Evolving our Design System
- 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?
- 17. Fall 2018 Spring 2019 Fall 2019 Spring 2018 Fall 2017 Spring 2017
- 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
- 46. Before After
- 62. Current size
- 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
- 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
Editor's Notes
- #10: 9
- #11: 10
- #12: 11
- #13: 12
- #14: 13
- #15: 14
- #21: 20
- #22: 21
- #23: 22
- #24: 23
- #25: 24
- #27: 26
- #28: 27
- #29: 28
- #30: 29
- #31: 30
- #32: 31
- #33: 32
- #34: 33
- #35: 34
- #38: 37
- #41: 40
- #44: 43
- #46: 45
- #48: 47
- #49: 48
- #57: 56
- #58: 57
- #62: 61
- #65: 64
- #66: 65
- #67: 66
- #70: 69
- #74: 73
- #77: 76
- #79: 78
- #80: 79
- #81: 80
- #85: 84
- #86: 85
- #87: 86
- #88: 87
- #89: 88