Build 2017: Microsoft Fluent Design Language

Last week at Build 2017, Microsoft's annual developer confab, the company announced several new developer tools that will connect a developers ability to produce apps across an ecosystem of platforms that not only includes Windows but also iOS and Android.

Among the many tools they announced the company also unveiled a new design system called Fluent Design.

According to Microsoft, Fluent Design, which we have know as Project NEON until now, is a new approach to design that builds upon the roots in Metro and UWP apps to create a user experience that connects on multiple levels with the following building blocks:

Light

Light has a way of drawing our attention. It’s warm and inviting; it’s fluid and purposeful. Light creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Depth

Think about the frame that contains your information. Now break it apart, and reinvent how things relate to each other within a more layered, physical environment. This is how we’ll keep people in their flow – by giving them more space.

Motion

Think of motion design like a movie. Seamless transitions keep you focused on the story, and bring experiences to life. We can invite that feeling into our designs, leading people from one task to the next with cinematic ease.

Material

The things that surround us in the real world are sensory and invigorating. They bend, stretch, bounce, shatter, and glide. Those material qualities translate to digital environments, making people want to reach out and touch our designs.

Scale

The industry lives and breathes 2D design. Now’s the time to expand our toolkit for more dimensions. We’re scaling our design system from 0D to 3D, inviting innovation across new forms. And we’re looking to you to help us imagine this new world.

Windows Insiders who have been testing the latest Redstone 3 builds, we now know this is the development channel for the Fall Creators Update which is expected in the September timeframe, have been getting early looks at this new design language in a few first party apps from Microsoft. As I mentioned above, until now we only new this new look by its code name of Project NEON.

Interestingly enough, some of these first party apps on Windows 10 Mobile are also seeing elements of Fluent Design in recent builds.

The most obvious and visual indicator of Fluent Design is a translucence in the app called Acrylic.

Check out these samples from Windows 10 Build 16193 for PC and Build 15213 for Mobile to see examples:

Groove Music Desktop

Groove Music Mobile

Movies & TV Desktop

Movies & TV Mobile

Of course it is hard to show some of the other elements of Fluent Design in static screenshots but you can see the Acrylic aspect in the above images between desktop and mobile devices.

If you want a hands on to see some of the subtleties of Fluent Design and you are running the latest Windows Insider build then open the Calculator app and just move your mouse over the buttons to see how they react. That involves elements of Fluent Design.

To learn more about Fluent Design check out these resources:

-- Fluent Design System Home
-- Build 2017 Day 2 Keynote Fluent Design Video and Demo
-- Introducing Fluent Design (Build 2017 Session)
-- Microsoft Fluent Design System (Build 2017 Channel 9 Live Discussion/Interview)
-- Build Amazing Apps with Fluent Design (Build 2017 Session)

I have never been a big fan of transparent effects in an operating system UI ever since Vista overloaded computers everywhere with its shiny interface however, based on what I have seen both on the keynote stage, in side sessions, and now in action using these apps it seems Microsoft has figured out how to add these kind of enhancements without bogging down the OS.

I am looking forward to seeing how Microsoft and developers carry this forward for the OS and apps.

----------

But, wait...there's probably more so be sure to follow me on Twitter and Google+.

----------------------------------

Looking for an awesome, no-nonsense technical conference for IT Pros, Devs, and Devops? Check out IT/Dev Connections!