Fluent Design System Explained

Fluent Design System
Logo Size:36
Screenshot Size:270
Author:Microsoft
Developer:Microsoft
Ver Layout:stacked
Programming Language:Objective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
Engines:-->
Operating System:Android, iOS, macOS, Windows, Web browser
Platform:ARM, x86-64
Genre:Design language software
License:MIT License

Fluent Design System (codenamed "Project Neon"),[1] officially unveiled as Microsoft Fluent Design System,[2] is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language (popularly known as "Metro") that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale.[3] The new design language includes more prominent use of motion, depth, and translucency effects.[4]

The transition to Fluent is a long-term project; aspects of the design started appearing in Windows 10 beginning with the "Fall Creators Update" released in October 2017, as well as an update to the Xbox One system software released alongside it.[5] [6] [7] [8] It was later revealed to be designed in conjunction with Windows 10X,[9] in addition to Windows 11 which has a similar design.[10]

Compared to Metro and Aero

Fluent's key principles, or "blocks" (Light, Depth, Motion, Material, and Scale), turn away from the flat concept Metro had defined, and while preserving the clean look and feel Metro introduced, Fluent renews the visuals of Aero, a design approach that was introduced in Windows Vista and Windows 7, including blurred translucency, parallax animated patterns, drop shadows, highlight effects following mouse pointer or input gesture movements, and "faux materials" Metro once discarded.[11]

Design components

Light

The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer.

With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.[15] Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing intractability though animations.

Depth

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.[16] [17] This is especially apparent in the redesigned Office app in 2019. In Windows 11, the use of depth is expanded by overlapping different surfaces with different opacities of the Mica material.

Motion

Motion establishes a relationship between UI elements and provides a continuity in the experience.[19]

Material

Materials are visual effects applied to UX surfaces. In fluent design there are two main kinds of materials: occluding and transparent. Occluding materials, such as acrylic and mica, form the base layers under interactive UI elements. Transparent materials like smoke are used to emphasize immersive surfaces:

Both Acrylic and Mica are disabled in a specific window when the app is no longer selected. Furthermore, both are disabled system-wide when transparency is disabled, when battery saver mode is enabled, or on low-end hardware. Background Acrylic is disabled when a window is deselected or in Windows 10 Mobile, HoloLens, or tablet mode.[27]

Scale

Apps scale across different form factors, display sizes, and 0D to 3D. Elements adapt to their screen size and are available across multiple dimensions.[28] [29] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[30] [31]

Iconography

App Icons

New icons with acrylic materials have been created for Microsoft programs, starting with the Office apps and the Chromium-based Microsoft Edge in 2018 and 2019, respectively.[32] [33] [34] Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,[35] before more were spotted when Windows 10X was unveiled,[36] prior to being officially revealed on December 12, 2019.[37] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.[38] [39]

Segoe Fluent Icons

Segoe Fluent Icons is a set of icons designed by Microsoft for use in its products and services alongside the redesign of the Segoe UI font (Segoe UI Variable).[40] The icons are rounded departing from the angular and straight Segoe MDL2 icons which were predominant during the "Metro" era.[41]

Fluent Emojis

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design.[42] Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022.[43] [44] These new Fluent emojis depart from the flat and outlined style of the previous emoji library used in Windows 10 and instead embrace a 3d Play-Doh feel. Furthermore, Microsoft has stated their plans to animate most of them.[45] While the 3d animated emojis can be seen in apps such as Microsoft Teams and Skype, Windows 11 uses flat variants.

Implementation

Fluent design guidelines are cross-platform and can be implemented with different frameworks.[46] Fluent UI React is a set of React components that implement Microsoft's Fluent Design System. It provides a set of pre-built components that can be used to build applications for Windows, iOS, Android, macOS and the web. Furthermore, WinUI is a native user interface framework for building Windows apps. It is built on top of Fluent Design System and provides a set of pre-built controls.[47]

See also

External links

Notes and References

  1. Web site: Fluent Design is Microsoft's new modern UI for Windows and more. 2017-05-11. The Verge. 2017-05-11.
  2. Web site: Windows Developer on Twitter. Twitter. en. 2017-05-11.
  3. Web site: Fluent Design Language. Microsoft. 2017-05-12.
  4. Web site: New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System". Ars Technica. 11 May 2017. 11 May 2017.
  5. News: Microsoft shows off its Fluent Design changes to Windows 10. The Verge. 2017-10-29.
  6. News: Microsoft's Fluent Design System threatens to make Windows look good. Ars Technica. 2017-10-29. en-us.
  7. News: A major new Xbox One update overhauls the dashboard with Fluent Design. The Verge. 2017-10-29.
  8. News: The Xbox One is getting a major update today, including a faster dashboard. The Verge. 2017-10-29.
  9. News: A first look at Microsoft's new Windows 10X operating system for dual screens. February 11, 2020. The Verge. April 19, 2020.
  10. Web site: Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…". https://ghostarchive.org/iarchive/instagram/panospanay/2268502121555118221 . 2021-12-25 . registration. March 19, 2020. Instagram. April 19, 2020.
  11. Web site: Parmar . Mayank . 2022-02-13 . Microsoft teases Windows 7 Aero-like design for Windows 11 . 2023-04-05 . Windows Latest . en-US.
  12. Web site: mijacobs . Reveal highlight - UWP applications Microsoft Docs . 2017-12-22 . docs.microsoft.com . en-us.
  13. Web site: Blog . Windows Developer . 2017-08-04 . Creating Materials and Lights in the Visual Layer . 2023-04-04 . Windows Developer Blog . en-US.
  14. Web site: cphilippona . 2020-09-24 . Reveal focus - UWP applications Microsoft Docs . 2018-03-30 . docs.microsoft.com . en-us.
  15. Web site: Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml . 2021-07-15 . GitHub . en.
  16. News: Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System. 2017-05-19. Bowden. Zac. Windows Central. 2017-12-22.
  17. News: Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices. 2017-05-20. Joyce. Kevin. VRFocus. 2017-12-22. en-US. 2020-08-13. https://web.archive.org/web/20200813034545/https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/. dead.
  18. Web site: hickeys . Layering and elevation in Windows 11 - Windows apps . 2023-04-04 . learn.microsoft.com . en-us.
  19. Web site: Motion and animation in UWP apps - UWP applications Microsoft Docs. 2020-09-24. mijacobs. docs.microsoft.com. en-us. 2017-12-22.
  20. Web site: mijacobs . 2020-09-24 . Motion and animation in UWP apps - UWP applications Microsoft Docs . 2018-03-30 . docs.microsoft.com . en-us.
  21. Web site: mijacobs . 2020-09-24 . Connected animation - UWP applications Microsoft Docs . 2017-12-31 . docs.microsoft.com . en-us.
  22. Web site: davidvkimball . 2020-09-24 . Page transitions in WUP apps - UWP apps . 2019-11-27 . docs.microsoft.com . en-us.
  23. Web site: mijacobs . 2020-09-24 . How to use the ParallaxView control to add depth and movement to your app. - UWP applications Microsoft Docs . 2017-12-22 . docs.microsoft.com . en-us.
  24. Web site: mijacobs . 2020-09-24 . Pointer click animations in UWP apps - UWP applications Microsoft Docs . 2017-12-31 . docs.microsoft.com . en-us.
  25. Web site: Materials used in Windows 11 apps - Windows apps . 2021-07-05 . docs.microsoft.com . en-us.
  26. Web site: hickeys . Materials used in Windows 11 apps - Windows apps . 2023-04-04 . learn.microsoft.com . en-us.
  27. Web site: mijacobs . Acrylic material - UWP applications Microsoft Docs . 2017-12-22 . docs.microsoft.com . en-us.
  28. Web site: Fluent Design System. fluent.microsoft.com. en. 2018-02-18. https://web.archive.org/web/20180301050334/https://fluent.microsoft.com/. 2018-03-01. dead.
  29. News: What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?. Verma. Adarsh. 2017-05-12. Fossbytes. 2018-02-18. en-US.
  30. Web site: Scroll viewer controls - UWP applications Microsoft Docs. muhsinking. docs.microsoft.com. en-us. 2017-12-22.
  31. News: What's new with Microsoft Fluent Design System 'wave one' for Windows 10. 2017-06-29. Windows Central. 2017-12-22.
  32. Web site: November 29, 2018 . Redesigning the Office App Icons to Embrace a New World of Work . April 19, 2020 . Medium.
  33. News: November 2, 2019 . Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer . The Verge . April 19, 2020.
  34. Web site: hickeys . Design guidelines for Windows app icons - Windows apps . 2023-04-04 . learn.microsoft.com . en-us.
  35. Web site: November 29, 2018 . Meet the new icons for Office 365 . April 19, 2020 . YouTube.
  36. Web site: October 2, 2019 . #MicrosoftEvent Live . April 19, 2020 . YouTube.
  37. Web site: December 12, 2019 . The Icon Kaleidoscope . April 19, 2020 . Medium.
  38. Web site: February 20, 2020 . Iconic Icons: Designing the World of Windows . April 19, 2020 . Medium.
  39. News: February 20, 2020 . Microsoft rolls out colorful new Windows 10 icons . The Verge . April 19, 2020.
  40. Web site: hickeys . Iconography in Windows 11 - Windows apps . 2023-04-04 . learn.microsoft.com . en-us.
  41. Web site: hickeys . Segoe MDL2 Assets icons - Windows apps . 2023-04-04 . learn.microsoft.com . en-us.
  42. Web site: 2021-07-15 . New Fluent Emoji Designs From Microsoft . 2023-04-04 . Emojipedia . en.
  43. Web site: Carrasqueira . João . 2022-08-10 . Microsoft open sources its Windows 11 emoji for everyone to use . 2023-04-04 . XDA Developers . en.
  44. Web site: Design . Microsoft . 2022-08-10 . Designing in the Open(Source) . 2023-04-04 . Microsoft Design . en.
  45. Web site: Design . Microsoft . 2021-11-22 . Emotionality at work . 2023-04-04 . Microsoft Design . en.
  46. Web site: Home - Fluent UI . Microsoft . en-US . April 5, 2023.
  47. Web site: Bridge . Karl . Windows UI Library (WinUI) 3 - Windows apps . Microsoft . en-US . April 5, 2023.
  48. Web site: Fluent UI React . FluentUI . en-US . 2023-04-05.
  49. Web site: VitaRox . Fluent UI React v9: what's new and different . Microsoft . en-US . April 5, 2023.
  50. Web site: fluentui/packages/web-components at master · microsoft/fluentui . 2023-04-05 . GitHub . en.
  51. Web site: brookdozer . Fluent UI Web Components Overview . Microsoft . en-US . April 5, 2023.

This article is licensed under the GNU Free Documentation License. It uses material from the Wikipedia article "Fluent Design System".

Except where otherwise indicated, Everything.Explained.Today is © Copyright 2009-2024, A B Cryer, All Rights Reserved. Cookie policy.