What is Microsoft Fluent Design System?


In Short: Fluent Design System (code name Project Neon) is Microsofts’s attempt for a cleaner and beautiful user experience. This project will slowly change the look and feel of all Windows apps. Light, depth, motion, material, and scale are the five pillars upon which Microsoft Fluent Design System is built. The transition to Fluent Design will take place slowly over the course of next few months.

Last Day at ‘Build 2017′ conference Microsoft announced their new design system. In the past few months, we’ve seen some leaks of Project Neon which suggested the basic look and feel of Windows operating system will have a big transition in future. Microsoft Fluent Design is that transition. Some of the elements of Fluent Design will be implemented on Windows 10 in the upcoming Windows 10 Fall Creators Update which will arrive in September.

So, What is MFDS?

Fluent Design System will bring a radical change in the design philosophy of Microsoft. It’s somewhat like the change Material Design brought in the user experience of Android. The change in colors, animation, icons and UI will make Windows much fresher from the existing Metro UI.  With MFDS, Microsoft is helping developers build more “delightful” applications. But, In many ways, the ideas behind Fluent resemble those of Google’s Material Design language. The main purpose here is to give developers access to a single design language that will work well across devices.

Fluent Design System is not just designed for Windows Ecosystem. You will be able to see it in Android, iOS apps by Microsoft and much importantly Fluent Design System will also govern the look of apps compatible with devices like HoloLens.

The rollout of Fluent Design System will be first delivered to the members of Insider program.

Five Pillars of Microsoft Fluent Design System
Five Pillars of Microsoft Fluent Design System
  • Light: Controls lighting, shadows and helps user for distraction free experience.
  • Depth: Controls Parallax effect and gives dimensions to the window.
  • Motion: Controls the opening/closing of a window and to show a connection and relation between different elements and objects.
  • Material: Manifestation of the texture of an element and the change it brings on interaction.
  • Scale: Adapting the elements accordingly during the change in dimension and screen size.
Windows 10 – Metro UI
Material Design by Google


Leave a Reply