How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences

How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences medium.com6 days ago in #UX Love44

Continuing our journey toward a true design-to-code system at scale Microsoft has built the world’s preferred productivity apps for decades. Powerful tools, such as Office, Outlook, OneDrive, and Teams, empower people around the world to achieve more. Fluent UI, a collection of UX frameworks, is how we’ll deliver these experiences to our customers. Yes, there’s a dedicated team supporting Fluent UI. But the beauty in our open-source approach is that the people who eat, live, and breathe our products contribute to and improve the Fluent Design System for everyone. It’s how we cultivate and support great ideas from across the company (and beyond) that push us all forward. It’s similar to biodiversity in nature; the richest soil results from a wide range of organisms weaving themselves into a thriving environment. That’s why we’re laser-focused on improving how we craft experiences together. As you may know, Microsoft recently announced Fluent UI, unifying our web and mobile UI libraries under a shared charter. This was no small feat! And this year, we aim to close the gap between design and code, starting with a design token system. Read on to learn more about what we’re doing with Fluent UI, why we’re invested in it, and how you can get involved. Fluent UI is more than a collection of UX frameworks for creating web and mobile apps that share code, design, and interaction behavior. It’s a new approach to how we work across disciplines and product teams to deliver more seamless experiences that feel natural on the devices our customers use throughout their day. We’re simplifying our developer ecosystem, so that all sorts of partners can leverage and contribute to these frameworks to build their own experiences. Using components from our Fluent UI React (web), Fluent UI Apple (iOS and macOS), and Fluent UI Android GitHub libraries ensures our Microsoft 365 apps and services remain powerful tools while feeling more intuitive and coherent across platforms. With the addition of our new Fluent UI React Native library, we’re creating cross-platform components — making it easier for JavaScript developers to deliver experiences across devices to customers more quickly. For developers building native Windows experiences, WinUI continues to embody the Fluent Design System. We believe productivity software needs to first and foremost elevate human creativity. It needs to get out of the way and make the task at hand effortless, whether on your phone, tablet, laptop, or large screen. Like in car design, we think it takes only a few signature design elements for each product to shape the impression of a branded experience in people’s minds. These “essential” elements create clarity and structure, so people understand how to use a product no matter which device they’re on. Our Microsoft logo, familiar app icons, recognizable app names, and distinctive app brand colors shape people’s impressions of our branded experiences. But there are also more specific UI components that make our apps feel uniquely Fluent. For example, our custom navigation bar gives our mobile apps a familiar, familial touch. Custom Fluent UI navigation bar naturally fitting into native iOS and Android platforms To us, creating experiences that feel coherent across platforms isn’t about overwhelming style guide rules or UI that is identical down to every pixel. Instead, we focus on how each platform behaves and what our customers are accustomed to.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply