Acrylic background and Fluent Design

Fluent Design

Acrylic background

Summary of what’s going on:

  1. Introduction to Fluent Design. 👨‍🏫
  2. Acrylic Backgrounds. 🎨
  3. How to implement. 🤯

Introduction👨‍🏫

Fluent Design

Fluent design is a massive Windows 10 UI change that took place in the fall creator’s update and it’s beautiful! Their idea was pretty simple the world/technology/life is getting more complicated, let’s make things simple let’s make thing fluent. For this new design system Microsoft hit four main points: Material, Light, Depth, Scale, and Motion. For this post I will be talking about acrylic material ; one of the material aspects of fluent design.

What is Acrylic Material 🎨

Acrylic material is a brush for UI to help add depth to your application. The key to use Acrylic material as an accent to other brushes and not as the main brush. An example would be using it in a pane, or as background with images or other material on top. The process on how it was designed is pretty cool, I placed a picture below but be sure to check the link at the end for more info.

Resources

  1. Visual Studio 17
  2. A UWP using Windows 10 fall creators update.

How to Implement 🤯

Implementing the Acrylic material as a background feature of Fluent Design is super simple. In the xaml page of your UWP add the Background=”{ThemeResource SystemControlAltLowAcrylicWindowBrush}”> to your Page section. There are a bunch of ways to play around and specialize the use of the material for more on that check the link at the end.

What I am using it for? 👨‍💻

I’m using it for my UWP software engineering project. I’m utilizing this and other fluent design features to turn an otherwise boring task app into an interactive productivity tool.

For more Information 📚

https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic

github folder: https://github.com/amsuarez01/Habit-Hamster/tree/uwp/Habit%20Hampster%20UWP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s