Material Design and Opaqueness

I’ve been playing around with Material Design for a few days, and the most striking thing for me is the opaqueness. This is in stark contrast to iOS 7 and iOS 8.

Since iOS 7, Apple has gone to significant lengths to make the toolbars at the top and bottom of the screen translucent. To do this without decreasing the legibility of the frontmost element, Apple uses a frosted glass effect which is apparently quite computationally expensive and is not used in less powerful devices (for example, the iPad 2 reverts to simple transparency for some elements). Apple has mentioned that the goal was to make the underlying content stand out and to minimize distraction from the control UI elements. You also see a lot of iOS apps using gray toolbars, which also helps to emphasize content instead of the app.

On Material Design however, they do not use translucency anywhere. Everything is an opaque surface, just as paper is opaque. Although Material Design emphasized depth and the z-axis, this is conveyed solely through the use of shadows.

The feeling of opaqueness is further fortified by the use of bold colors for UI controls. Whereas iOS apps often use only a humble gray color as the background for the UI controls, Material Design encourages bold colors. The effect is that the toolbar and buttons make a very strong impression and feel omnipresent, a sense of opaqueness.

The new iOS design and Material Design feel very different. iOS feels very light. Material Design looks a bit heavy on the top.

Although opaqueness itself is neither good nor bad, in terms of the history of computer UI design, it does feel a bit backward. It feels like going back to the Windows XP days since every PC-OS since then has used translucent elements. The bold colors of Material Design are also reminiscent of the vivid toolbars of that OS, which fell out of fashion since. Similarly, iOS moved from an opaque design to a translucent design. I am wondering if the absence of translucency in Material Design is a result of having to make it work well on cheap devices which don’t have good GPUs.

iOS WWDC 2014 app

Note the translucency on the leftmost image, on the bottom toolbar.


Google I/O 2014 app

Running on KitKat but using Material Design.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: