The Fluent Design System
The user interface is evolving, expanding to include new dimensions and interactions. We speak, type, ink, touch, and gaze. We're engaged and immersed. We're surrounded by devices, interactions, and experiences. This evolution provides new opportunities and challenges that need us to be fluent in our designs. This is Fluent Design.
Fluent Design for UWP
The Fluent Design System for UWP is a set of UWP features and guidelines for creating UWP apps that perform beautifully across devices, inputs, and dimensions. Our guidelines are divided into several categories: layout, style, controls, input and devices, and usability.
Fluent Design platform features are built into UWP and help you create apps that are Fluent. Some of these features--such as effective pixels and the universal input system--are automatic. You don't have to write any extra code to take advantage of them. Other features, such as acrylic, are optional; you include them in your app by writing code to include them.
To learn more about the basic features that are automatically included in every UWP app, see the Intro to UWP app design article. To learn more about the new features that help you incorporate Fluent Design into your app, read on.
The building blocks of Fluent Design
Use these features to add light to your UWP app:
- Reveal uses light to make interactive elements stand out. Light illuminates the interactive element the user can interact with, revealing hidden borders. The light also gently illuminates other interactive elements that are nearby.
Use these features to add depth to your UWP app:
Use these features to add motion to your UWP app:
- Connected animations help the user maintain context by creating a seamless transition between scenes.
Use these features to add material to your UWP app:
- Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.
UWP articles that help you build an app that scales:
Get the complete guidelines
This article has highlighted some of the visual features that make Fluent Design stand out, but if you're interested, there's more to read: We've provided a complete set of guidelines that help you design and implement every aspect of your app.
Structure your pages and add navigation elements.
Use color, typography and Fluent Design features to create a stunning UI.
Jumpstart your app with our extensive set of controls.
Input and devices
Customize how your app handles input and optimize it for specific devices.
Make your app inclusive and easy to use for everyone.