Fluent Design System

Last updated
Fluent Design System
Other names
  • Fluent UI
  • Microsoft Fluent Design System
Original author(s) Microsoft
Developer(s) Microsoft
Initial release2017;7 years ago (2017)
Aero UI.png
Aero
Metro UI.png
Metro
Fluent UI.png
Fluent

Design components

Light

Release(s)
Stable release(s) [±]
Web 8.120.8 / September 6, 2024;2 months ago (2024-09-06) [1]
Windows 2.8.5 / July 10, 2023;16 months ago (2023-07-10) [2]
Fluent Light Icon.svg
Light
Reveal Highlight.png
Reveal Highlight
Reveal Focus.png
Reveal Focus

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

  • Reveal highlight: Upon hovering, the reveal highlight illuminates nearby hidden borders on objects such as hamburger navigation menu lists and buttons. Upon selection, such as by clicking or tapping, a white circular illumination effect quickly appears. [22] [23]
  • Reveal focus: Focusable items with a border glow via the focus visual. [24]

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

Depth

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering. [26] [27] 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.

  • Layering: Layering divides an app into the base which is the "canvas" and the content which floats on top. The content can be presented as a continuous surface or as a card. [28]
  • Elevation: Elevation is the use of separating elements from the app surface through the use of shadows. Examples include context menus, pop-ups or tooltips. [28]

Motion

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

  • Add/delete animations: List animations for inserting and removing items from a collection. [30]
  • Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app. [31]
  • Content transition: Used when only a portion of content on a page will change. [30]
  • Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected. [32]
  • Fade: fade -in and fade-out to bring items into and dismiss them from view. [30]
  • Parallax: Parallax moves objects at different rates. The background moves slower than the content above it. For example, a list will scroll faster than the background image, creating a depth effect in addition to motion. [33]
  • Press feedback: When an item is pressed, it momentarily recedes into the background and then returns to its original position. Examples of press feedback include the Start menu live tiles, Action Center quick actions, and Microsoft Edge address bar buttons. [34]

Material

Fluent Material Icon.svg
Material
Acrylic Material.png
Acrylic
Mica Material.png
Mica
Smoke Material.png
Smoke
The different materials used in Fluent Design

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: [35]

  • Acrylic: The acrylic material creates a translucent, blurred effect with a slight noise effect. While in Windows 10, Acrylic was used in large surfaces (such as side panels). With Windows 11, primary surfaces have abandoned Acrylic in favor of Mica. Instead, Acrylic is used in transient surfaces such as context menus, tooltips or predictions in search boxes.
  • Mica: Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper. [36] Unlike acrylic, which was designed for transient surfaces (e.g., context menus), MMC is designed for use on long-lasting primary surfaces. By using different opacities, apps can create a visual hierarchy.
  • Smoke: Smoke was introduced with Windows 11. It is a translucent black background, regardless of light or dark mode, in order to create a hierarchy between the main window and a pop-up. [35]

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. [37]

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. [38] [39] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation) [40] [41]

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. [42] [43] [44] Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video, [45] before more were spotted when Windows 10X was unveiled, [46] prior to being officially revealed on December 12, 2019. [47] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar. [48] [49]

Segoe Fluent Icons

Fluent Metro Icons.svg
MDL2
Fluent Segoe Icons.svg
Fluent

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). [50] The icons are rounded departing from the angular and straight Segoe MDL2 icons which were predominant during the Windows 10 era. [51]

Fluent Emojis

Fish Fluent Emoji.svg
Fluent

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design. [52] Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022. [53] [54] 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. [52] Furthermore, Microsoft has stated their plans to animate most of them. [55] 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. [56] 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. [57]

WinUI Icon.svg
WinUI
Fluent React UI icon.svg
Fluent UI
WinUI 2 WinUI 3 Fluent UI React v9 Web Components
UWP UWP Win32 React Blazor
WinUI 2 is a library of controls and styles for building modern Windows apps. It is available for use in any UWP app and offers exciting, flexible, modern controls such as NavigationView and TeachingTip. [11] WinUI 3 is the next generation of the WinUI framework. It ships with the Windows App SDK. WinUI 3 expands WinUI into a full UX framework and provides a unified set of APIs and tools. [12] Fluent UI React v9 is the latest stable release of Fluent UI React and offers a collection of utilities, React components, and web components for building web applications. [58] Fluent UI React v9 tries to streamline itself to its WinUI counterpart. [59] Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. [60] [61]
Fluent WinUI Elements.png
UI Elements using WinUI
Fluent React Elements.png
UI Elements using Fluent UI React v9'
Example of UI elements using web components Fluent Web Elements.png
Example of UI elements using web components
UI Elements using web components

