Google’s Material Design pays homage to Microsoft’s flat, cross-platform Modern UI

Google’s Material Design pays homage to Microsoft’s flat, cross-platform Modern UI Ryan is a senior editor at TechForge Media with over a decade of experience covering the latest technology and interviewing leading industry figures. He can often be sighted at tech conferences with a strong coffee in one hand and a laptop in the other. If it's geeky, he’s probably into it. Find him on Twitter (@Gadget_Ry) or Mastodon (@gadgetry@techhub.social)


Few would call Microsoft pioneers of design. Whilst their software is powerful, its design has historically been utilitarian rather than beautiful. Apple got its name in this department, and as a result, many of the best UI designers adopted iOS and Mac.

An account, granted by a Microsoft designer, tells of the fundamental shift within the company with its approach to design over recent years. If it wasn’t obvious from the outside to see how the flat, Modern UI being pushed across Windows products has pushed adoption by Apple’s core products (and soon Google’s.)

Unlike iOS, however, Microsoft designed Windows to scale across different devices (Windows Phone, Windows, and even the TV through the Xbox One console.) Whilst the vision isn’t completely realised yet, it will eventually allow developers to create applications across devices with only 10% of the code requiring alteration. The tools to support such is anticipated to arrive in the ‘Threshold’ update early next year.

 

iOS is very primitive when scaling upwards. The home screen, particularly, doesn’t take advantage of the space available on larger screens such as the iPad. As it is, it’s hard to imagine it supporting screen sizes bigger than 10” without alterations – like on Apple TV. Google’s “Material Design” wants to be the framework for design across the web, mobile, desktop, TV, and even wearable devices. As such, it also looks to scale beautifully across devices. From their official design documents you can see the resemblance to Microsoft’s approach…

The piece from the Microsoft designer, explaining the company’s ethos, says the UX was purposefully designed to embrace being a digital UI rather than pretending to be what it isn’t: “Microsoft is pushing those notions aside — our designers are celebrating the fact that software is digital and made of pixels and elements such as typography, colour and motion-enabled experiences that aren’t possible in the real world.”

She continues about the removal of all skeuomorphic elements: “In hardware, authentically digital means being honest about materials and interaction. If a button looks like metal, it should be metal — if not, it’s communicating a lack of authenticity.”

In iOS7, Apple removed all elements of its skeuomorphism and adopted the now industry-trend of flat user interface. In doing so, however, they also removed many of the shadows and effects which at-a-glance distinguished interactive elements from static.

Google took a lot of care and attention to detail in their flat-design implementation down to even creating floating elements which hover at a height set by the developer to ensure the user knows it is able to be interacted with. The entire interface is based on what Google calls a “unifying theory of a rationalized space and a system of motion.”

Android design head Matias Duarte emphasized that elements, transitions, and animations should appear as if in real life: “Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.”

What do you think of the cross-platform, flat designs being adopted by the major platforms? Let us know in the comments.

Author

  • Ryan Daws

    Ryan is a senior editor at TechForge Media with over a decade of experience covering the latest technology and interviewing leading industry figures. He can often be sighted at tech conferences with a strong coffee in one hand and a laptop in the other. If it's geeky, he’s probably into it. Find him on Twitter (@Gadget_Ry) or Mastodon (@gadgetry@techhub.social)

View Comments
Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *