Business

Windows 10 Fluent Design makeover: Microsoft reveals what's coming next

Microsoft offers more design tools to help Windows 10 apps pop out from the screen.

Written by Liam Tung, Contributing Writer May 10, 2018 at 5:57 a.m. PT

Video: Microsoft shows off its latest Windows 10 Fluent Design features.

Microsoft Build 201

At Microsoft's Build conference this week the company's designers have been showing off new Fluent Design tools that Windows 10 developers will be able to use in 2018 to design their UWP apps.

Microsoft introduced Fluent Design last year and has gradually been incorporating it into the Windows 10 shell, features like Task View, as well as Office, Outlook, Mail, and Calendar.

The design system is Microsoft's effort to bridge 2D and 3D graphics, and bring cohesive design to desktops, tablets, and its HoloLens and VR headsets.

First up, the company is introducing a new 'command-bar flyout' feature that will be integrated with text boxes and note-taking apps. The feature takes its lead from Microsoft Word's ribbon and command bar and is coming to OneNote first.

After highlighting text, OneNote automatically generates a collapsed version of a flyout control bar with editing command icons. A right click will produce an expanded version. This bar will also work also with Windows Ink, offering a shortcut to colors and other editing tools.

Microsoft is also updating the Fluent Design UI to support PCs and mice better. Previously it was focused on touchscreen devices like phones and tablets, which require large text, icons and controls for better usability.

However, some users felt the size was too big and so Microsoft is introducing two new UI sizes. The first is a new standard size that automatically resizes UI elements for tablets and PCs, and a new compact size for developers who need an ultra-dense layout across an application.

Another new feature is Z-depth and Shadow, which forms part of Microsoft's work on 2D and 3D graphics to create a layered UI.

The Z refers to a third 'depth' axis Microsoft is adding to the X-axis and Y-axis on a 2D graph. The idea is to make it easier for developers to add depth to their apps to have them pop out from the display.

The feature also automatically creates the right shadow for the app. The bigger the Z-depth, the deeper the shadow. The new depth features tie in with some updates to Microsoft's translucent Acrylic material effect.

Finally, there are changes coming to Fluent Design's color model, which previously had a flat design with a limited palette. Again, having more and richer colors supports Microsoft goal of creating depth and texture to UIs.