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

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

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

Mail metro Icon.svg
Metro
Mail fluent Icon.svg
Fluent

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 "Metro" era. [51]

Fluent Emojis

Fish Metro Emoji.svg
Metro
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]

Release(s)
Stable release(s) [±]
Web 8.8.0 / April 1, 2021;2 years ago (2021-04-01) [1]
Windows 2.5.0 / December 4, 2020;3 years ago (2020-12-04) [2]
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

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

<span class="mw-page-title-main">Emoji</span> Symbols often used as emotional cues in text

An emoji is a pictogram, logogram, ideogram, or smiley embedded in text and used in electronic messages and web pages. The primary function of modern emoji is to fill in emotional cues otherwise missing from typed conversation as well as to replace words as part of a logographic system. Emoji exist in various genres, including facial expressions, expressions, activity, food and drinks, celebrations, flags, objects, symbols, places, types of weather, animals and nature.

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 graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

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 beginning with Windows Vista, and is also used on Outlook.com, Microsoft's web-based email service. In August 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">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.

Windows 10 introduced a number of new elements, including the option to use a touch-optimized interface or a traditional desktop interface similar to that of Windows 7 along with live tiles from Windows 8. However, unlike previous versions of Windows, where most, if not all, major features for that release were completed by its RTM, Windows 10 continues to receive major features and changes beyond its initial release to market. Microsoft describes Windows 10 as an "operating system as a service" that will receive ongoing updates to its features and functionality. This is supplemented with the ability for enterprise environments to receive non-critical updates at a slower pace, and to use long-term support milestones that will only receive critical updates, such as security patches, over their ten-year lifespan of support.

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 a major release of the Windows NT operating system and is the successor to Windows 10. It introduces new features such as a redesigned interface, new productivity and social features, and updates to security and accessibility, along with improvements to performance.

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.

References

  1. ↑ "@fluentui/react - npm". npm. 2021-04-01. Retrieved 2021-04-04.
  2. ↑ "Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub. 2020-04-12. Retrieved 2021-03-16.
  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". 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.