Does Microsoft’s Fluent Design System resemble Google’s Material Design?

Material and Fluent Design are the two hottest application UI/UX development trends. Menlo Technologies has prepared this overview of these exciting design principles:

Material Design

Material design is a set of guiding principles that can be applied to unify the experiences users have across various Google platforms. This unification improves the overall experience a user has with technology by making the interaction easier, simpler and more intuitive.

Material Design was introduced in 2014 at Google’s I/O Conference with the roll out of the sleek and brightly colored Lollipop update.

“It’s grounded in tactile reality, inspired by real life objects—specifically paper and ink,” said Nicholas Jitkoff, long-time lead designer at Google, now VP of Design at Dropbox.

Creating the new, unified look was a long process that pulled designers from different parts of Google together. Cardstock, (Quantum Paper) is a big part of making Material Design what it is. The designers at Google, wanting to make the digital as physical as possible, stacked UI elements one behind another – like stacks of cards, even implementing shadows to make the UI appear like cardstock. The real world was important for Google designers to preserve; the real world and physics serves as big reference point.

“We wanted to see how light moves across real surfaces, and how can we encapsulate that in the design in a way that speaks to people,” said Jitkoff.

Material Design is intended to make better use of available space and to bring a consistent user experience whether viewed on a smartphone, tablet or desktop. Google’s apps have been updated to reflect this change.

Fluent Design

Microsoft introduced its new Fluent Design System in May at Build, which it believes will usher the company into the future with a whole new look and feel for its products. The design language focuses on five areas:

  • Light
  • Depth
  • Motion
  • Material
  • Scale.

Microsoft’s Fluent Design, like Material Design, brings physical elements to the digital plane, but allows for a variety of materials (as opposed to Google’s quantum paper).

Microsoft is applying this common design system to a range of screens including mixed reality, from augmented to virtual.

The Bottom Line

In many ways, the ideas behind Fluent Design resemble those of Google’s Material Design language.

Microsoft believes that Fluent’s differeniator is its capacity to work well in 2D and 3D environments, something Microsoft is obviously very interested in given its investment into HoloLens and the overall “mixed reality” ecosystem. Still:

  • Google has had a head start with Material Design. Its broad approach to “building a digital world,” to define strict rules for the physics of that world and its digital material quantum paper is key. Material Design also has a high level of consistency if adhered to. Since its debut, millions of users have seen its elements on smartphones and the web.
  • Fluent Design is new. We’ll be learning more soon, since the Fall Creators Update is coming to Windows 10 this year. 500 million users will begin to see more elements of the multi-staged Fluent Design System in Windows. (Apps like Groove and calculator already have been affected.) Microsoft has communicated that Fluent Design will evolve over time and will be released in waves…and we’ll ride each wave and provide updates as they are available.

Menlo Technologies is a global services company specializing in web and mobile technology. We’re leaders in high quality iOS and Android application development and can implement Material and Fluent Design methodologies in our work.