Skip to main content

Is Microsoft copying Google with its Fluent Design System?

King Solomon, who is renowned for his profound wisdom, wrote: "There is no new thing under the sun. That which has been is that which will be."

This ancient King certainly didn't have the design systems of competing tech companies in mind when he penned that, but the principle of what he shared applies. Microsoft's Fluent Design System isn't an entirely new idea, though it looks as if it provides developers with an excellent framework to guide the development for consistent and great user experiences across devices. Just like Google's Material Design does.

I know some Microsoft fans would prefer it if all of Microsoft's ventures found inspiration only within the confines of Redmond's halls. Tech companies (most companies, for that matter) exist within a cyclic existence of perpetual mutual "inspiration," however. Microsoft has had its share of inspiring "firsts," such as a smartphone platform and Windows on a tablet.

Live Photos, 3D Touch, Universal Apps: Apple hijacks Microsoft's lingo

In the case of Fluent Design, however, Microsoft may be doing the following with its twist on an established concept, of course.

The 'why' of Material Design and Fluent Design

Three years ago, Google's Vice President of Design Matias Durate shared why the company embarked on the course that ultimately led to Material Design. As seen in the video interview below he highlighted that the design decisions and legacies that Google was dealing with were the "design decisions and legacies from laptops that had evolved completely differently from those for phones." Over time, the design language and system for designing apps for the two platforms had completely diverged:

Google was bringing Android to additional screens, such as watches, TVs and automobiles. This growth required a reset in the design system that would provide standard tools for developers across all screens and a consistent experience for users across the same.

This year, Corporate Vice President of OSes at Microsoft Joe Belfiore shared that Fluent Design was birthed from a need for Microsoft to expand its current design system to accommodate a broader scope of experiences for a growing range of devices. Belfiore stressed that Microsoft is building experiences for inking, mouse, gesture and gaze across devices such as PCs, tablets, phones, TVs and mixed reality headsets.

Both of these companies are moving in similar directions and have been for some time. Sometimes Microsoft is ahead, such as with its productivity suite and global dominance in the education space. In the case of a comprehensive design system meant to provide common development tools and experiences across devices, Google had the jump.

With Windows 10 S and Surface Laptop Microsoft takes aim at Google and Apple

The 'what' of Material Design

The foundation of Google's approach toward a new design system was defining for themselves the "material" of the digital interface (what it is made of) and what the rules are that govern it. Durate said, "If every pixel on the screen somehow lived in a virtual world, what would the rules of that virtual world be?"

Consequently, Google set out to replicate various aspects of the physical world within the digital via a design system with strict rules for light, shadow, motion, surfaces and layers.

To arrive at a system informed by reality, the Google team conducted studies where it carved all of its product icons out of paper and explored in depth the different effects of lighting on the sculptures. Google ultimately dubbed the "material" of Material Design "quantum paper" because of the physics that govern it:

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

In Material Design, light illuminates a scene highlighting seams, moving parts and divides in space which, along with movement, helps to focus a user's attention where desired within a 3D space governed by defined rules. Surface, which is the "quantum paper" of the design, has physical qualities such as being "solid" and "occupying a unique point in space" that mimics our experiences with objects such as books. This digital replication of the relationship between humans and the physical medium of a book was important for the team.

The 'what' of Fluent Design

Microsoft's Fluent Design, like Material Design, brings a number of physical elements to the digital plane. It is, however, less grounded on a foundation of one "material", like Google's quantum paper, and the physics of that single material within a defined digital environment.

As a matter of fact, Fluent Design will allow for a variety of materials, beginning with acrylic, to be affected by the four other building blocks of the system: light, depth, motion and scale.

  • Light draws our attention and illuminates information.
  • Motion allows developers to create transitions that keep users focused where they want them focused.
  • Materials bend, stretch, bounce, shatter, and glide. Acrylic is the first material quality Microsoft has translated to the Fluent Design digital environment.
  • Depth is the breaking apart of the frame that contains a developer's information and reconstructed in the layered way it would be represented in a physical environment.
  • Scale is Microsoft expanding its toolkit (beyond the traditional 2D environment) from 0D to 3D.

