Microsoft brings its Fluent Design system to the web

At Build 2017, Microsoft introduced a brand new design language for its ecosystem: the Fluent Design system. Fluent Design is set to arrive in Windows 10 with the upcoming Windows 10 Fall creators Update, and Microsoft is also bringing it to the web. The company today rolled out a major update to its Web Framework with all the new Fluent Design components and it looks really promising.

Microsoft’s Fluent Design system consists of 5 different components: Depth, Motion, Scale, Material, and Light. The updated Web Framework includes 4 of these components, but the Scale component is arriving later. The company’s official website for the Web Framework includes some really beautiful demos of how the Fluent Design would look on Microsoft.com, the Microsoft Account dashboard, and the Microsoft Store. There are also a couple of interactive demos that web developers and designers can play around with it, including a demo for the Depth component and one for the Reveal effect from the Light component.

Here’s a concept showing how Microsoft.com would look with Fluent Design:

https://youtu.be/oJnnznK_4-g

And on the following video, you can see the Conscious Header effect in action. This effect can be found in Windows 10’s Groove Music app, where the header collapses with a neat animation when the user scrolls on a page.

https://www.youtube.com/watch?v=i0atXrZswwc&feature=youtu.be

Microsoft bringing the Fluent Design to the web is definitely quite huge. The company needs to make sure users get a consistent experience across all of their devices, and by bringing Fluent Design to the web, that’ll certainly be possible. Of course, it’ll probably take a few months or even years until Microsoft starts implementing Fluent Design on its own services for the web, so don’t get too excited just yet.

You can find out more about Fluent Design on Microsoft’s Web Framework here, and you can read the documentation for all the components here. You can’t obviously use this like you would with something like Bootstrap, as this is restricted to Microsoft employees and partners.