Fluent UI

Creating an intuitive and above all pretty user interface is not an easy task. What’s more, companies such as Microsoft and Google are trying to maintain a consistent design to lower the threshold of entry for users and make it easier to use their wide range of apps. For this reason, developers often turn to ready-made frameworks, such as Fluent UI or Material Design, which reduce UI development time and allow integration with the most popular products.

What is Fluent UI?

Fluent UI is a design system that contains sets of libraries and components that allow you to build a user interface. It is available for the most popular platforms – from desktop and mobile to web applications.

Based on its experience and user feedback, Microsoft has created a design that it is adapting across its family of products. A similar scenario is being pursued by Google with its Material Design or Salesforce with Lightning Design.
In the case of Microsoft, the best example is Office 365, where knowing one application, we can quickly find our way around any other. Thanks to Fluent UI, elements such as input fields, buttons and icons are uniform and intuitive.

Comparision of Office 365 applications UI

Fluent UI therefore allows designers and developers to apply the same design to their applications, regardless of the platform used. So on the one hand, we maintain a consistent appearance and functionality, and on the other, we reduce the time it takes to create the user interface. In the case of web application development, which is currently the most popular approach, we can talk about two main components of this design system.

Fluent UI React

The first is Fluent UI React, which is the official open-source React front-end framework designed to build interfaces that fit into a wide range of Microsoft products. It provides robust components that we can configure using CSS-in-JS. These include buttons, drop-down lists, grids, checkboxes and other standard controls, including those specific to the Microsoft environment such as Datepicker, Peoplepicker, etc.

Sample Fluent UI controls. Source: Fluent UI Theme Designer

So we have a whole set at our disposal with which we can effectively build a nice and intuitive user interface.

Fabric Core

Fabric Core, on the other hand, is an open-source collection of CSS classes and Sass mixins that give access to colours, animations, fonts, icons and grids. It allows you to easily change the appearance of controls or even the entire page template.

Changing the UI theme. Source: Fluent UI Theme Designer

Microsoft provides a palette of colours, icons and fonts that we know, for example, from Office 365 products. We can use them to create extensions, such as Microsoft Teams, and thus maintain consistency of interfaces.

Fluent UI in Microsoft Teams

One of the most popular products using Fluent UI in recent times is Microsoft Teams. With this communicator, we can create applications to extend its capabilities, as well as easily integrate with existing systems. We can use Microsoft design already at the application design stage in Figma, with the help of the Microsoft Teams UI Kit. It is a set of components, templates and best practices that details all the capabilities of the application and presents typical use cases. This can provide inspiration for the designer, as well as a hint as to the functionality to be built. 

Sample Teams React UI. Source: Teams React UI Library

On the developer side, the Microsoft Teams UI Library package is used to implement Fluent UI. It’s a library that extends React’s Fluent UI capabilities with specific messenger functionality, such as dashboards and task boards. This enables us to build the finished solution even faster.

Summary

When creating applications linked to Microsoft products, it is therefore worth considering using Fluent UI from the very beginning. On the one hand, we gain inspiration, useful use cases and proven design already at the interface design stage. On the other hand, we get ready-made components dedicated to specific platforms, which significantly speeds up the time needed for implementation. Finally, it’s a design that’s supported across the Microsoft family of products, so a user who’s familiar with them will find it much easier to navigate our application.
Share on linkedin
Share on facebook
Share on twitter

You may also find interesting:

Product Design Sprint

Design Sprint is a process of business problems solving developed by Google Ventures. It was created to help start-ups build better products. We adapted this method to the requirements of big organizations.

Design-Driven Innovation

Innovation is often about changing the meaning of what a product or a service is and what it offers its users. This is the core of the design.

UX & Visual Design

Interfaces, processes, and ecosystems, improve customer journeys, help to increase sales, and provide better customer service. We combine business and users’ needs to create digital products that make money.

Scrum at a glance

SCRUM has become the dominant approach to organising project work. The high variability of the economic and legal environment forces companies to increase the speed of adaptation.

Contact us