What is the Fluent Design System?

The Fluent Design System is a cross-platform system that helps developers create beautiful, intuitive applications. The website for Fluent Design (https://fluent1.microsoft.design/) has dedicated pages with resources for developers on many platforms:

• Android
• iOS
• macOS
• Web
• Windows
• Cross-platform (React Native)

Note

Microsoft has started releasing their Fluent 2 design guidance at https://fluent2.microsoft.design/. You can think of Fluent 1 styles as Windows 10 style, whereas Fluent 2 style is similar to the look and feel of Windows 11. At the time of this writing, the Fluent 2 guidance has only been published for React web applications. Other platforms are not yet available.

Fluent Design aims to be simple and intuitive. While it maintains its design philosophy across platforms, it also adapts aspects of its design to feel native on every platform. In Chapter 1, Introduction to WinUI, we discussed the origins of some of the current Fluent Design concepts in the Metro design that was introduced with Windows Phone. While the look and feel of Microsoft’s designs have evolved over the years, some of the principles remain. The three core principles of the Fluent Design System are the following:

• Natural on every device: Software should adapt to the device where it’s running, whether it’s a PC, tablet, game console, phone, or AR/VR device
• Intuitive and powerful: The UI anticipates users’ actions and pulls them into the experience while using the app
• Engaging and immersive: The design pulls from real-world elements, using light, shadow, texture, and depth to create an immersive experience for the user

The driving philosophy behind the design is to adapt and feel natural. The device and the app should feel comfortable and anticipate the user’s actions.

This is a very abstract and high-level explanation so far. Let’s explore the specifics of Fluent Design for Windows in the next section.

Exploring Fluent Design for Windows

For Windows applications, Fluent Design covers several areas. When compared to other design systems, Fluent is more all-encompassing. Apple’s Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/) have only been widely adopted on Apple’s platforms: iOS, iPadOS, and macOS. Google’s Material Design (https://material.io/) system has seen broader adoption but only has toolkits available for Android, Flutter, and the web.

Fluent Design is most often compared with Material Design as they share some concepts when it comes to shapes and texture, but Fluent Design uses transparency to much greater effect than Material Design. Fluent Design provides a rich toolset that you can use in WinUI and nearly any other development platform.

Let’s explore some of these design aspects and how they apply to your WinUI applications.

Controls

A control equates to a single element of user input or interaction. We have already explored many of the controls available in WinUI in Chapter 5, Exploring WinUI Controls. This is what some of the common WinUI controls look like in light and dark modes in Windows 11:

Figure 7.1 – Some common controls in light and dark modes

By default, the WinUI controls make use of Fluent styles. We will see how to override the default Fluent styles in our WinUI controls later in the chapter.

Patterns

Patterns are groups of related controls or a group of controls that becomes a single new element. This group could be added to a composite control for re-use. Some examples of patterns in WinUI include the following:

• Search: In its simplest form, a search pattern needs to have controls for accepting input, invoking the search, and displaying the search results. An additional element may be added for suggesting searches before any input is received. Assistants such as Amazon Alexa do this based on a user’s calendar, contacts, news preferences, and so on. Adding an autosuggest list based on user input is a common feature of modern search controls. You could also integrate chat controls with artificial intelligence (AI) such as Microsoft’s Bot Framework or OpenAI’s ChatGPT to ask some follow-up questions based on the initial search parameters.
• Forms: Forms are a very common control pattern. They consist of groups of related labels, input controls, and command buttons that collect a related set of data elements. Some common forms with potential for re-use are user account creation forms and forms for collecting user feedback. Forms should follow the Fluent Design guidelines for spacing, flexible layout, and using typography for creating a hierarchy (Microsoft Learn example: https://learn.microsoft.com/windows/apps/design/controls/forms).
• List/details: The list/details control pattern is seen so frequently that we probably don’t notice it most of the time. You may think our My Media Collection application follows this pattern (with the items list and a page to view and edit item details), but this pattern describes how to show these views on the same page. This is typically achieved with a ListView control and a SplitView control to separate the list from the selected item’s details. Depending on the width of the page, the two views can either be stacked vertically or displayed side by side (Microsoft Learn example: https://learn.microsoft.com/windows/apps/design/controls/list-details).

Each of these patterns encapsulates the elements of Fluent Design to create a composite control that can be reused across applications. You may have control patterns in your projects that could be added to a shared control library for ease of reuse. Shared libraries such as these can save time and ensure that good design practices are followed across teams.

Layout

The layout is important to ensure that an application adapts to any screen size or orientation. Flexibility is a key tenet of a well-designed layout. When a window or page is resized, the contents can adapt by repositioning controls, adding/removing items, changing the flow of items, replacing controls with others that better fit the current available space, or simply resizing items. This is typically handled in XAML with Visual States. You can define a different VisualState for each size threshold to which your page must adapt, possibly defined as Narrow, Default, Wide, and ExtraWide. Each VisualState updates control properties to adapt to the new layout. Microsoft Learn has a great example of this at https://learn.microsoft.com/windows/apps/design/layout/layouts-with-xaml. WinUI includes several different layout panels that can help developers create the right layout for their pages and respond to changes in size, orientation, and resolution.

Input

There are Fluent Design recommendations for responding to user input. There are guidelines for reacting to the traditional mouse and keyboard input that developers have been handling for decades. Modern applications can do things such as pan, zoom, rotate, or scroll based on mouse input. A keyboard may be a physical keyboard or an onscreen keyboard for mobile and touch users.

Input can come in other forms with today’s hardware:

• Pen/stylus
• Touch
• Touchpad
• Gamepad/controller
• Remote control
• Surface Dial (see https://learn.microsoft.com/windows/apps/design/input/windows-wheel-interactions)
• AR/VR gestures
• Voice

User input can also be simulated with the input injection APIs. An example of where this might be useful is creating a Show Me How or Guided Tour feature in your app. Your code can execute some pre-defined steps, guiding the user through performing some action on the page. This API is beyond the scope of this book. To read about an example of using input injection to intercept mouse input and turn it into touch input, read this article on Microsoft Learn: https://learn.microsoft.com/windows/apps/design/input/input-injection.

Style

Style encompasses multiple aspects of Fluent Design:

• Icons: Good icons should be simple and convey the application’s purpose.
• Color: The color choice is important. Allowing users to customize their colors is also a great way to make your app feel personal to them. WinUI makes it easy to adapt the user’s light or dark theme choice and the Windows highlight color by using theme brushes.
• Typography: Microsoft recommends that Windows applications all use the Segoe UI font. Selecting the font size can help convey a hierarchy within the app, such as a book or document layout. To this end, Microsoft has defined a type ramp (available at https://learn.microsoft.com/windows/apps/design/style/typography#type-ramp). A type ramp defines the increase in font size for different styled elements on the screen, such as Body, Title, and Subtitle. There are static resources that can be leveraged in WinUI to select the right size for a control’s intended use.
• Spacing: Spacing between and within controls is important for readability and usability. WinUI controls allow a Standard or Compact density to be selected. More information about sizing and Fluent densities can be found here: https://learn.microsoft.com/windows/apps/design/style/spacing.
• Reveal focus: Drawing attention to focusable elements is important for larger displays, such as an Xbox or Surface Hub. This is achieved through lighting effects with Fluent.
• Acrylic: This is a type of WinUI brush that creates texture with transparency. This texture gives a feeling of depth to the user interface. We will discuss Acrylic in more detail later in this chapter.
• Mica: This is a dynamic material like Acrylic, but unlike Acrylic it is opaque, not transparent. It creates the background of the app by incorporating elements of the current OS theme and desktop wallpaper. We will see how to incorporate Mica into your own WinUI applications later in the chapter.
• Corner radius: Fluent Design promotes the idea that rounded corners promote positive feelings in users. WinUI controls have a rounded corner radius consistent with Fluent Design recommendations.
• Sound: Sound can be an integral part of crafting an immersive experience in your apps. A subtle whooshing sound when panels slide open or closed and using just the right tone and volume in the sound of an alert can immerse the app’s users.
• Writing style: Believe it or not, writing style is part of app design. Line-of-business applications should not have the same writing style as a casual consumer app or a puzzle game. Users will be pulled into the app experience if they don’t notice the writing style at all because it fits what they expect for the application type.

These are just some of the aspects of style defined by Fluent Design. You can read more about them on Microsoft Learn: https://learn.microsoft.com/windows/apps/design/style/.

Many of the aspects of Fluent style are made available to our WinUI apps via XAML styles and other static resources. Next, we will look at how we can update our sample application to respond to changes in a user’s Windows theme.