What's new with Microsoft Fluent Design System 'wave one' for Windows 10

Windows 10 is getting a massive user interface facelift later this year with the release of the Microsoft Fluent Design System, known previously as Project NEON.

Fluent Design is a new system that moves from a traditional boring flat design to a modern design language that delivers more immersive and engaging experiences using new multi-dimensional design techniques. The majority of the changes include subtle additions, such as transparency and blur, three-dimensional perspective and motions, and a system that works across the full range of devices.

Unlike previous design system releases, not everything will be available at once. Instead, Microsoft is planning to push new features of Fluent Design gradually in different waves, with "wave one" arriving with the Windows 10 Fall Creators Update.

In this Windows 10 guide, to make it clear what to expect, we'll highlight the Fluent Design features Microsoft will introduce in the first wave.

Fluent Design principles

The Microsoft Fluent Design System has five primary building blocks, including light, depth, motion, material, and scale that come together in harmony to provide a new set of guidelines to deliver more immersive and engaging experiences for users.

  • Light: Incorporates the element of illumination to guide users inside an application. In other words, it's a new intuitive way to draw focus to the right information at the right time on apps. You'll find this element more useful in mixed reality environments where light is used as a visual queue (or pointer) to something you're gazing at.
  • Depth: Allows to transform a flat design into a more immersive experience. Adding visual depth using z-axis information makes it possible to break the content apart and reconstruct it using layers that relate to each other adding a sense of three-dimensional perspective and motions.
  • Motion: Introduces new animation effects to bring a feel of continuity and establishes context as you navigate the experience.
  • Material: Responsible for the physical aspect of elements in the interface. In the real world elements bend, stretch, shatter, bounce, and slide, and Material brings some of that character to Windows 10 and applications.
  • Scale: Allows apps to adapt across the full range of devices, including desktop, laptop, tablet, phone, and headsets.

Fluent Design wave one

Based on these five principals, Microsoft will be rolling out Fluent Design in a series of "waves." In the first wave, you can expect at least five features that developers will be incorporating into their apps (and Microsoft into Windows 10), including Reveal Highlight, Acrylic Material, Connected Animations, Conscious Controls, and Perceptive Parallax.

Reveal Highlight

Reveal Highlight is a new kind of interactive visualization that brings illumination to help users to navigate and interact with an app. In essence, Reveal Highlight helps to show hidden borders, interface elements, and to use light as an interaction mechanism to make it easier for users to discover and learn how to use elements.

For example, in the Calculator app, when you move the mouse closer to an element, you'll start to see a glow of light and borders illuminating highlighting exactly what you're about to click. As you move the mouse around the edges of an element, you'll also notice a kind of illumination that emanates around contiguous elements of the interface.

Reveal Highlight is not just about hovering, but when you click an element, you'll see a new pulse of light visualization as well.

If you're a participant of the Windows Insider Preview program, Reveal Highlight is enabled by default starting with Windows 10 build 16226. You can try out this new feature on ListView and other XAML collection controls, such as on Action Center, Settings app, Microsoft Edge, and across many default apps like Calculator, People, and Maps.

Acrylic Material

Acrylic Material falls in the "Material" category of the new Fluent Design System. It moves us from a solid color design to a more modern design where the light and colors from the desktop illuminate the surface from behind using a new form of transparency built with graphics techniques typically used in gaming and video production.

The feature has layers of background, Gaussian blur, exclusion blend, color/tint overlay, and tiled noise texture that you'll usually see on navigation pane and specific parts of the user interface. Additionally, Acrylic Material has built-in policies that allow Windows 10 and applications to provide accessibility, user controls, and power management to optimize battery life on devices.

Apps cannot only surface light and colors from the desktop, but they can also show background layers from within the application.

For example, using the Voice Recorder app, you can see how different layers of Acrylic Material had been used to show the desktop background. However, in the Maps app, you can also see this feature, but instead of showing light from the desktop, it uses Acrylic layers to extend the view of the map edge to edge within the application.

