Codenamed Project Neon, Microsoft’s Fluent Design system was the new design language that Microsoft adopted in 2017. It was announced at Build 2017 and is a long-term project. Some initial effects like the “Acrylic” Translucency and the “Reveal” effects made its way to Windows 10 with the Fall Creators update which was released in October 2017.
Fluent Design is particularly based on 5 key aspects:Â Light, Depth, Motion, Material, and Scale.
The function of Light is to illuminate a particular area when the need comes. If a person is hovering the mouse pointer over a particular icon or menu, it gets illuminated with some cool animation particularly a white circular pattern over the menu.
Depth, as the name suggests, is used to differentiate two or more objects or Windows from each other by creating a depth effect by showing shadows. It uses the Z-axis and layering technique for depth effect.
Motion creates a continuity effect by establishing a relationship between certain UI elements. It is responsible for animations and transitions.
Material refers to the Acrylic translucency which creates a blurred effect. Different opacities are used to make it look more natural. Transparency and blurring depend on certain hierarchy. A more prominent window will have higher Acrylic background than a less prominent window.
Fluent Design System in Windows 10 April 2018 Update
Windows Shell will gain a lot from the evolution of Fluent Design. Reveal effects and Acrylic effects are now more prominent in important areas like the Start menu. It is available in both the app list and the Live Tiles. Microsoft received a lot of feedback from the users to make the Reveal effects subtle and Microsoft has done just that. But the reveal effects are still noticeable in a good way.
The Taskbar finally gets some Acrylic effects and also has a chance of getting Reveal effects. Moving on to the Action Centre and the People Hub. Both of these received a lot of Acrylic blur effects and in fact, these effects have now become a major factor in the UI redesign.
The Settings app already had a lot of Acrylic and Reveal effects and with the Windows 10 April 2018 Update, it is getting more of these effects. Settings app looks a lot more modern now. Switching on the Battery Life will turn off these effects to conserve battery life. There is also an option to turn these off completely to improve the performance of lesser powerful PCs.
Microsoft Edge received the Acrylic effect in the Title bar in the Fall Creators update and now it looks to be cleaner and modern especially in the dark mode. Reveal effect is now present in prominent parts of Edge browser like in the Navigation bar.
Cortana received only some minor Fluent Design effects. Reveal effect is present and can be seen if the sidebar is not collapsed. The Acrylic effect seems to be missing when launching Cortana.
The Touch keyboard received Acrylic blur effects but it didn’t receive the reveal effects probably because it doesn’t make much sense with the touch keyboard as there is nothing to reveal here since the user touches the particular key to interact with it. But the emoji panel received both Acrylic and Reveal effects since people use emoji panel in both touch and non-touch input methods.
Acrylic and Reveal effects are not just available in first-party Windows applications but also in many menus and icons in the operating system. Though we only saw Acrylic and Reveal effects, this isn’t the only part of the Fluent Design System. Microsoft is moving slowly with this new design language. It would take years to see a substantial change in the overall design of the operating system. Fluent Design System is more suited for Mixed Reality where these effects make more sense. This might be the reason why Microsoft is moving slowly with this new design language. Once Mixed Reality becomes more mainstream, Fluent Design will become more important and Microsoft would then concentrate more on this.
We hope to hear something about the Fluent Design System at Build 2018 as it has been a year since we first saw this new design language.
