Fluent Design Is Microsoft’s Strongest Attempt to Make Windows Look Good

It’s heavy on the feels, too.

Portrait of Tammy Strobel

It’s heavy on the feels, too.

My Reading Room

At the Build developer conference in May, Microsoft officially unveiled its Fluent Design System, a bold new design language for an increasingly complex world.

Now, it’s no secret that Microsoft has been testing new ways to improve the user interface and user experience of Windows 10. Codenamed ‘Project Neon’, Fluent builds on the company’s Metro design language that was first introduced with Windows Phone.

Currently, we’re seeing mostly subtle blur and translucency effects in a few first-party apps (e.g., Windows Store, Movies & TV, Groove Music, Microsoft Photos, Paint 3D) in recent Windows 10 Insider test builds, but more will arrive, in both frequency and aggressiveness, as Microsoft builds out the Fall Creators Update and future Windows 10 releases. “It’s going to be a journey,” says Microsoft.

To be clear, despite its mobile origins and the fact that most of us will experience the new design language on Windows on the desktop, Fluent is anything but a PC-exclusive. Because Windows 10 is designed to run on all sorts of devices, Fluent has to be adaptable and scalable, too. PCs, tablets, phones, game consoles, even display-less devices - they will all be influenced by Fluent in time to come.

And when you factor in virtual and augmented reality systems, and input methods such as keyboards, mice, styluses, touch, voice, gestures, motion controllers, and even presence, Fluent becomes not just about appearance, but interactivity as well. There’s good reason why Microsoft calls Fluent a “design system” and not a “design language”.

In essence, there are five building blocks to Fluent: light, depth, motion, material, and scale. “Light” is easy to understand: it’s used to create atmosphere and illuminate information, so you’ll always know where to look and where to click or tap. An example that illustrates this is the HoloLens mixed reality headset, where your gaze directs a spot of light instead of a mouse pointer.

“Depth” is all about layering and how things such as windows and controls not on the same plane relate to one another. “Motion”, on the other hand, is about using effects like transitions and animations to establish relationships between two apps or pieces of content.