A look at Microsoft's progress bringing Fluent Design to Windows 10

Microsoft's Fluent Design System is easily one of Windows 10's more exciting new projects. It's an entirely new vision for Windows, rethinking its design in almost every single way. Microsoft revealed Fluent Design in 2017, and it announced that implementing its new design language across all its products will take time. It's a journey that will evolve and improve — which is what we're taking a look at today.

We're months into the development of Redstone 5, so I wanted to see how Fluent Design is coming along so far. There's still plenty to do, but things have improved a lot since we last checked in on the progress of Fluent Design.

Microsoft outlined five different areas of design for its first wave of Fluent Design: material, light, scale, depth, and motion. More of these elements showed up throughout the development of April 2018 Update, or Redstone 4, with continued improvements expected throughout the development of the upcoming Redstone 5 release.

Material (Acrylic)

Acrylic is the most common Fluent Design element that's showing up across apps and the OS itself. It is densely translucent, letting the background and windows behind the current focus blur through. In the latest releases, we can see Acrylic in several locations, including the Start menu, Taskbar, Action Center and My People.

You can also find Acrylic blue effects in the title bar of apps when Sets is enabled now as well, which is something many Insiders have been asking for.

Acrylic is more commonly used within apps, and Microsoft has been painting several of its first-party apps in Acrylic. The Settings app features Acrylic in the sidebar, and Microsoft Edge features Acrylic in its title bar. You can also find Acrylic in Paint 3D and the Skype UWP app.

Calculator, Photos, and Maps are also apps where you can find Acrylic elements. The Maps app has the Acrylic style applied to the top of the window, where the title bar and navigation menus are. Photos has it at the top as well, whereas previous it was featured dominantly in the background of the app.

The Calculator app is easily the best-looking app with Acrylic on Windows 10 right now. Acrylic can also be found in pop-up notifications that appear on the desktop. You can now also find Acrylic and Reveal effects in the Microsoft Edge address bar, which look excellent.

Timeline now features a blurred background when opened in the latest Redstone 5 builds, which differs from the non-blurred background found in Redstone 4.

Light (Reveal)

Reveal is another new design element being introduced with Fluent Design, which follows the cursor when hovering over certain elements within the OS and apps. As of right now, you can find Reveal in the Action Center, Start menu and My People hub, and in XAML based lists and menus.

Microsoft plans to bring Reveal to the Taskbar eventually, but it doesn't look like that'll be for quite some time. Right now, the implementations of Reveal are very inconsistent throughout the OS, with some menus having it, and others not.

Unfortunately, it seems the consistency of the Reveal effect is a little all over the place. In some areas, the Reveal effects bounce light off of surrounding buttons and UI elements, and in other areas they don't. This is incredibly jarring and is something I hope Microsoft gets around to rectifying soon.

You can also find Reveal in some parts of Microsoft Edge, including the address bar, tabs, drop-down Settings menu, and even the Edge Hub. Reveal effects are present in Groove Music, Calculator, People, and Settings. Reveal is also enabled on pop-up notifications but is less noticeable due to the alerts having such a thin border.

The use of Reveal is slowly becoming more consistent with each new Insider build. Redstone 4 is the first Windows 10 update where Reveal is used consistently throughout inbox apps and the Shell. This should improve with Redstone 5.

Depth, Parallax and Motion

Depth, Parallax and Motion are the rarest new design elements being implemented right now. As far as I can tell, there are no known instances where motion has been applied to the OS. I've only found it sparsely in a couple of Microsoft's first-party apps. Motion is the element of Fluent Design that's supposed to give Windows 10 some wow factor when jumping between different areas of an app or the system.

I've found Depth and Parallax effects in the Store app, where some of the bigger images will scroll slower than the rest of the page. It's a cool effect that gives the page some much-needed motion. I've also noticed some minor motion effects in Groove Music and the Movies & TV apps.

The Photos app with Story Remix is where you can find the most of Microsoft's new Motion design. It animates in and out of areas of the app beautifully and fluidly. Microsoft has a lot of work to do getting Motion implemented throughout the OS and in the rest of its apps, but progress so far appears to be good.

Dark and Light modes

Dark and light modes within Windows 10 aren't strictly part of the Fluent Design System, however, they are big enough design choices that it's worth mentioning here. By default, Microsoft sets "light" as the default mode for Windows 10, which is interesting because Microsoft's light mode for Windows 10 is inconsistent. Light mode still features a dark Start, Taskbar and Action Center, which look out of place in light mode.

In regards to dark mode, Microsoft is finally getting around to adding a dark mode to the File Explore and context menus, meaning dark mode is finally a lot more consistent when enabled. It's still not perfect, with lots of inbox apps using their own shades of dark, making things feel inconsistent. Hopefully Microsoft can get around to unifying the shades of dark soon.

Fluent Design is an ongoing journey

The implementations of Fluent Design began with the Fall Creators Update, but we're far from it being complete. Microsoft was very clear that its new design language is a journey that will take several releases to fully realize. The Fall Creators Update is technically the second step in that journey, with the first step being the Creators Update that was released in early 2017. This means Redstone 4 and Redstone 5 will continue to see Fluent Design improvements.

