12 Fluent Design Elements to Add to Your App
A round-up of examples and sample code to experiment with dimension and movement
The Fluent Design System is all about incorporating light, depth, motion, material, and scale in user interfaces. Wanna make your app Fluent? Here’s a round-up of Fluent styles and controls found in first-party Windows apps, and how to implement them in your own UWP app.
NOTE: Fluent was released with the Windows 10 Fall Creators Update, so if you haven’t done so already, you’ll need to update your PC in order to see Fluent Design in first-party Windows apps and to build Fluent UWP apps.
- Conscious controls
Conscious controls have layouts that adapt to different window sizes, which is essential for apps that scale across various devices and dimensions. To create conscious controls, you can code your own adaptive UI to optimize for different screen sizes, or you could use the NavigationView control (shown above), which automatically adjusts its layout based on the amount of screen space available.
How to implement in code: Adaptive UI tutorial, NavigationView control
2. Connected animation
Create cinematic experiences and add dimensionality to your UWP app by connecting transitions with motion! Here, the Tips app uses connected animation to show more information in a pop-up frame, but connected animations also work well for other elements, especially images, videos, and media.
How to implement in code: Connected animation
3. Parallax within an image
Parallax moves different frames at different rates, creating a sense of depth with motion in a flat environment. Here, the Photos app uses parallax within a single image on a gallery page. While the effect might look complex, the ParallaxView control implements parallax with no extra effort required.
How to implement in code: ParallaxView control
4. Parallax in a frame
The Weather app uses parallax in the whole frame, moving the top layer faster than the background image. The effect even makes the clouds appear like they’re slowly lifting!
How to implement in code: ParallaxView control
5. Pointer enter/exit effects
Add a tiny bit of motion to respond to user interaction, like how the Photos app slightly zooms in/out on photos on pointer enter/exit. Other responsive effects that work well with photos include spotlight, blur, exposure, and desaturation (see more in the Windows UI Dev Labs Sample Gallery).
How to implement in code: ScrollViewer Zoom, Pointer enter/exit effects
6. More detail on pointer enter/exit
Similarly, you can use motion to reveal more content on pointer enter/exit, like the News and Weather apps, shown above.
How to implement in code: enable translation animation (see WindowsUIDevLabs example)
7. Reveal highlight on buttons
Light is a natural way to draw attention, so why not use light with focus states? Fluent Design captures the power of light with Reveal highlight, which outlines hidden borders to reveal objects. Controls like ListView, GridView, and NavigationView automatically use Reveal highlight for focus states on list items, and you can also enable Reveal for other controls, like Buttons and custom controls, as well.
How to implement in code: Reveal
8. Background acrylic
Acrylic is a partially transparent material that helps establish visual hierarchy with light and depth. Here, the Alarms & Clock app uses an Acrylic background when the app is in focus and switches to an opaque background when the app is running in the background.
How to implement in code: Acrylic
9. In-app acrylic
You can also use Acrylic for components within your app to create visual distinctions while keeping the entire app in focus. The Mail app uses in-app acrylic for its navigation menu, creating a sense of depth within the app itself.
How to implement in code: Acrylic
10. System accent colors
To personalize the experience of each user, you can incorporate their system accent color, which users select in the Windows personalization settings. The Calculator app uses the SystemAccentColor (here, it’s an orange color) to highlight mathematical operations buttons.
How to implement in code: Color=“{ThemeResource SystemAccentColor}”
11. Themes
Users can select a light or dark theme in Settings, as shown above. You can automatically adjust the appearance of your app based on the user’s theme preferences by using SystemColors.
How to implement in code: Theme dependent brushes
12. Inking
Scale your app into another dimension by adding Inking — my personal favorite Windows feature :) Inking can be found in a plethora of first party Windows apps, such as the Edge browser (shown above), Photos, Maps, Paint 3D, Sketchpad, and Sticky Notes.
How to implement in code: Inking
Other examples of Fluent
Not tired of Fluent yet? If you’d like to see examples of end-to-end apps featuring Fluent Design, check out these featured code samples, or get inspired by these 12 Fluent Design experiments.
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
