The current state of Microsoft's Fluent Design

Microsoft's regular Windows 10 updates are letting it roll out a new design language for Windows and its apps.

How to create a Windows 10 system image and use it to restore your computer If you have a spare hard drive, you could have a ready-to-use system image to redo your computer if something goes wrong. Here's how to get set up and make use of a Windows 10 image.

Windows 10 today is not the Windows 10 that launched in 2015. The Windows-as-a-Service model that Microsoft uses to deliver updates has replaced much of the original release with new components while adding new features. That's led to significant changes in how Windows works, and in how Windows looks.

Windows has had a complicated relationship with design over the years. It's swung from the free-for-all of the XP and Vista days, where even windows were optional, to the typography-first flat design of Windows 8's modern design. Inspired by metro signage (which led to its original name), it's a design approach that's still at the heart of modern Windows. But design trends change, and user experiences evolve.

Introducing Fluent Design

microsoft-fluent-designthumb.png
Image: Microsoft

Building on Windows' modern design heritage, Microsoft is slowly rolling out a new design language for Windows: the Fluent Design System. Intended to be the basis for all interaction in Windows, Fluent Design is being adopted across all its variants — desktop, mixed reality, Xbox, server, IoT, and even on the web.

Taking a step away from modern design's typographic approach, Fluent is intended to add more natural user experiences to Windows, bringing in effects that mimic the real world while still ensuring that users know they're interacting with code. It's not the skeuomorphism of iOS, where user interface elements were intended to copy physical objects. In skeuomorphic design, notebooks have leather-like bindings and paper-like textures, while buttons use 3D animations to look like old radios or familiar electronic calculators.

Instead, Fluent takes a more artificial approach to design, mixing plastic-like translucency with 3D effects and with new transitions between different application states. Microsoft talks about Fluent being based on five components: Light, Depth, Motion, Material, and Scale. With designs (and applications) intended to move from device to device, there's a need for a consistent look-and-feel that works well at all scales — and in mixed reality as well. That's the intention behind Fluent: design elements that are clearly digital, but which behave like real-world objects and that can interact with the world around them.

SEE: Comparison chart: Office suites (Tech Pro Research)

Fluent is taking a similar approach to Windows Vista's Aero, with its Glass effects. But this isn't Aero reborn. There may be some similarities, especially around the use of translucency, but the overall approach is one that's built around all of Fluent's components, rather than focusing purely on visual effects.

Fluent in apps

Design is, of course, more than just the components we use in our apps. It's also key to how we build our code, influencing everything from control layout to application navigation. As the design language for Universal Windows Apps (and for Win32 apps via XAML Islands), Fluent is key to how we need to put together our code. Each new release of the Windows 10 SDK brings new versions of key controls, adding more and more Fluent elements. While Microsoft has considerably sped up adoption of new versions of Windows 10, you'll still need to consider what base version you're targeting with your UWP code. That does mean you may not use all the current Fluent features; instead you'll be using controls that work across your user base and taking advantage of Windows' own animations and effects.

Introducing Acrylic

ms-fluentacrylic-login.png

Microsoft is bringing Acrylic effects to the login screen in the 19H1 release of Windows, letting you focus on the login dialogs and fading out the Windows lock screen.

Image: Simon Bisson/TechRepublic

One of the key elements of Fluent is a translucency effect Microsoft calls Acrylic. Taking two of the key themes from Fluent, material and depth, Acrylic provides a blur effect that picks up on Windows' current theme. Windows and items behind the Acrylic layer are still visible, but can be easily overlaid with text and other user interface elements. It's a tool that Microsoft is using more and more in Windows 10, the latest preview builds adding it to log-in screens and using it as part of the navigation panes in Windows' own tooling. You can use Acrylic to tie applications to the desktop, or as a layer inside applications, dropping down over your app for menus and the like, while still showing your application context.

That last point is perhaps one of the more interesting aspects of Fluent Design, in that it's being developed to help users stay focused on their tasks. Changes shouldn't shake you out of your flow, and your overall application context needs to be visible at all times. Building it into UWP controls makes a lot of sense, as it allows developers to quickly add effects to their code without having to make significant changes.

Slow but steady

Perhaps the biggest difference between the move to Fluent design over previous Windows designs is that it's not a big bang. Vista's Aero Glass and 8's modern look came out of nowhere, kept secret until the last moment and leaving application designers and developers out of the loop. With Fluent, Microsoft is taking a much slower approach, using Windows 10's semi-annual release cycle to add new elements to its own applications and to the Windows UWP SDK. Its Insider program also gives it more ways to test Fluent features before a wider public release.

SEE: Windows spotlight: 30 tips and tricks for power users (Tech Pro Research)

One aspect of the Insider program that tends to be overlooked is its ability to be used to test design concepts. By delivering different versions to different users, Microsoft can run A/B tests as part of each Insider release. Telemetry and surveys, as well as the Feedback Hub, are used to understand how users respond to differences in animations and in transparency levels. Designs can then be refined for an upcoming build. It's been interesting to watch this process in action: an animation or effect appears in one Fast Ring build; it then disappears in the next, before a refined version is released two or three builds later.

Coming soon: new features in the next Windows release

ms-fluentacrylic.png

You'll already find Fluent Design in tools like the Windows Settings app, where it uses it in the navigation bar.

Image: Simon Bisson/TechRepublic

Comparing the current Windows 10 release, 1809, with the 19H1 Fast Ring preview, there's a lot more use of Acrylic in Microsoft's own applications. As well as the Windows settings and management tooling, it's a key element of the various bundled apps, including Mail and Photos. Acrylic is also used to fade out the lock screen on log-in, and with support for both dark and light themes, you can see how Fluent can be used in your own apps.

ms-fluentxamlcontrols.png

Developers can try out the various Fluent Design effects in Microsoft's XAML Controls Gallery, which shows how to use them, along with the code used to generate effects.

Image: Simon Bisson/TechRepublic

Microsoft is doing something very interesting with Fluent: evolving a new design language in public. It's not what users expect, with changes coming every six months and with an end nowhere in sight. But it is a process that's more developer friendly, allowing apps to adapt to new user interface components and giving developers time to learn how to use them. As Windows 10 continues to evolve, we'll see more Fluent elements in UWP controls, and in the Windows 10 SDKs, and eventually in more third-party applications.

Also see

By Simon Bisson

Born on the Channel Island of Jersey, Simon moved to the UK to attend the University of Bath where he studied electrical and electronic engineering. Since then a varied career has included being part of the team building the world's first solid state...