A revealing UI

Part of the ‘Light’ element of Fluent Design, Reveal is the name given to the glow given off by the cursor that highlights borders and other elements of the interface as the cursor moves over them, as demonstrated here in the People app. The cursor also pulses with light when the user clicks or taps.

The effect is also due to be added to the Start Menu and the Taskbar.

Lighting up controls

A Microsoft mock-up shows how Fluent Design’s Light feature could be used to highlight the controls in a 360-degree video.

Finger on the pulse

Another Microsoft demo, highlighting the Reveal glow and the pulse of light when tapping on tiles.

Animated experience

Here is a mock-up of how the People app could use animation and the Reveal effect to create a more intuitive and visually pleasing experience.

Material design

This orange box is an example of Acrylic, the first and only material to be introduced by Microsoft to date. It has the look of frosted plastic, a translucent material made almost opaque by a grainy Gaussian blur.

It can be used throughout app interfaces, with developers adjusting its appearance, color and opacity. Where computers have a sufficiently powerful GPU, pixel shaders will be used to improve the look of the translucent borders and other material effects.

Acrylic in action

Here you can see Acrylic as the background to the Start Menu.

Maps gets material

In the Maps app, the edge of the map is visible through the translucent Acrylic material used for the bar at the top of the Window. Acrylic can also be found in Photos, Maps and Calculator.

Fluent Design in motion

An example of the type of animation that typifies the Motion facet of the Fluent Design System.

As the user scrolls down in the Groove Music App, the playlist cover shrinks, allowing the user to focus on the song listings. You can also see the Acrylic material at the top of the page.

Fresh perspective

To focus the user’s attention and create an aesthetically pleasing effect, certain elements of the interface will play with perspective, as can be seen from this parallax scrolling in the image when scrolling down in the Windows Store.

Smooth transitions

An example of how animation could be used to transition smoothly between menus in Windows 10’s forthcoming Timeline feature.

Conveying information

A variety of animations are used to convey information in this Microsoft mock-up of a dashboard using Fluent Design.

Minimalist design

Here’s Microsoft’s demo of a simple animation in a voice recorder app.

Added depth

Microsoft hasn’t rolled out many examples of how depth might be used in Fluent Design to date, but here is an a Microsoft mock-up showing how it could make information stand out in a calendar app.

Beneath the surface

Another demonstration of how depth could be used within apps from a Microsoft demo.

The write stuff

The Fluent Design ethos should result in Windows 10 apps having improved support for a wider range of inputs including voice, touch and digital pens.