Microsoft is applying this common design system to a range of screens including mixed reality. When we consider this particular point, it becomes easier to understand why Microsoft may have chosen not to ground its design system in the "physics" of a single material.

Multiple materials may be an advantage of Microsoft's Fluent Design System.

Mixed reality, from augmented to virtual, is poised to become the next personal computing paradigm. If it is to accurately mimic the physics of the physical world, and how we interact with digital artifacts, a variety of materials and the physics that govern them allow for a more diverse and realistic experience than a single material provides.

Wrapping up

Google has had a head start with Material Design. The comprehensive breadth of its approach to "building a digital world," to define strict rules for the physics of that world and its digital material quantum paper is impressive. It also leads to a high level of consistency if adhered to. Since its debut, millions of users have seen its elements on smartphones and the web.

With the Fall Creators Update 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.

The more ambitious nature of Microsoft's venture (with multiple materials) also potentially presents an additional challenge for the company, however. The introduction of other "materials" may necessitate a change of the "physics" of some of the elements of the digital world of Fluent Design. Will that present greater challenges to the consistency that Google's quantum paper and Material Design system will never face?

Will the different "materials" in Fluent Design present a challenge to consistency?

When Microsoft introduced the flat Modern (formerly Metro) UI, rivals responded with less skeuomorphic elements in their UIs. The tech industry is in a perpetual cycle of companies being "inspired" by one another. It seems that in regard to a design system, it's Microsoft's turn to follow.

You have to wonder, will Apple be influenced by the moves of these two giants? And in what other areas might Microsoft follow its rivals?

Jason L Ward is a columnist at Windows Central. He provides unique big picture analysis of the complex world of Microsoft. Jason takes the small clues and gives you an insightful big picture perspective through storytelling that you won't find *anywhere* else. Seriously, this dude thinks outside the box. Follow him on Twitter at @JLTechWord. He's doing the "write" thing!

