About a week ago, Microsoft unveiled Fluent at Build 2017. A design system is meant to represent guidelines that give designers a direction when creating interactive elements and crafting an engaging experience. It’s similar to Google’s Material Design but with a bit more involved.
Google’s guidelines are great for working on flat screens but Microsoft wants that plus a few more steps. Fluent creates a design system for Augmented Reality (AR) and Virtual Reality (VR) while being fluid enough to be device-agnostic.
Microsoft could be investing in the future with Fluent. Perhaps they see VR and AR becoming a far more integral part of our lives. Imagine brick and mortar stores with empty shelves in real life but filled with products you can only see on your screens. Or for that matter, why not simply enter a store in virtual reality and pick items off the shelves using a controller in your hands.
So, what are the main aspects of Fluent?
1.) Light
Humans are drawn towards light. Put us in a dark room, turn a light on in a corner and we will want to be in that corner. We want to be in the light. We don’t even really see objects, we see the light that bounces of them. Using light, we can guide the way. In VR, Microsoft uses a small circle of light as a cursor. On a desktop, hover states use light to deliver a perception of potential selection. Upon clicking a button, the interchanging of the addition and subtraction of light whether it be bold (like a flashlight) or subtle (like a backlight), is how a user can understand a click has taken place.
2.) Depth
Width and height are great. They’re useful. They’ve been hand in hand for a while and sometimes they still get together to make magic happen. However, we all know that to take things up a notch, you need the 3rd dimension: depth. Elements that move with depth take design up a notch. By using elements that layer on top of existing elements, Microsoft achieves the feeling of depth. When looking at Microsoft’s calendar, it first appears to be small and far away but then it’s brought closer and closer until it occupies the screen. It follows the sense of depth by rotating the perspective of the calendar along a z-axis.
3.) Motion
The way transitions and animations add a sense of motion to interfaces create fluidity in design. The movement also add dynamism. An interface with movement draws our eyes towards it. Menus in Microsoft slide in and out of the screen. The Xbox interface slides in from the left, allows you to make your selection, then slides back to where it came from once you’re done. To denote ongoing activity, expanding circles and vibrating circles deliver this perception.
4.) Material
This refers to the look and behaviour of elements. Does your element bounce like a ball or stick like a booger flung to a wall? Does it look like it’s made of clay or metal or glass? Taking the material used in consideration adds a much-needed layer of context to a design. The background for a clock looks like it was made on top of frosted glass. A photo editing app has its background selection look a bit metallic when pictures or workspaces are selected. The semi-metallic look makes it feel sturdy and robust.
5.) Scale
Scale is figuring out how things grow and shrink. An interface on a mobile phone should translate as well onto a tablet as it does on a desktop and then onto VR. If you’ve used a Windows phone and a Windows PC, their tile system is an example of how scale is used across devices. Tiles in the Start menu or on a mobile phone screen have the same sense of scale when perceiving both. For creators, it also means that they can scale their work up or down without losing out on the look and feel they desire.
These are Microsoft’s building blocks for their Fluent design philosophy. Our view is that this will have Microsoft interfaces looking far more polished. We should also see behaviour in elements that we’ve never seen before. For now, we are hopeful about what the tech giant is going to do with this new system. Only time will tell.
This blog can be addictive. We know you must be craving more so here’s more:
All video resources are from Microsoft Fluent found here.
