Introducing Fluent, Windows 10’s modern UI approach

Code isn’t the only thing that matters to your users—design and experience are as important

Become An Insider

Sign up now and get FREE access to hundreds of Insider articles, guides, reviews, interviews, blogs, and other premium content. Learn more.

Every OS has its own look and feel that goes beyond positions of buttons and controls. Some try to imitate the real world, adding physics-like behaviors. Others revel in their digital nature, with a focus on text and geometry. Microsoft has been tracing a path between those two extremes, first with Windows Vista’s Aero Glass effects, then swinging to Windows 8’s Metro and its typographical designs.

Windows 10 originally took a Metro-like approach, mixing it with familiar metaphors from Windows 7. But that was only a start, and over multiple releases it’s begun to deliver its own style. Taking lessons from Metro, it still has a focus on typography in its live tiles and icons. But it’s also starting to build on the capabilities of modern GPUs, adding transparency and animation effects that move it from a 2D world to one that’s starting to show some 3D elements.

Introducing Fluent Design System

Microsoft describes its Fluent Design System as a tool for creating “adaptive, empathic, and beautiful user interfaces.” It’s an ambitious statement, but one that aligns with its Universal Windows Platform (UWP) approach. While it’s yet to be extended to Xamarin Forms, Fluent is slowly being rolled out across the various Windows versions, from tablets to desktop to mixed reality.

Building on the existing and familiar XAML control model, Fluent Design mixes out-of-the box features with new control options. Some elements come automatically with new releases of the Windows SDK, and only require a rerelease of your app with updated controls. Others, like Fluent’s Acrylic textures, need additional code.

One of Fluent’s nicer features is the Reveal tool that illuminates the borders around an object, showing quickly which screen elements allow interaction, lighting up as you mouse over or tab into an active field. It’s especially effective when used with Windows 10’s new dark mode.

To continue reading this article register now