54 Comments
  • Thanks for reading folks! It is a intrinsic part of any industry that companies will feed from from one another. Even Google's CEO admitted that the company has adopted and expanded on ideas of others. It is also true that the natural evolution of technology and industry leads to the birth of similar ideas among different groups virtually "simultaneously" at times as solutions are sought to solve similar problems. Both Google and Microsoft faced the similar challenge of needing a design language that would create a continuity across all of the screens that would support the experiences the company's are bringing to users. Google's Material Design was introduced at Google I/O 2014. I thought then that the approach was a great answer to a problem of unifying design across screens and felt then that it was a blow to Microsoft. Perhaps Microsoft felt it was a blow as well and that's why nearly three years later we see the Fluent Design System that has similar elements to the Material Design System. So what are your thoughts? Is Microsoft following Google here? Or do you think Microsoft was cooking up Fluent Design before Material Design was introduced and only now was the company ready to present it. What advantages might one system have over the other? Do you think that Microsoft's plan to introduce other "materials" beyond acrylic, which has its own "rules of physics" on the digital plane will necessitate an introduction of other "physical behaviors" consistent with the new materials? If so will that be a advantage or a difficult challenge for Microsoft? Is the single and consistent "material" - "quantum paper" - of Google's Material Design the safer route? Well, you know the drill LET'S TALK!!! If you didn't read please jump back into the piece and hop back to comments when done to add your thoughts! When you don't read it shows. :-) "He who gives an answer before he hears, It is folly and shame to him."
  • I don't agree considering MS has done good amount of research and showcased it with different elements, 5 actually which just seems to intermixing with the earlier windows versions and seems like an real update rather than something that is copy pasted. Mere resemblance is coincidence.
  • No more than material copied the flat design of metro. Fluent is a developed version of flat for more than just a 2d screen, something material does not address well.
  • The way I see it: Metro/Modern leads to Material Design which leads to Fluent Design.
  • that's correct..!
  • You are just mentioning the release dates of these design languages as a proper case of "post hoc ergo propter hoc" fallacy. If Microsoft released a design language based on the color brown you'd see it that way again. Anyone looking at Metro and seeing Fluent as "the next step"...just boggles my mind. I need to come to Windows Cetnral less I guess. The amount of stretching of reality done here to make a 180 degree turn look as part of a giant, great Microsoft plan is so amazing that it becomes extremely annoying.
  • No
  • 😂😂
  • Yes, a big NO. "The 'what' of Fluent Design" makes more sense than that of Material Design. They certainly didn't copy that and even if some people think they did, they have done a GREAT job at making it so much more better that it's NEW!!! NOT. A. COPY.
  • Hey there. I remember the refresh that came with ios... 7? 8? And people's claims of Apple copying Microsoft. In the end everyone copies everyone!
  • you mean ios 7, ios 7 bring flat design that microsoft had since windows phone, it is a diffrenet topic with these design systems 
  • Lol, Yes it is !
  • No. The only thing Material Design is keeping things minimal until needed. Fluent Design seems to be a macOS look clone (which isn't a bad thing, because personally, macOS does look better in terms of design)
  • Being that Material was taking Metro and adding 3D and gradients, Fluent taking some elements from Material is not so much copying, but refining Metro.
  • I believe that the principle for grounding design with some guidelines isn't copying at all, it's merely a cure for the disparate UI that one can find on Windows 10 even now. Material Design has a different feel to Fluent Design System, though they both do serve as a unifying force on each respective platform. So this is simply Microsoft's way of solving a problem of mix and match UI, Google understood this too but both have different outcomes.
  • MS copying Google "design". That's rich. Fluent's elements can been seen in Microsoft Technology Vision promotional videos from as far back as 2009. (Maybe even 2007) https://www.youtube.com/watch?v=t5X2PxtvMsU Jason, I love your articles, but this one needed more research.    
  • In my opinion, Material Design is good in concept, but bad in execution. A great example is Google Maps. Nobody knows where the details are, they are under neat the bright blue button without any label on it. This make this app to be the worst user experience that I have ever used. And I can totally call Material Design as the worst UX of all time, with a steep learning curve and nonsense design perspective. I wrote a comment as I studied about UX for a good chunk of time. And I wish that Fluent Design System won't disappoint me.
  • I don't care so long as some consistency happens at last. Google can't get it because everyone bastardises it so they (and I can understand why) aren't wholly subsumed by the Google machine. Microsoft for some reason can't seem to keep even internal apps consistent..I hope that Fluent is mandatory for their 1st party apps at least.
  • Very much agree with you fishyuk, serious lack of UI/UX consistency, so much for productivity and discoverability.
  • I agree. Although, they have gotten better making sure their own apps follow all their design methodlogy (formerly Modern UI). What bothers me still is that there continues to be a few that follow it but break it various obvious ways.  Which means if their own apps haven't followed the  the UI design how could/cn they expect  third party developers to do it. It seems at times it can be "Do as I say, not as I do" with Microsoft. Hopefully, they will go over every aspect of Creator 2 (RS3) and make sure every knook and cranny in every forrm, dialog box in the OS and every app they create is 100% following the current Fluent Design UI. No exceptions.  It should be a number one priority to make it cohessive not a slow march like they always seem to do (each OS update adding a little more of missing UI elements - what should have done in the original release).  I have said it several times in the past.  The one thing Apple does very well  is making sure their own OS experience follows their UI mechanics very well straight out of the box. Rarely do you not see that Apple hasn't crossed every "t" and dotted every "i" within their own UI changes. Contrrary to Microsoft which will always seems  get 70% done and leave the rest for later updates. 
  • I understand from what I have read so far that Neon is also for mixed reality. I doubt Google matching that right now.
  • Because you haven't been able to buy Google mixed reality devices for years? Still don't see one from Microsoft. Just promises and "soon".
  • Please see one below. Unable to delete this one
  • Once again, good article. Now, I have always looked at Google's material design as how you target a single object (or material) across multiple devices for given experiences. It is however dependent on the device form factor. Microsft fluent design was motivated to cohesively make an app experience less different while independent of device form factor for this shared experiences in windows environment.
  • I'm sure MAterial anfluenced Fluent a bit just like the flat design of Windows 8.1/10 influenced Android and iOS to go with simpler,flat designs. As long as it's not a ripoff I'm ok with designers getting inspiration from other designers.
  • Material is basically MeTRo with some iOS elements.
  • And more uglier TBH.  Metro + iOS + Fluent is way more beautiful.  One thing I really hate after getting an Android after being on WP/WM for so long is that the material design on Android is just hideous and childish looking.
  • And immature.  Tried dealing with Android on Marshmallow after being on WP 8.1.  So ugly it was insufferable. I do like Nougat though, at least the menu settings.  Finally brings Android into this decade.  But I stil fail to understand why they did not bring some of that greatness to the start screen.   Windows Phone is dead, and so on and so forth but we still have a better looking UI. Windows Phone is like the NeXT computer.  
  • It still is, horrible. The latency is real.
  • True.  Not sure what Google can do about that.  
  • They can do whatever. With their monopoly on information online they will just downrank negative articles like they did a few years ago.
  • Exactly my thought. Metro was released before android lollipop. I think google copied the Metro layout. On the other hand, Google did implement the hole concept way better☺
  • They are not copying at all.  Design languages are important for every software/hardware company to have, and Microsoft has had design languages well before Google.  In fact, Material took a lot of queues from Metro but in my opinion, poorly executed on it, which makes it look so childish in compared to Metro/Fluent and iOS.  As a designer, Fluent looks to be the first real design language that is truly scalable not to just multiple screen sizes, but also different form-factors, dimensions (2D/3D/4D) and accessible to everyone with all types of impairments. I'm not really seeing it in action yet, but based on the concepts in the launch video and their website, I hope it lives up to that.
  • Fluent also works with 1D, or not screens at all. Its not just visuals, but sound (spatial sound) for example.
  • Microsoft is slowly fading away. After poor customer service recently in moving more and more towards Google products and services.
  • +1
  • Material design. Did that ever really materialize?  I don't see any consistency on an Android device.  Still, all things consider, I'm not convinced that Microsoft "followed" in this case.  They may be similar by coincidence, but I don't think "followed" is the right word.
  • " Be together, not the same." Seems to have worked out great for Google. Each of the devices look different but the apps really tend to follow Material Design. Some are still older and not updated and some are obvious iOS ports. It isn't perfect, but the big ones certainly follow Material. I would argue that all Windows devices looking the same is what killed mobile for Microsoft. Why would Samsung be excited and motivated to create a device they have no control over?
  • Material design took from Metro anyway, so..
  • Fluent design system is well designed! great idea for any device even for hololens... it is smarter move and it will gain more development attraction!
  • Fad, fashion, and style must be provided by anyone who wants to stay relevant in business.  From sleek automobiles to whitening toothpaste, all business try to sell whatever people are buying.  The market determines what sucessful businesses must provide, not the competition.  While being first can cause great profit or loss, sometimes its smart to be second in order to reduce the risk.
  • Material Design builds inside-out. It starts with defining quantum paper and makes a system out of it. Fluent Design builds outside-in. It starts with defining the five principles first and make a system how the fives may be integrated. The only similarity is both trying to make a more comprehensible alternative reality. How can that be considered copying? Microsoft even tries hard enough to differentiate by picking acrylic as the first material. By letting the material be general, Microsoft makes its design system more universal. But that opens up the risk of inconsistency.
  • In my opinion material design is the worst thing happened to android. Seems like Google employed the worst designers. All Google apps are designed so ugly and complicated it's impossible to use, it's like playing hide and seek :| The good think is that there are a lot of alternatives to Google apps.
    Well, looking at Microsoft ad seems like Fluent design should be much better, it looks more like apple design which I think is not bad.
  • Copying google? It's a borderline blatant ripoff of the iOS/OS X look.  if anything   
  • Though the article is well written and obviously some thought has been given to the subject matter, I would have to disagree.  Though elements appear to be similar the philosophy that gave birth to these elements are very different and the implementation would therefore be very different as well even if both material and fluid design mention, light, depth and others in their respective approaches. In a nutshell, material design is still mainly grounded on 2d interfaces relating much to tactile experiences.  They frequently mention paper-like design and movement, and though it metions lighting this is just to create consistent shadows on all objects.  With this in mind material design is google's version of metro, just not totally flat with slightly floating elements but definitely not 3d.   Fluid design is in response to the upcoming computing paradigm from 2d/touch to fully immersive interfaces but having the design effective on both.   This is not just having a universal lighting system, this is about the shift to VR/AR and having a UX that's effective on both flat and immersive systems.  Flat menus on VR/AR interfaces like the hololens are slightly translucent or have that acrylic quality due to the limitations of the tech.  Light bleeds thru. I've read somewhere that Translucency or acrylic in fluid design was to bring this back to our current 2d interfaces so you could have similar UX.  But that's not all, flat design on  fully immersive headset is not good, it does not make use of the space.  Though fluid design makes note of depth elements this is not comparable to material designs's idea of depth which was just to provide universal lighting.  A breakout session on build 2017 fully illustrates this by applying depth to elements in the edge browser when viewed on hololens.  Depth in this case does not show if you're viewing sites in a flat monitor.  Some elements in fluid design only appear when you gaze at them, this is also appears when you move your mouse over elements when viewed on a 2d monitor.   Fluid design is about finding a common UI for 3d and 2d interfaces.  I'll post the build 2017 breakout session when I find it again.  
  • It would have helped if there were side by side comparisons of both the two design types - for now I don't even know what either of them actually are
  • Hi Chintan, I embedded five videos I in the body of the article to help readers get a visual of both design systems. They should be very helpful in helping you see the differences between the two systems. Were they not helpful? Thanks for jumping in!😎
  • I don't think Microsoft is actually copying or influenced by Google on this front even lagging behind. The others(Google and Apple) if anything has been copying Microsoft since Windows 8 in an attempt to keep this company from appealing to consumers in the Mobile sector up til now however with the two in-one pcs Microsoft has been progressing and with the upcoming re-introduction of Windows on ARMs will allow OEMs and others to make a whole new market of Windows devices in all ranges of the processors from ARMs to Intel/AMD. I believe the market for Windows devices is about to explode and with this Microsoft will be adding a new partner in Qualcomm to it's Intel/AMD partnership.
  • There is absolutely no they can't copy each other Jason. However the beauty is that, the one who copies usually takes it a step further. In this case Fluent Design is so much more than Material Design.
  • I really hope that Microsoft will follow Google in this department. Google's design refrence is extensive and allows for very good consistency which ultimately is good for the user as well as designers.   I really hope Mircosofts reference will become as thorough and extensive as Googles. That would be awesome
  • Anyone remember Windows Vista Aero theme and Windows Media center? Fluent waves 1&2 are basically Metro done in the style of Aero with the animation and visual cues of Media center... With some enhancements related to z layering. So actually this predate Google material and IOS.
  • Apple and Google hasn't been copying Windows 8, and one could argue that the basis for live tiles has roots in the android Widget system, which iOS did copy - to an extent - in their Today Screen. Apple and Google didn't need to copy Microsoft. Microsoft launched an OS on old Hardware and in a half-baked state with practically no viable App Store and tons of missing pieces to their ecosystem (i.e. they've ONLY JUST gotten an eBook store off the ground). The only reason Windows Phone seemed like it was making headway was because of those cheap super-low end devices they were selling, but we all knew that wouldn't last forever. There are cheap Android phones that are 10x better than a Lumia 5/6xx. They no longer have any market to capture, especially now that flagship-level devices are starting to invade the mid-range price range, as well.
  • Interesting.  But the short answer is no. I actually prefer what Microsoft is doing with Windows 10, design wise, to what Google has done with Android and Apple has done with OS X and iOS.   From the looks of it Microsoft is back to their old tricks at implementing sophisticated visual effects on high end hardware, which is a completely different direction than that Google is going in.  Think of it as Vista Aero for a new generation.  
  • I love Windows 10 but one has to admit that Windows Phone is the only platform where you still have apps force closing (for lack of available memory) on 1 GB RAM devices.  When the f_ are we going to get a Facebook app that does not require 2 GB RAM that does not force close as soon as I open it.  I'm surprised that Instagram still works.  Even OneDrive has been known to force close.