New Fluent Design System is building a bold, scalable, universal design language. The system is base on foundational elements — Light, Depth, Motion, Material, and Scale — which will make designs perform beautifully across devices, inputs, and dimensions. And it have to be a step into the future, evolution in sensory experiences.
Fluent represents aesthetic design concept that will allow Microsoft and developers to craft cross-platforms experiences and interactions that are harmonious, modern, inclusive and responsive. Let’s make quick view of the principles of Fluent Design Systems.
Light adds an element of illumination to apps – particularly useful for mixed reality, in which illuminating where you’re gazing serves as a pointer, and helps separate UI elements from virtual environments. Light draws attention, or guides you through an experience.
Depth uses multiple layers to add expression and continuity between elements and objects in the UI using things like parallax effects in mixed and virtual experiences. It helps establish a relationship between UI elements, adds some polish to animations, and can increase the sense of space within an app.
Motion adds animations that interconnect as you navigate throughout an app’s UI. It helps establish continuity as you move between pages, selections, and tasks.
Material controls physical properties of UI elements. The first of these is a frosted acrylic look, with modifiable characteristics. Materials can also dictate how the UI can “bend, stretch, bounce, shatter, and glide” as you interact with them, something that will likely play a greater role as mixed reality becomes more prominent.
Scale lets elements and objects to go beyond two dimensions and adapt themselves according to the size of a screen and affects how apps reshape and present themselves across different devices.
Meanwile, most of the Windows 10 apps from Microsoft already used components of new design concept like the Acrylic Material, Reveal Highlight, Connected Animations, Conscious Controls, and Perspective Parallax. Now Microsoft offers complete documentation of Fluent System including design guidelines and developer references.