See also

Related Research Articles

Extensible Application Markup Language is a declarative XML-based language developed by Microsoft for initializing structured values and objects. It is available under Microsoft's Open Specification Promise.

<span class="mw-page-title-main">Graphical user interface builder</span> Software development tool

A graphical user interface builder, also known as GUI designer or sometimes RAD IDE, is a software development tool that simplifies the creation of GUIs by allowing the designer to arrange graphical control elements using a drag-and-drop WYSIWYG editor. Without a GUI builder, a GUI must be built by manually specifying each widget's parameters in the source code, with no visual feedback until the program is run. Such tools are usually called the term RAD IDE.

Windows Presentation Foundation (WPF) is a free and open-source user interface framework for Windows-based desktop applications. WPF applications are based in .NET, and are primarily developed using C# and XAML.

Segoe is a typeface, or family of fonts, that is best known for its use by Microsoft. The company uses Segoe in its online and printed marketing materials, including recent logos for a number of products. Additionally, the Segoe UI font sub-family is used by numerous Microsoft applications, and may be installed by applications. It was adopted as Microsoft's default operating system font, and is also used on Outlook.com, Microsoft's web-based email service. On August 23, 2012, Microsoft unveiled its new corporate logo typeset in Segoe, replacing the logo it had used for the previous 25 years.

<span class="mw-page-title-main">Windows Aero</span> Design language by Microsoft

Windows Aero is the design language introduced in the Microsoft Windows Vista operating system. The changes introduced by Windows Aero encompassed many elements of the Windows interface, with the introduction of a new visual style with an emphasis on animation, glass, and translucency; interface guidelines for phrasing and tone of instructions and other text in applications were available. New cursors and sounds based on Windows Aero design principles were also introduced.

<span class="mw-page-title-main">Metro (design language)</span> Design language introduced by Microsoft

Microsoft Design Language, previously known as Metro, is a design language created by Microsoft. This design language is focused on typography and simplified icons, absence of clutter, increased content to chrome ratio, and basic geometric shapes. Early examples of MDL principles can be found in Encarta 95 and MSN 2.0. The design language evolved in Windows Media Center and Zune and was formally introduced as Metro during the unveiling of Windows Phone 7. It has since been incorporated into several of the company's other products, including the Xbox 360 system software and the Xbox One system software, Windows 8, Windows Phone, and Outlook.com. Before the "Microsoft design language" title became official, Microsoft executive Qi Lu referred to it as the modern UI design language in his MIXX conference keynote speech. According to Microsoft, "Metro" has always been a codename and was never meant as a final product, but news websites attribute this change to trademark issues.

Windows Runtime (WinRT) is a platform-agnostic component and application architecture first introduced in Windows 8 and Windows Server 2012 in 2012. It is implemented in C++ and officially supports development in C++, Rust/WinRT, Python/WinRT, JavaScript-TypeScript, and the managed code languages C# and Visual Basic (.NET) (VB.NET).

Windows UI Library is a user interface API that is part of the Windows Runtime programming model that forms the backbone of Universal Windows Platform apps for the Windows 8, Windows 8.1, Windows 10 and Windows Phone 8.1 operating systems. It enables declaring user interfaces using Extensible Application Markup Language (XAML) technology.

Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI), and also in graphical materials such as posters, arts, guide documents and publishing products.

<span class="mw-page-title-main">Universal Windows Platform apps</span> Applications usable across all compatible Microsoft Windows devices

Universal Windows Platform (UWP) apps are applications that can be used across all compatible Microsoft Windows devices. They are primarily purchased and downloaded via the Microsoft Store, Microsoft's digital application storefront.

<span class="mw-page-title-main">WinJS</span> Open-source JavaScript library

The Windows Library for JavaScript is an open-source JavaScript library developed by Microsoft. It has been designed with the primary goal of easing development of Windows Store apps for Windows 8 and Windows 10, as well as Windows Phone apps for Windows Phone 8.1, Windows 10 Mobile and Xbox One applications using HTML5 and JavaScript, as an alternative to using WinRT XAML and C#, VB.NET or C++ (CX).

<span class="mw-page-title-main">Material Design</span> Design language developed by Google in 2014

Material Design is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference.

Universal Windows Platform (UWP) is a computing platform created by Microsoft and introduced in Windows 10. The purpose of this platform is to help develop universal apps that run on Windows 10, Windows 10 Mobile (discontinued), Windows 11, Xbox One, Xbox Series X/S, and HoloLens without the need to be rewritten for each. It supports Windows app development using C++, C#, VB.NET, and XAML. The API is implemented in C++, and supported in C++, VB.NET, C#, F# and JavaScript. Designed as an extension to the Windows Runtime (WinRT) platform introduced in Windows Server 2012 and Windows 8, UWP allows developers to create apps that will potentially run on multiple types of devices.

