Microsoft Fluent Design System
Microsoft introduced the Fluent Design 3 years back as an open design system. Fluent Design is intended to deliver intuitive, harmonious, responsive, and inclusive cross-device experiences and interactions for the Microsoft products. As a multi-product company bringing consistency across the different problems is a huge problem. This is where the design systems to come into rescue. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
The History:
The idea of building a design system at Microsoft started a decade ago. Microsoft then started building lots of enterprise and consumer-centric products. Microsoft has a huge design team and they are responsible for all the ease of use user interface across the different product lines of Microsoft. But they faced a real challenge of scaling and spanning the designs and experiences to different products and disciplines as they grow.
The designers at Microsoft have product level expertise, innovation, and experiences. So, the designers at Microsoft decided to come together as a single discipline and started working closely with engineers to build a design culture across the company.
Just like product design, we’re looking at our design system as a design challenge that can solve problems for our users. A human-centered approach. But the users this time are our designers, design teams, engineers, and product leaders.
– Joseph McLaughlin, Partner Director of Design, Microsoft
Open Design System:
A robust design system will benefit everyone involved in the process. This helps in creating more user-friendly and coherent product experiences across all platforms. In the year of 2017, during the Microsoft Build – an annual event for developers across the globe, Microsoft announced Fluent as the new design language with a focus on bridging the user experience across multiple devices. This open design system is built with great care by consolidating all the best practices used by different teams at Microsoft. The core principles of the Fluent design system are light, depth, motion, materials, and scale.
- Light: Light attracts users. Microsoft uses light to illuminate the information for user interactions during selection and navigation. This brings in the necessary contrast between the foreground and the background.
- Depth: Using the Z-axis property fluent design adds soft shadows for layered elements creating a sense of depth and visual hierarchy.
- Motion: Motion brings in smooth animation and transition effects while switching between different screens and windows. This draws the user’s attention to the next logical step eliminating confusion in the visual hierarchy.
- Material: Material focuses on user interactions. It offers a playful feel during the selection and navigation experience and tempting the users to interact.
- Scale: Making the design responsive that works well with all kinds of devices that come with different screen resolutions and delivering a consistent experience across Windows as a whole.
Fluent design helps in optimizing the process for both designers and developers through a shared foundation. Being logical and consistent across the application on different platforms helps in reducing the cognitive load and let the users focus on accomplishing what they want instead of how to do. It is all about bringing the collaboration between the designers and developers together to create best in class experience that in turn empowers the users.
What’s new?
The fluent design offers support to Web, Windows, iOS, Android, macOS platforms. Also, Fluent Design components are available for tools like Sketch, Adobe Xd, Figma, and Frameworks like React.
Fluent UI:
Fluent UI was previously known as Fabric UI. It is a collection of UX frameworks that Microsoft uses to create experience across the different apps in Microsoft 365 suite. It’s an open-source shared codebase that follows the guidelines of Fluent Design.
🔗 Read more
Cross-platform development:
Fluent as an open-source design system, it offers React components for cross-platform application development. The cross-platform controls are available in GitHub.
Dual Screen Support:
As there are different dual-screen devices available in the market and many devices yet to come, the fluent design system formulated a set of guidelines to design for dual-screen devices.
🔗 Read more
WinUI:
WinUI is the modern native UI platform of Windows. WinUI offers a state-of-the-art UI framework for all Windows apps across both Win32 and UWP. It embodies Fluent Design to enable intuitive, accessible, and powerful experiences and the latest user interface patterns.
🔗 Read more
📣 Get free icons for your websites and apps. Read more
Who is using Fluent Design System?
At present, Fluent Design is being widely used by a wide range of Windows 10 devices (i.e. Universal Windows Platform (UWP) Apps). It’s also being used in office 365 products. Microsoft encourages the developers and companies who are working to build tools and services for Microsoft’s products to use the fluent design system to bring consistency across the products.
