See Windows 10’s new look: Microsoft’s Fluent Design System in action
Image 1 of 16
Windows, but with a fresh face
Windows, but with a fresh face
Windows 10 will soon look and feel different, courtesy of Microsoft’s new Fluent Design System.
The Fluent Design System will overhaul the OS not only to be more visually appealing, but also to make its interfaces more intuitive to use.
Building on the touch-first ethos of Microsoft’s earlier Project Neon, the Fluent Design System is aimed at creating an OS that works across all sorts of Windows devices, encompassing PCs, phones, tablets, and VR and AR headsets.
The overhaul will add a design that is more distinctive than Project Neon, adding light, depth, motion, and the quality of physical materials to Windows’ UI and apps. UI elements will also scale to remain usable across different devices, whether displayed on a widescreen monitor or a pocket-sized phone.
This new look will be phased in over time, with the first iteration of Fluent design already popping up in some apps, and due to be more widely introduced with the release of the Fall Creators Update in October. Fluent Design will not just inform the look and feel of Windows, but Microsoft has also released guidelines so third-party developers can incorporate it into their software.
Here’s what Microsoft’s Fluent Design System looks like.
A revealing UI
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
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
Finger on the pulse
Another Microsoft demo, highlighting the Reveal glow and the pulse of light when tapping on tiles.
Animated experience
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
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
Acrylic in action
Here you can see Acrylic as the background to the Start Menu.
Maps gets material
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
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
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
Smooth transitions
An example of how animation could be used to transition smoothly between menus in Windows 10’s forthcoming Timeline feature.
Conveying information
Conveying information
A variety of animations are used to convey information in this Microsoft mock-up of a dashboard using Fluent Design.
Minimalist design
Minimalist design
Here’s Microsoft’s demo of a simple animation in a voice recorder app.
Added depth
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
Beneath the surface
Another demonstration of how depth could be used within apps from a Microsoft demo.
The write stuff
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.