<span class="mw-page-title-main">Uno Platform</span>

Uno Platform is an open source cross-platform graphical user interface that allows WinUI and Universal Windows Platform (UWP) - based code to run on iOS, macOS, Linux, Android, and WebAssembly. Uno Platform is released under the Apache 2.0 license.

Windows 11 is the current major release of Microsoft's Windows NT operating system. Released on October 5, 2021, Windows 11 succeeds the previous major release, Windows 10.

Windows 11 is a major release of the Windows NT operating system developed by Microsoft that was released in October 2021. Starting with Windows 10, Microsoft described Windows as an "operating system as a service" that would receive ongoing updates to its features and functionality, augmented with the ability for enterprise environments to receive non-critical updates at a slower pace or use long-term support milestones that will only receive critical updates, such as security patches, over their five-year lifespan of mainstream support.

The implementation of emojis on different platforms took place across a three-decade period, starting in the 1990s. Today, the exact appearance of emoji is not prescribed but can vary between fonts and platforms, much like different typefaces.

<span class="mw-page-title-main">Windows App SDK</span> Software development kit from Microsoft

Windows App SDK is a software development kit (SDK) from Microsoft that provides a unified set of APIs and components that can be used to develop desktop applications for both Windows 11 and Windows 10 version 1809 and later. The purpose of this project is to offer a decoupled implementation of capabilities which were previously tightly-coupled to the UWP app model. Windows App SDK allows native Win32 (USER32/GDI32) or .NET (WPF/WinForms) developers alike a path forward to enhance their apps with modern features.

Avalonia is a free and open-source .NET cross-platform XAML-based UI framework inspired by WPF/UWP and distributed under the MIT License. Avalonia supports the MVVM pattern.

