The Fluent Design System will make its proper debut with the Fall Creators Update in October. So how’s the new design being used to far throughout Microsoft’s own OS and apps?
Microsoft’s Fluent Design System is easily one of Windows 10’s most exciting new announcements this year. It’s an entirely new vision for Windows, rethinking its design in almost every single way. Microsoft revealed Fluent Design earlier this year because with the Fall Creators Update, Microsoft will be implementing a lot of the first wave of Fluent Design into the system and in apps.
We’re a few months from the release of the Fall Creators Update, so I wanted to see how Fluent Design is coming along so far. Now, of course, there’s still plenty of development left, so Microsoft has plenty of time to continue adding Fluent Design to the OS. This is just what I’ve noticed so far from the previews Microsoft has released.
Microsoft outlined five different areas of design for its first wave of Fluent Design; Material, Light, Scale, Depth, and Motion. Not all of these elements will be noticeable with the Fall Creators Update, and none of it will be 100 percent ready before the end of this year.
Acrylic is the most common Fluent Design element that’s showing up across apps and the OS itself with the Fall Creators Update. It is densely translucent, letting the background and windows behind the current focus blur through. In the latest Insider Preview builds, we can see Acrylic in several locations, including the Start menu and Action Center. It’s also available in My People when selecting a contact’s details. Those are the only OS areas where Acrylic appears to have been applied for now.
Acrylic is more commonly used within apps, and Microsoft has been painting several of its first party apps in Acrylic. The first and most noteworthy app to feature Acrylic is Groove Music, which has featured Acrylic designs since the Creators Update earlier this year. Microsoft still has several more designs to improve upon within the Groove Music app, including making the app borderless.
Calculator, People, Photos, and Maps are also apps where you can find Acrylic designs. The Photos and Maps app has the Acrylic design applied to the top of the window, where the title bar and navigation menus are. The People app appears to be coated 100 percent in Acrylic for some unknown reason. The Calculator app is easily the best-looking app with Acrylic on Windows 10 right now. Acrylic can also be found in popup notifications that appear on the desktop.
Microsoft has plans to bring Acrylic to even more areas of the system and within apps with the Fall Creators Update. For example, Microsoft Edge is set to get the full Acrylic treatment soon, hopefully in time for release.
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, Reveal is only available in a few OS locations and is again most commonly found within apps. You can find Reveal in the Action Center and My People hub, and in XAML based lists and menus.
Microsoft has plans on bringing Reveal to the Taskbar and Start menu too, but it doesn’t look like that’ll be ready in time for the Fall Creators Update. If that’s the case, this will cause a noticeable inconsistency between some OS elements when mousing over them. In some areas, the Reveal effect will not be present, but in others, it will. I don’t think that makes for a good user experience.
You can also find Reveal in some parts of Microsoft Edge, as well as Groove Music, Calculator, People, and Settings. Reveal is also enabled on popup notifications, but is less noticeable due to the popup notifications having such a thin border.
As of right now, the use of Reveal in Windows 10 feels very random. Of course, we’re still several weeks away from the Fall Creators Update being final, but if Microsoft can’t bring Reveal to the Taskbar and Start menu in time, we’re going to be in for a very inconsistent design with the Fall Creators Update.
Depth and Motion
Depth and Motion are easily 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 effects in the Store app, where some of the bigger images will scroll slower than the rest of the page. It’s a cool, parallax effect that gives the page some much-needed motion. I’ve also noticed some minor motion affects 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, which is exactly what Motion is designed to do. 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.
Fluent Design is a journey
It’s worth noting that none of the design elements are going to be 100 percent implemented in time for the Fall Creators Update. 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 releasing earlier this year.
Hopefully, this doesn’t mean the next couple of Windows 10 releases are inconsistent with old and new elements being mushed together. One of Windows 10’s weak points is definitely its design language, but with the Fluent Design System, that’s going to change. I just hope Microsoft is able to get Reveal into Start and Taskbar before the Fall Creators Update is released.
There’s a lot to Windows and Fluent Design is being slowly implemented across the OS, so if there’s something you’ve noticed that I missed, please let me know!