Insights UI design

Fluent Design System – A Quick Introduction

An efficient design system for a complex world!

Fluent Design System, as they call it, is the modern design tweak from Microsoft, and it is proposed to change the traditional design beliefs of Windows. It features vibrant interfaces, helps building beautiful and expressive apps with fluidity.

The Fluent Design is a transformation to the future of sensory experiences. Similar to Google's Material Design, Fluent Design brings some physical elements to the digital environment. The touch or keyboard will not be alone in the world of Fluent Design. The Surface Dials, pen, gestures, gaze, and even presence are part of the system. The Fundamentals of Fluent Design will provide a new set of guidelines to deliver more innovative and pleasant experiences for the users.

Fundamentals of the Fluent Design System

The FDS primarily consists of five building blocks such as Light, Depth, Motion, Material, and Scale. With the subtle changes, it will give an impression that the design/elements are moving during the interactions.

1.0 Light

FDS suggests providing a component for lighting up the app. The user can quickly identify where they are standing by emphasizing the point by using color or shades. It helps to extend the information and guide them through their navigation. Allow users to focus on the primary objectives.

Light - Illuminate the information which helps to separate the UI elements.

2.0 Depth

Layers create depth. It adds to building a connection between the interface elements in the app. Depth will provide 3D viewing experience in a 2D app.

Depth provides the connection between elements with a multi-dimensional experience.

3.0 Motion

Motion is that crafty transition that makes the design feel like it is impelling during interactions. The movement will keep your focus on the content by providing the continuity.

Engage the users with subtle animations.

4.0 Material

It provides visual gimmicks by translating the material qualities to digital environments. Materials can manage how the UI can “bend, stretch, bounce, shatter and glide” as and when a user interacts with them.

The concept transforms the "material" qualities to the UI elements.

5.0 Scale

FDS from Microsoft changes design systems to further dimensions than 2D. It will serve the apps to provide an inter scalability across the devices. It is just not the scale by height or width, but the medium. The Scale is intended to go beyond two dimensions as well as the size of the device and reshape and presents itself on the screen.

Scaling the design system from 0D to 3D

Supported devices

The Fluent update is widely available for all the Microsoft devices including tablets, desktop pcs, laptops, phones, and VR devices. FDS also supports inputs such as speak, type, touch, pen, and gaze.

When will I get the update?

The windows have already updated it in a couple of apps on Windows 10. The Movies & TV apps have both received a switch with the Fluent Design UI. The Fall Creators Update, Microsoft's next significant update for Windows 10 ships in October 2017.

Don't expect a massive change at once, Fluent describes as a series of ‘waves,’ and each wave will introduce new features and UI elements.

There’s a multi-sensory movement in design. We type, touch, ink, and speak. Devices surround us. It is an opportunity to look at a complex world and make it more eloquent.
Tim Allen, Partner Director of Design

Are you building a product or a positive experience for your user this year? Tell us on Twitter: @Domyinc.

Manikuttan TK

Manager UI, Domy Innovations Cafe

Bangalore


Read on

Leave a comment

We would love to hear from you, and we appreciate the good and the bad.

Feel free to chat when you have a requirement!