In scenarios like when there is nothing to blend with the background, such as when using tablet mode, running low on battery, or using remote desktop, where doesn't make much sense to over utilize system resources, Acrylic Material will adapt to the environment and "solidify." However, you'll still see some elements, such as the noise layer.

Acrylic Material is already available on Windows 10 if you're running the latest test preview. You'll find bits of this new feature in the Start menu, Action Center, Settings app, and in various built-in apps, such as Calculator, Voice Recorder, and others.

If you're running the Windows 10 Creators Update, some apps like Movies & TV and Groove Music already include some Fluent Design elements.

Connected Animations

Connected Animations brings a new form of choreographic animations with motions for interface elements, which adds a fluid transition and context as you navigate within an application.

These animations not only work forward but also backward.

For example, in the Groove Music app, when you click an album the cover there is a subtle choreograph animation to reveal the album's content, instead of hard switching from one page to another.

Conscious Controls

Similar to responsive design you see on the web today, where the user interface adapts to the screen, with Fluent Design, Microsoft is also adding Conscious Controls, which are controls that adapt and respond to the environment and to what you're trying to do.

One example of Conscious Controls is the new scrollbar included on Windows 10, which only appears when required and hides when isn't needed.

Traditionally, as you interact with an application using the mouse or touchpad, the scrollbar will always be visible taking up space. However, with conscious scrollbar, it only shows up when you move the mouse to the edge of the window, which also removes unnecessary distractions from the screen. In addition, when using a precision touchpad or touch-enabled display, the scrollbar won't appear as you use gestures to navigate.

Another example of Conscious Controls includes the idea of text boxes being "conscious" and adaptable to the environment. For example, tapping the address on Microsoft Edge using the pen will bring up the handwriting panel to write with digital ink.

You can try bits of Conscious Controls now on Windows 10 in applications such as the Windows Store, Settings, People, Groove Music, and other apps. If you're an Insider, the new conscious scrollbar is also implemented in the Start menu and Action Center.

Perceptive Parallax

Perceptive Parallax falls into the "Depth" category of Fluent Design, and it helps to move away from the traditional flat design by breaking the content into elements and then layers them together using z-axis adding the feeling of depth, movement, and perspective. In other words, parallax is a visual effect where items in the background move slower than those closer to the user while scrolling or panning.

If you have a computer enrolled in the Fast ring, you can see some pieces of Perceptive Parallax on apps, such as the Windows Store, Groove Music, Photos, and others.

What else is coming in wave two of Fluent Design

While there are several Microsoft Fluent Design System features coming with the Windows 10 Fall Creators Update; that's not all of it. Microsoft will be releasing the new design system in a series of "waves," and there is more to come in wave two. Some other features planned for the next release include 360 Media Playback, Conscious Headers, Speech, Z-Depth Layering, and Spatial Sound.

You can learn more details about the upcoming changes planned for the first release in this Microsoft Build 2017 video session that we're embedding below.

More Windows 10 resources

For more helpful articles, coverage, and answers to common questions about Windows 10, visit the following resources:

Mauro Huculak

