Contributors

About

We lift barriers between creativity and technology, and converge advanced development into outcome-driven solutions. Pushing boundaries in gaming, digital, and experiential since 2010

Contact

Statistics

Posts: 337
Reposts: 0

Microsoft's vision for the next generation of UI designs is subtly brilliant

When Microsoft first revealed their Fluent Design System last week, on first impressions, it would be easy to dismiss as simply Google Material with some iOS blurring effects.


Now that I've had a week to reflect and study more into it, I've come to a couple of conclusions: Fluent Design is a subtly brilliant approach to the future of UI design and I'll never look at the Windows calculator the same way ever again.


Why do I say subtle? even though there's a lot more moving, parallaxing, texturing, and general flashiness in comparison to Metro's extreme flatness? It's because I believe the underlying philosophy is more impressive than the look. That's not to say the new look isn't impressive, it's just we've seen many of those elements before (again, Google Material with some iOS blurring effects isn't an entirely accurate description, but it's not entirely misleading either).


The philosophy behind Fluent Design is the true highlight here: it aims to make UI elements have a greater relationship with their surroundings. For example, a UI element which makes use of the "acrylic" (semi-transparent, textured) material incorporates some parts of the enviroment beneath/behind it, whether it be a personalised background (as in a desktop wallpaper) or a real background (as in the reality in Augmented Reality). As another example, check out the Windows calculator examples Microsoft keep using during their presentations and watch the mesmerising glow that follows the mouse cursor. Notice how it illuminates not just the button that's being hovered over, but also, quite subtly, the borders of nearby buttons. It's these kinds of effects - and the five foundational elements in combination, Light, Depth, Motion, Material, and Scale - that makes Fluent Design an effective design language for the next generation of user interfaces. UI elements become a part of the overall environment: buttons look more touchable, light and motion guides the users' gaze and attention, whilst scale and depth provide a more physical relationship with the surroundings. This will take user interface design beyond just 2D and 3D, and into 4D, and 0D. 


4D and 0D? One more subtle example mentioned in their presentations that Microsoft only really spent a couple of sentences on, but blew my mind nonetheless, is the importance of sound. When designing a UI for a Hololens or a home assistant, sound gives you an effective way of letting a user know where a UI element is, how near or far away it is, or if it's behind a user.


The linked article has a good breakdown of Fluent Design, and I'd highly recommend checking out Microsoft's presentation (link in the article) if you have an hour to spare.

Maybe its the beginning of a UI for mixed reality headsets as they become poised to replace our monitors, or maybe its just an abstract concept demonstrating the pillars of Fluent design. Either way, it’ll be fun to see where Microsoft is going with its new design philosophy.

As a free user, you can follow Passle and like posts.

To repost this post to your own Passle blog, you will need to upgrade your account.

For plans and pricing, please contact our sales team at sales@passle.net

Repost successful!

View the repost

Repost successful!

Your repost is currently a draft. Review your repost and request approval.

Something went wrong whilst reposting - please try again.

Sorry - this is not an option. This post already exists in the Passle you have selected.

Try reposting to another Passle.