References

  1. ↑ "Fluent UI React". NPM. 2024-09-06. Retrieved 2024-09-09.
  2. ↑ "Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub. 2020-04-12. Retrieved 2024-09-09.
  3. ↑ "Release 0.0.11: Merge pull request #44 from microsoft/develop · microsoft/fluentui-android". GitHub. 2021-02-12. Retrieved 2021-03-16.
  4. ↑ "Release Bumping versions for version update (0.2.3) · microsoft/fluentui-apple". GitHub. 2021-03-09. Retrieved 2021-03-16.
  5. ↑ "Release Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub. 2021-03-17. Retrieved 2021-03-18.
  6. ↑ "@fluentui/react-native - npm". npm. 2021-03-15.
  7. ↑ Microsoft 365 Team (2020-03-12). "UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog". Microsoft 365 Developer Blog. Retrieved 2021-03-16.{{cite web}}: CS1 maint: numeric names: authors list (link)
  8. ↑ Lewkowicz, Jakub (2020-03-16). "Microsoft transforms UI Fabric to Fluent UI - SD Times". ST Times. Retrieved 2021-03-16.
  9. ↑ Office Dev (2015-08-15). "Introducing Office UI Fabric—your key to designing add-ins for Office - Microsoft 365 Blog". Microsoft 365 Blog. Retrieved 2021-03-16.
  10. ↑ Tung, Liam (2020-03-16). "Microsoft's big Fluent design push: Web developers get a new Office UI Fabric". ZDNet. Retrieved 2021-03-16.
  11. 1 2 "Fluent Design is Microsoft's new modern UI for Windows and more". The Verge. 2017-05-11. Retrieved 2017-05-11.
  12. 1 2 "Windows Developer on Twitter". Twitter. Retrieved 2017-05-11.
  13. ↑ "Fluent Design Language". Microsoft. Retrieved 2017-05-12.
  14. ↑ "New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"". Ars Technica. 11 May 2017. Retrieved 11 May 2017.
  15. ↑ "Microsoft shows off its Fluent Design changes to Windows 10". The Verge. Retrieved 2017-10-29.
  16. ↑ "Microsoft's Fluent Design System threatens to make Windows look good". Ars Technica. Retrieved 2017-10-29.
  17. ↑ "A major new Xbox One update overhauls the dashboard with Fluent Design". The Verge. Retrieved 2017-10-29.
  18. ↑ "The Xbox One is getting a major update today, including a faster dashboard". The Verge. Retrieved 2017-10-29.
  19. ↑ "A first look at Microsoft's new Windows 10X operating system for dual screens". The Verge. February 11, 2020. Retrieved April 19, 2020.
  20. ↑ "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…"". Instagram. March 19, 2020. Archived from the original on 2021-12-25. Retrieved April 19, 2020.
  21. ↑ Parmar, Mayank (2022-02-13). "Microsoft teases Windows 7 Aero-like design for Windows 11". Windows Latest. Retrieved 2023-04-05.
  22. 1 2 mijacobs. "Reveal highlight - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  23. ↑ Blog, Windows Developer (2017-08-04). "Creating Materials and Lights in the Visual Layer". Windows Developer Blog. Retrieved 2023-04-04.
  24. ↑ cphilippona (2020-09-24). "Reveal focus - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  25. 1 2 "Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub. Retrieved 2021-07-15.
  26. ↑ Bowden, Zac (2017-05-19). "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved 2017-12-22.
  27. ↑ Joyce, Kevin (2017-05-20). "Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices". VRFocus. Archived from the original on 2020-08-13. Retrieved 2017-12-22.
  28. 1 2 hickeys. "Layering and elevation in Windows 11 - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  29. ↑ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  30. 1 2 3 mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  31. ↑ mijacobs (2020-09-24). "Connected animation - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  32. ↑ davidvkimball (2020-09-24). "Page transitions in WUP apps - UWP apps". docs.microsoft.com. Retrieved 2019-11-27.
  33. ↑ mijacobs (2020-09-24). "How to use the ParallaxView control to add depth and movement to your app. - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  34. ↑ mijacobs (2020-09-24). "Pointer click animations in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  35. 1 2 hickeys. "Materials used in Windows 11 apps - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  36. ↑ "Materials used in Windows 11 apps - Windows apps". docs.microsoft.com. Retrieved 2021-07-05.
  37. ↑ mijacobs. "Acrylic material - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  38. ↑ "Fluent Design System". fluent.microsoft.com. Archived from the original on 2018-03-01. Retrieved 2018-02-18.
  39. ↑ Verma, Adarsh (2017-05-12). "What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?". Fossbytes. Retrieved 2018-02-18.
  40. ↑ muhsinking. "Scroll viewer controls - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  41. ↑ "What's new with Microsoft Fluent Design System 'wave one' for Windows 10". Windows Central. 2017-06-29. Retrieved 2017-12-22.
  42. ↑ "Redesigning the Office App Icons to Embrace a New World of Work". Medium. November 29, 2018. Retrieved April 19, 2020.
  43. ↑ "Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer". The Verge. November 2, 2019. Retrieved April 19, 2020.
  44. ↑ hickeys. "Design guidelines for Windows app icons - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  45. ↑ "Meet the new icons for Office 365". YouTube . November 29, 2018. Retrieved April 19, 2020.
  46. ↑ "#MicrosoftEvent Live". YouTube . October 2, 2019. Retrieved April 19, 2020.
  47. ↑ "The Icon Kaleidoscope". Medium. December 12, 2019. Retrieved April 19, 2020.
  48. ↑ "Iconic Icons: Designing the World of Windows". Medium. February 20, 2020. Retrieved April 19, 2020.
  49. ↑ "Microsoft rolls out colorful new Windows 10 icons". The Verge. February 20, 2020. Retrieved April 19, 2020.
  50. ↑ hickeys. "Iconography in Windows 11 - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  51. ↑ hickeys. "Segoe MDL2 Assets icons - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  52. 1 2 "New Fluent Emoji Designs From Microsoft". Emojipedia. 2021-07-15. Retrieved 2023-04-04.
  53. ↑ Carrasqueira, João (2022-08-10). "Microsoft open sources its Windows 11 emoji for everyone to use". XDA Developers. Retrieved 2023-04-04.
  54. ↑ Design, Microsoft (2022-08-10). "Designing in the Open(Source)". Microsoft Design. Retrieved 2023-04-04.
  55. ↑ Design, Microsoft (2021-11-22). "Emotionality at work". Microsoft Design. Retrieved 2023-04-04.
  56. ↑ "Home - Fluent UI". Microsoft. Retrieved April 5, 2023.
  57. ↑ Bridge, Karl. "Windows UI Library (WinUI) 3 - Windows apps". Microsoft. Retrieved April 5, 2023.
  58. ↑ "Fluent UI React". FluentUI. Retrieved 2023-04-05.
  59. ↑ VitaRox. "Fluent UI React v9: what's new and different". Microsoft. Retrieved April 5, 2023.
  60. ↑ "fluentui/packages/web-components at master · microsoft/fluentui". GitHub. Retrieved 2023-04-05.
  61. ↑ brookdozer. "Fluent UI Web Components Overview". Microsoft. Retrieved April 5, 2023.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.