Mauro Huculak is technical writer for WindowsCentral.com. His primary focus is to write comprehensive how-tos to help users get the most out of Windows 10 and its many related technologies. He has an IT background with professional certifications from Microsoft, Cisco, and CompTIA, and he's a recognized member of the Microsoft MVP community.

  • Looking good. Can't wait! :)
  • It will be cool :)
  • Can you turn it off?
  • Yes, if you turn off transparency.
  • Can you leave?
  • Well probably, but that won't help in turning all the annoying blurs and things off.
  • On the surface, it sounds more like it's taking us back to a Windows Vista design language rather than "modern". Perhaps people like it and it looks more like Apple design, but is "modern" really the right word? Styles come and go, and old ones are reimplemented.
  • The whole "modern" thing has been a joke since windows 8, the ugliest windows UI to ever exist that continues today with windows 10, such arrogance from microsoft to continue using that name despite practically universal criticism even from their own fanboys. Vista's design language was and still is way ahead of both 8 and 10.
  • That's pretty subjective.  I would argue that in many ways windows 10 was the best UI (So far).  However I like minimalistic monochromatic elements so this is subjective also.  Personally I think MS needs to provide some kind of skinning engine that allows extreme personalization in a fairly consistant manner.  Like android but built in with less performance degridation.  This way everyone can get the look they want. 
  • And yet... They won design prizes for the modern UI and both Android and iOS has been heavily inspired by it. Heck, besides the live tiles... Android almost copied all design elements 1:1.
  • Not talking about actual aesthetics which can be bit pretty subjective, the problem during Windows 8 era (not counting WIndows Phone which was earlier of Metro) is that it was rushed job and they end up with 2 distinct environments and never be consistent to each other. Its jarring between the two. There was no real realization of Metro Design Language (later called Modern) on the desktop fully because it never was finished and they just simply do it for the sake of it. Though at least some of the design principles were there and implemented that was all thrown out near the start of Windows 10 Microsoft Design Language. Things like connected animations have been heavily implemented on Metro for Windows Phone, even back during Zune eras. It wasn't new, the fact that Microsoft themselves raised the bar of UX design that we just took for granted these days that others followed, Material Design from Google for example. Apple Design on the other hand just continue to be really very very consistent, and its even suprising that they are late on the party that they only refresh to more modern flat design on iOS 7. Though they make sure that it was consistent all throughout their portfolio that when Mac OS X El Yosemite came, everything has been updated to new design as much as possible. This isn't the case what Microsoft has been doing since Windows 8. This is why I liked what they did on Vista, they just updated the Design Language pretty much all through, not perfect but its harder to see the traces of Windows XP. Not just on looks alone, but the overall UX has been changed and improved. I liked Aero but we got it for many years already. What I fancy about the flat design is its starkness, practicality, cleanliness, freshness, and focus-on-content approach, also the animations. The problem with the flat design is that if animations are suck or non-existent, then it just feels incomplete. When the flat design has misaligned UI elements that don't conform on grids, it looks unpolished and kids work. When flat design improperly uses typography, it looks unreadable or just looks unprofessional. The problem with the flat design is actually very technical and needs a proper execution, and has to be all consistent. Despite the common misconception of being looks "simple", it's harder to execute a good flat design that won't look ugly or incomplete. This is what Microsoft just didn't much taken so seriously and just throw what it sticks. MDL on Windows 10 just a confusing mash-up of Metro, Aero, and from designs of Google and Apple. It doesn't have a proper identity and even failed at being beautiful. This is what I hope with Fluent Design System, but based on Microsoft approach and culture, not so sure for now. They have 5 main points on Fluent Design System but they miss one very important one, consistency.
  • Agreed. Windows 7 is the most beautiful version of Windows yet, windows 8 seems like they just hired some kindergarten students to do their ui design with crayons.
  • Agree, flat design was the way to go with the metro style introduced in W8😊
  • This looks way better than Apple's child like interface with those huge icons!
  • Great article!
    I'd like to add that the acrylic material, as mentioned in the article, is made up of a series of layers with different effects (backdrop blur, tint, occlusion blend, noise), and that right now the Store is full of apps for the Creator's Update that are advertised as apps with "Acrylic brush!" or "Acrylic effect support!", while they ONLY include the HostBackdropBlur effect (the background with the blur).
    To those developers, stop claiming you support something you don't, and to the users buying into that, stop stop doing that, that's just false advertising.
    I mean, the Acrylic brush APIs aren't even available on the Creator's Update SDK.
  • Really should start doing something with tablet mode.
  • Yes!!!
  • It's sad that my hp stream 7 with windows 8.1 works countless times faster than cherrytrail 4gb tablet with windows 10 in it. Not taking about how ugly it is
  • It's sad that my hp stream 7 with windows 8.1 works countless times faster than cherrytrail 4gb tablet with windows 10 in it. Not taking about how ugly it is
  • c'est de la merde comme le reste de cette interface en toc
  • In the US we say 'Pardon my French' :)
  • So, when is this coming to Windows Mobile?  HAHAHAHAHAHAHAHAHA  I crack myself up sometimes!
  •  Some of the design elements are already present in the Windows Store, Maps, Movies and TV and Groove Music for Windows 10 Mobile in the Fast Ring.  
  • Some of these apps already have the fluent design on Windows 10 (Mobile) Creators Update.
    You just need to update Groove music, Movies & TV, Windows Store, Maps, Wallpaper 10 Studio, etc.
  • They are already available. Take a look in Groove, Maps or MyTube.
  • with the future waves, I hope to see more than just the acrylic material used in windows. The design philosophy of contextual controls and interaction, fluid materials, movement and waves is very akin to materials like non Newtonian fluids which could assist acrylic in making complex yet simple and functional user experiences and designs. a non Newtonian fluid material could act like a liquid and animate until pressure(mouse hover or user interaction) is applied and thus the element in question converts to a solid UI element.
    Its a fun idea to play with and I hope the future waves of fluent design bring these complex design tools front and center.
  • I believe there will be more material to be introduced on next few waves. It would be interesting what they will come up with, but hopefully it will be always have practical use on the design, not just aesthetics. For now I'm concerned about ther overall execution, hopefully that they implement the design consistently, not as chaotic as we have now. The connected animation is something I am waiting to happen univerally on Windows 10, it will improve the feel of Windows 10 and its apps having those.
  • Good article for clarification. Important for MR.
    However, I would appreciate Microsoft to invest in consist UX/UI as well. It is a mess for years already with both Windows and their apps.
  • @Mauro To my knowledge it is Spatial Sound and not Spacial Sound as confirmed by the Windows spell checker while writing this.
  • It reminds me of Spotify's design and it looks GREAT!!!
  • Calculator is also acrylic on non-insider Creators Update. It has very little transparency, but it is there.
  • Hold on...Are those, podcasts in the Groove music app or is that another podcast app?
  • Sure looks like it.  Wonder what that is.  It's not in my Groove on the fast ring.
  • It's the built in Podcast app
  • Built in app? Since when there is a built in app? (besides the old WP7 app?)
  • That GIF is a mockup demo of podcast app. I don't know why its even been confused with Groove when it actually says in the title bar. But yeah, we seriously need to have connected animations implemented since MDL2 on Windows 10, navigating around felt so static like loading a web page. They stepped back from Metro (Windows Phone) where there continuity of pages as you navigate around, which feels smooth, enjoyable, modern and even futuristic.
  • I want Alcantara material...
  • Excuse me but journalists must stop writing about Fluent Design as being exclusive to Fall Creators Update... I'm on Creators Update, not on Insider, and have already most of those Fluent Design on my Lumia 950, my Surface Pro 4 and my PC Tower... Yes, not everywhere but already on all the apps mentioned in this article and even more (Wallpaper 10 Studio for example, since a few weeks BEFORE Creators Update). So, yes, I can prove Wave One is already in process and not waiting for the release of Fall Creators Update...
  • as mentioned in the article
  • Sad they don't upgrade the file explorer with a more modern look
  • How about a wave of consistency in the UI/UX? They can make it as beautiful as they want, if it is an inconsistent mess like we are used to from Microsoft it won't matter.
  • So true! This what I'm really hoping that they will do. Having more fancy effects isn't really what we need on the design of Windows 10, it's the consistency. A lot of Microsoft-own apps don't even conform to their own design "language" as if they are developed by the different company. Microsoft should really take that seriously and if they did, Fluent Design System or whatever they will come up with will looks so polished and complete. If everything is coherent, the design will seriously make the OS environment way more enjoyable and also more comfortable to work on without jarring differences. Especially when Microsoft lately is trying to cater creative professionals with their Surface devices such as Studio. It is not inspiring to work on when the environment just feels slapped with duct tape. Hopefully, on Wave 1 they should achieve that.
  • The UI change I want the most is transparent tiles, like on mobile !
  • As long as it's fast, I used my 8.1 RT tablet yesterday noticably faster than 10 everything is instant, I hope all these UI features don't slow 10 down
  • I think the next elements they need to focus on are shadow, with the curser being the source of light, elements can cast shadows.  This would help when you lost track of your mouse and it would bring a bit of dynimic elements to the ui.  The next material should be hard candy.  Like the old Mac OS buttons used to be like some candy colored transparent gloss.  Might not be for everyone but it could ad some brightness to the UI.  The other option could be metal, but it wouldn't be that interesting of an addition.  Depth they could add actual 3D interactive elements.  Not in the hokey MS Bob way (Windows Holographic), but in a more modern way.  Like selections drop you into the UI.  It would be a little like linked animations but with depth and standardized controls.
  • Wave 2 definitely sounds like it is aimed at AR
  • Love it can't wait to see more devs tackle this design
  • So on the very slow road back to the much better looking days of Vista and Win7 where transparency played a key role and looked a lot better then the dull and boring Win8-10.    
  • No... This is much more. Read the article.
  • no doubt the fluid elements are awesome on windows 10, but Microsoft arrives a little late to the race with no finish line. google already has it apple has more or less similar effects already
  • And?
  • Calculator appears to be pretty fully featured in this design in the regular Creators Update.
  • Reads like a really good way to waste power. Surely it is only a few months since we were all being told that flat was the new way to go, because our old, 3D like themes were old hat and old fashioned? I can't think of anything more annoying than those transitions you showed between the album list and the track listing. So long as there is an option to turn all of this 'form over function' off like the current transparency, I'll be happy.
  • Its funny how the presenter mentioned SNAPCHAT, which is not available on Windows platform...
  • That Connected Animations thing looks amazaing. Not implemented yet tho, I think?
  • As far as I know, no apps have taken advantage of it. The GIF in this article is just an demo app, which is nice since there is a working code but the article mistaken it was Groove Music app, which it isn't. Connect Animations is seriously needed to be implemented on all new apps, at least all Microsoft apps should have it. Since MDL2 on Windows 10, we lost this principle that Metro/Modern on Windows Phone series had (Windows 8.X don't even exactly have connected animations either which Windows 10 UWP based from). Its rather sad that Microsoft tend to pioneer stuff but later they forgotten about it.
  • In other words, the new UI engine wasn't ready so, in Win 8, they sold us on the new and improved cleaner interface that required far less cpu and gpu to paint.  Metro let the user focus on what was important and not be distracted by endless effects.  Clean and simple.  Now that they have had some time to finish the new UI engine 8 years behind schedule, they are bringing back the stuff we had in earlier versions of Windows as if it were something shiny and new.  So clean and simple is out.  Got it.  I wonder how battery life will suffer....
  • Vote up this comment if you want a white accent color for taskbar, start menu, and action center...
  • I wish they would focus on improving the Tablet mode, it is really useless on my Surface. I could care less if a window has depth and looks like a piece of cheap plastic.
  • Yeah, tablet mode leaves a lot to be desired after experiencing Windows 8.1.1 on my Surface Pro. There's a huge list of feedback: https://answers.microsoft.com/en-us/insider/forum/insider_wintp-insider_... https://answers.microsoft.com/en-us/insider/forum/insider_wintp-insider_...
  • After calling the lazy-fugly-flat metro UI "modern"/"beautiful" for several years, microsoft is finally coming back to its senses and improving on the beautiful Aero. Here's hoping these come to live tiles.
  • Fluent Design System est plus qu'un style, c'est un langage immersif interactif
  • Beaucoup de personnes aimeront le Fluent Design, mais demanderont aussi par tardition un style épuré comme Windows 7
  •  While i like the new fluent design, i hate the conscious control scrollbar that disappears. Especially on the phone. I read a lot of books and it would be nice to know where i am in a chapter without moving the screen, especially since the scrollbar is hidden under my scrolling finger and it disappears so quickly. They made it so thin that it is hardly noticeable.  At least make it an option to stay on for reading mode and book apps.
  • Very informative article. Thank you for including the video from Build as well. That really helped answer a lot of questions I would have as a dev ^^