One of Windows 10's weak points is definitely its design language, but with Fluent Design that's starting to change. There's a lot to Windows, and Fluent Design is being slowly implemented across the OS. If there's something you've noticed that I missed, please let me know. So far, the work Microsoft has done with the latest Redstone 4 preview builds is fantastic, and I can't wait to see it continue to evolve.

Updated June 11 2018: We updated this post to detail Microsoft's recent progress in bringing Fluent Design to Windows 10.

Zac Bowden
Senior Editor

Zac Bowden is a Senior Editor at Windows Central. Bringing you exclusive coverage into the world of Windows 10 on PCs, tablets, phones, and more. Also an avid collector of rare Microsoft prototype devices! Keep in touch on Twitter: @zacbowden.

102 Comments
  • That depth and motion gif is so trippy! 😂. Really like how this is all coming along; can't wait for the release! :D
  • "It's an entirely new vision for Windows" Has the author of this article ever even used Windows Vista? I've been poking around through this "new" look, and it is basically just a retread of Vista design implemented into 10 with lots of improvements. It looks fine, but the way the article starts out gives an impression of ignorance about the past.
  • Literally nothing like Vista. Vista design was Aero. Fluent Design has no Aero elements at all.
  • There is a good resemblance to the past with the glassy mouseovers. It may have been called something else (Aero), but these design elements aren't anything new to the eyes.
  • You may need new eyes.
  • Really, where was acrylic and reveal in Vista again because I can't remember seeing them?
  • To be fair, Acrylic does *look* a lot like the blurred glass from Vista/7's Aero. Reveal looks similar to the lighting effect on the Taskbar icons in 7.
  • Fluent is an obviously much improved design compared to Aero, but the surface level visual appearance is definitely a throwback to the past as far as Windows design, with improvements and additional flair. Plus, it was Windows phone 7 and 7.5 that introduced much of that "motion", but without photographic and blur images and transitions. It was simple, but it worked well and was oh so smooth.
  • Personal opinion, I much prefer the look of Vista to anything since but fluent design is growing on me
  • Translucence
  • So you didn't notice one of the core features of Aero which was transparent windows, which they have simply given a different name ?
  • Yea Zac, because the brand name is whats important and not what actually it is.
  • Exactly, nothing like Aero yet people see transparency and immediately say that's Aero with a different name.
  • The notepad still has aero design. MS is doing a good job and we will see all these deployed and consistent across all os.
  • why people like paul even follow microsoft...foolish people.
  • i was one of the rare big fans of vista, ran it on a at the time 6 year old machine and a newly built machine, no way is fluent design anything like vista.
  • I concur. I still like the live wallpapers, small videos as a wallpaper that really looked awesome in Vista.
  • Light in the start menu look great in the ch9 video
  • "The Calculator app is easily the best-looking app with Acrylic on Windows 10 right now."   I think it's the worst one. Absolutely horrible to use with everything being transparent. The idea behind Fluent Design is good but the overuse of it may make the experience horrible, and the calculator is a good example of that. Apps like Groove or the Xbox make better use of it (even though the current use of light grey for everything is horrible).
  • Personally, I find it fitting for Calculator since its a type of app that is best as a small window. While People app is really...really bad, not just because of making the whole window Acrylic, but more on because of bad UI layout still. The Acrylic did make it worse. Which I agree that not everything should be transparent/translucent as they can become more distracting or even bland. Groove Music is indeed one of the best implementation so far. The only problem I have is that the Titlebar and the Hamburger menu don't extend up to the top of the window border, leaving this odd gap where Titlebar is, so unpolished. This is something that they must work on since we are witnessing the mishmash of MDL2 and Fluent Design incompletely. Hopefully, this won't be the case before the release, which I am concerned with since Microsoft isn't really great at accomplishing overall consistent design and completeness of polish.
  • I do think that if the Fluent design was consistent and everywhere in the OS then it would look better. I agree that the layout of some apps could use work but, for me at least, I would prefer more consistency in the UI design first.
  • The layout of apps is literally part of the UI design, so what in the living hell do you mean by "UI design" when you use that terminology in such an oxymoronic manner? It's literally the most obvious aspect of UI design that a user notices when they open up an application. There are 2 other usable desktop OSes on the market, and one of them has a plethora of desktop environments available to it. The other is an example for excellent UI/UX engineering. It doesn't take long to look at a computer and just know what a bad UI is, these days. You may not like all of the design decisions that Apple has made in macOS, but that does not make them bad or inconsistent. What Microsoft has on display, IS chock full of bad and inconsistent design decisions. The entire OS is a cesspool of clashing design language, and they are being extremely sluggish in terms of getting these things consolidated. Even the most simple of Windows Applications/Components - like the Group Policy Editor, Registry Editor, Notepad, WordPad, Snipping Tool, PowerShell ISE (which has AWFUL performance, BTW), Math Input Panel, Disk Optimization Tool, Task Scheduler, Resource Monitor, Event Viewer, Character Map, Steps Recorder, and Remote Desktop Connection haven't been updated to UWP. These are staples in the OS. They are built-in applications and utilities that perform needed functions or are used frequently for their utility. These should be priority uno when you are doing a UI refresh. You cannot control what 3rd party developers deliver, but you can control the base user experience of your operating platform. Microsoft is too lazy even for that. You can rewrite many of these applications for UWP in a week or less. I think this has less to do with technical hurdles, and a lot more to do with the culture in Microsoft. I think it isn't getting done because they simply don't care enough to get it done. They only care about the news cycle now. They are treating Windows 10 the way Samsung treats phones, now, except this isn't some passing FAD that users will "upgrade" to something new (and possibly completely different, running a completely different platform) next year. I was really hoping that Windows 10 would be that chance to ditch Apple, but there is absolutely no way that I could limit myself to only using Windows 10 as a computing platform. Gaming? Absolutely. But beyond that... I need a Mac. I cannot use Windows as a productivity platform. I can barely stand to look at it.
  • Those centred headings in action centre really annoy me on insider builds. So damn ugly
  • Yeah, they really look odd, especially when almost everything is left-aligned. I don't know why they even tried this in the first place. The card-like style of Action Center is fine, but that centered header just don't really fit at all, even Apple doesn't do this even their UI have a lot of centered-align titles and headers.
  • Hopefully those changes don't stay. Almost every change they made to action centre makes it look worse lol
  • Maybe it makes more sense contextually on HoloLens or mobile?
  • Looking good! Though hopefully....hopefully, that they will manage to implement the wave 1 of Fluent Design for Falls Creators Update completely throughout the OS, and hopefully all are consistent. Crossing my multiple-fingers with this. The Motion aspect of Fluent Design is indeed still where a lot of work is needed, especially Connected Animations which are needed for all new apps for next release. It's one of the aspects that they threw out to the window when they started Windows 10 with MDL2 after Modern/Metro from Windows Phone (not the Windows 8.X which is felt like another flavour of Modern/Metro implementation). I'm not counting the current animations on Windows Store or Groove Music to be Connected Animations of Fluent Design since they don't really have a proper and smooth continuity from one page to another. The Photos app is the only working example here at the moment, only they have to work on the performance of it which is still slow to react and load the following instance (not the speed of animation). In terms of Acrylic (blur) implementation, this also kinda needs a bit of work and care. They tend to overuse it like on People app, which is still ugly because they still left with unpolished UI layout, and putting blur to the whole window makes it even more like an amateur rush job. Calculator is almost perfect though, the only gripe I have is the typography in the header title which felt a bit off. In general, there is still UI inconsistencies that have to be fixed. Not the Fluent Design itself as a whole which at the moment is mostly just a facelift, but things like Hamburger menus tend to have different styles and behaviors even across Microsoft own apps. There is still no swipe gesture except for Groove which is still an afterthought implementation. 3rd-party apps like Windows Central, MSPoweruser, and MyerSplash have almost perfect implementation of swipe gesture for Hamburger. For connected animations example, myTube is the one still excels at this way before Fluent Design ever introduced, with nicely choreographed, consistent, smooth and fast enough animations that really make the experience better.  Lastly, the 1px borders on menus and window still look odd and even more odd with the implementation of Acrylic and Light Reveal. It just doesn't belong anymore. Action Center, for example, having that 1px border while the Taskbar doesn't have which looks cleaner. Together, that border clash a bit on Taskbar that doesn't have a border.
  • I agree, my biggest gripe with the FC update right now are those ugly 1px window borders. I really hope Microsoft removes them soon.
  • So how the fluent design usage would affect system resources? Are we going to have slower computers after the update? Will the FC update be optional or mandatory meaning having some security elements?
  • no problem at all on my tablet with atom z37357
  • The FCU can be postponed for 35 days, after that it's mandatory.
  • For your kind information Acrylic is not same as Material. One type of Material is Acrylic. In future there will be many Materials. Same goes for Lights.
  • For your kind information Acrylic is not same as Material. One type of Material is Acrylic. In future there will be many Materials. Same goes for Lights
  • Nice background you have there. I have been using that background since 2013.
  • Cant get video to play...getting error message on Edge. It happens to many of other videos, mainly on windowscentral.com!!! any solution?
  • Probably best to ask in the forum as someone else may be getting the same issue.
  • So, nothing new with Microsoft: coming soon and a bit comes a bit earlier
  • And a lot comes never 😄
  • The way the calculator looks with acrylic is really nice and calms me down (that might just be because of the background), but the first Reveal gif makes me feel slightly sick for some reason. Anyway, Fluent Design is still exciting. I wonder exactly how long it will take for everything to be fluent, if that is possible.
  • Light feature can bee seen in Calculator (non-insiders) on RS2.
  • I don't mind the Parallax, but the Light(Reveal) and Gaussian Blur seem awful to me. I still think the Tiles