Microsoft brings its Fluent Design system to the web


Last month at Build 2017, Microsoft introduced brand new design language called the Fluent Design system. and it’s damn sure to arrive in Windows 10 with upcoming Windows 10 Fall Creators Update, and they’re also about to bring it on the web. The company rolled out a major update to its Web Framework with all the new Fluent Design components and it looks really stunning.

Basically, Microsoft’s Fluent Design system consists of 5 different components: Depth, Motion, Scale, Material, and Light as you see in below image. for now, The updated Web Framework includes 4 of these components, but the Scale component is arriving very sooner. from The company’s official website for the Web Framework, it includes some really beautiful demos of how the Fluent Design would look on, 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. it means Microsoft is all set to rock with their new stunning designs on the web.

And as per the video from Microsoft, there’s the Conscious Header effect in action. this small and effective changes 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 and hope you’ll find it likely.

Microsoft is now bringing the Fluent Design to the web which is quite huge and very impressive itself. now Microsoft needs to make sure that users get a consistent experience across all of their devices and by bringing Fluent design to the web, it’s quite possible as per announcement by Microsoft until this day. Of course, it’ll probably take too much time like few months or few years until Microsoft starts finally implementing the Fluent design on its own services for the web so don’t get that much of excited now.

And yes, you’ll definitely get new updates on Fluent Design of Microsoft’s Web Framework here; so till then, you can read the documentation for all components here. and yes You cannot obviously use this like you would with something like Bootstrap, as this is restricted to Microsoft employees and partner. till then stay tuned to InsidersArena for more recent Updates.