Fluent: Design Behind the Design
How our Fluent Design System focuses innovation on evolving principles and real-world customer needs
Purpose and process
This month, we’ve launched an update to our Fluent Design System website. The update represents our approach to helping our designers and developers build and design products for our customers. Fluent Design is a collective, open design system that ensures people, teams, and their products have the fundamental components and processes to build coherent experiences across platforms.
Earlier this year, I wrote about how we’re evolving the Fluent Design System to be “more than a set of outcomes” and how we use it to collectively design and build products.
The evolution of Fluent represents a critical moment for our design system at Microsoft. At Build 2017, we introduced Fluent as the latest Windows design language with a focus on bridging user experiences across multiple devices and 3D environments. Both figuratively and literally, Fluent became defined by its focus on fundamental principles and building blocks: light, depth, motion, materials, and scale.
Today, Fluent is simple in its emphasis on systematizing the fundamentals. It’s an attempt to optimize the process for both designers and developers through a shared foundation. At least in its initial stage, it’s as much about process as it is about pixels and interactions. It’s less about creating something new and more about establishing coherence. Coherence relieves cognitive overload, helping people focus on what they’re trying to accomplish and not on how they’re trying to accomplish it. Essentially, the updated Fluent website is a representation of this evolution to broaden this story of coherent experiences.
Simply put, it’s about designers and developers working better together to create best-in-class experiences that empower our customers.
Form and function
On the updated Fluent Design website, we tell the story of the evolution of our design system using the Fluent color, typography and modular grid. In many ways, the new visual identity reflects our shift away from an overly polished or dimensional approach. It has an almost skeletal, structural feel to it. Like the building blocks that compose it, the new identity embraces a “some-assembly-required” approach. Our goal is to build Fluent as a collective, both internally and externally — Fluent being the intersection of first party equals third party.
We’ve also refreshed the Fluent icon from a cube to an F shape. The icon is a visual representation of the iconic four squares of the Microsoft logo reassembled to create a new form.
The website was built using the same Fluent design tool kits and code that our in-house designers and developers use every day. These Sketch, Figma, Adobe XD tool kits, and React components are available and open to all.
All is flux
Fluent and its design identity are meant to convey a specific moment in time. Fluent isn’t a brand — Microsoft is the brand. Fluent isn’t a product — the experiences we make and evolve to empower our users are the product. Fluent is a strategic initiative. We want simple elements, systematic processes, and coherent products to be synonymous with Microsoft design.
We learn and evolve our design system based on feedback we receive from you — our customers, partners, and community of developers and designers. Our goal is to make designing and building coherent experiences as easy as possible. Fluent is our open, collaborative solution to make that happen, so that when the next design tool, design trend, or new experience platform surfaces, we can continue to evolve.
We’re eager to collaborate, and we’d love to hear your thoughts. Please join the discussion over in the LinkedIn Fluent Design Group and visit the Fluent Design website to explore what’s new.
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter andFacebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
