With the Fluent Design System, Microsoft is looking to accommodate rich, immersive experiences across devices, including in iOS and Android via apps. Microsoft will roll out Fluent Design capabilities in multiple phases. Developers will get the technology after it has already been tested in real-world solutions.
"We're going from a flat design language ... into the immersive, multidimensional one," said Bojana Ostojic, principal design manager in the Windows devices group. "We're going from small screen and touch to now appreciate the full range of devices and input types, and we're moving beyond just consumption and communication into also creativity and curation."
[ A developer’s guide: Get started with serverless computing. | Microsoft Azure Functions locks in on serverless computing. | Build ’em now! 5 uses for serverless frameworks. ]
The Fluent Design concept features five building blocks: light, depth, motion, material, and scale:
- Light lets developers assemble systems where light provides a specific mood.
- Depth is about spatial sound and visual depth.
- Motion establishes context and continuity of experience.
- Material pertains to touch and helps establish visual hierarchy.
- Scale centers on adaptive, responsive, intelligent UIs for an ecosystem of devices.
Fluent's interaction visualization model works with gestures, inputs, and controls. One visual material, Acrylic, lets developers create visual hierarchy and accommodate different levels of opacity. Fluent Design also features connected animation services as well as conscious controls, providing a responsive, "conscious" UI that takes intent into account. Another feature of Fluent Design, called perspective parallax, deals with depth in UIs.
A planned second design wave will provide 360-degree media playback for multiple modes for playing media, “conscious” headers, speech; z-depth layering, and spatial sound. Microsoft is offering a XAML control gallery for Fluent Design, and it will provide design kits to use Fluent with popular programs, including Adobe's Photoshop, Illustrator, and XD.