Microsoft Fluent Design. The future of UI?
Microsoft revealed a new video about their new Fluent Design System. It was first introduced a long time ago, but with Fall Creators Update elements of this design started to appear in Windows. I want to discuss briefly why it is good and what it means for web.
I don’t want to dive deeply in what is this system about, but you should know that it is Microsoft’s approach of building UIs, like Material Design or some unnamed from Apple. However, I’d like to focus on some parts of Fluent and what it means for web.
Don’t be afraid of images
Material Design made web looks really amazing. I visit websites for designers daily where they share their UIs and it’s usually looks pretty good. Nowadays, almost every website and web apps uses box-shadow effects and light colors. There are usually some cards, and with box-shadow is is easy to show which block is on the top of another. For web, it is really safe to use solid colors as background, like in Material Design. While Fluent Design proposes to use background images.
The world is images, bright or dark, with a lot of content and information or not, with some tips for user or just to look good. Image helps to distinguish UI elements from just background. With images, other UI elements in Fluent Design become more appealing, like blur effect at the image above.
However, for web it is more like a disaster. Even with those amazing compressing algorithms, there are still a lot to download, and images should cover all device sizes, to look at least not so different, and some users can disable loading images in their browsers, that could lead to problems with website appearance, so you still need to think about background-color as a fallback.
Usually, to make design responsive to user, we add some effects on elements which user can interact with. It can be box-shadow property to make it looks flying or pushed, or just lighten or darken background-color.
In Fluent Design interactivity is shown by light. You can see ripple-like effect on click and elements siblings of hovered elements is lightened too, to show that user can interact with them.
For web, it it is not really perfomant to use Material’s ripple effect on clicks, because we need one more DOM element, get click position on clicked element, play animation. But this light thing is much more difficult and will not appear in web at all (never say never, but it seems that web rather evolve in something totally different, than get this feature).
I am so used to and tired of Material colors that new Windows 10 colors always warm my soul since I’ve been using them. Each time I open a notification panel, I feel myself better, like when your coffee in a cup doesn’t end through all work day and you don’t have to go to fill it. And what makes it better is a blur effect.
And blur is almost everywhere, and here where background images comes good. Doesn’t meter what picture do you have, on blurred background any text will be recognizable, using some semitransparent background-color between. But for web, we still don’t have backdrop-filter (with -webkit prefix only in Safari and Chrome with flags, but there was some warnings about performance).
But it is important to to keep track of Fluent Design
Fluent Design System is still on its way to become mature, but it is definitely perspective. Those elements that is already implemented in latest Windows release looks amazing and I spent like an hour to play with calculator, music player and menus. The things is that this design is for any interactive system. I love Windows for its touch interface and from video at the beginning of this article it is easy to see, that the same approach can be used in Virtual or Augmented Reality and I am happy to live in this changing world. Despite the fact that we don’t have an opportunity to bring Microsoft’s ideas to web, I would like to see a new version of web, with such a great interfaces and animations.
Thanks for reading and sorry for any mistakes in English, I still learn it. This is the first article, but I like to share my thoughts about front-end stuff, so your comments will be very helpful, to make my language cleaner and writings better. If you like it, don’t forget to clap me for my first attempt as many times as you want.
I am a front-end engineer and a student. Find me in any social network you like from my web page.