What explains the current shift from glossy UIs to matte UIs?

  • I've noticed an interesting phenomenon in the user interfaces of many famous applications, they're moving away from the glossy complex to a more dull and bare minimum design.

    Why the sudden change? It also appears that most of these companies have adopted this design around the same time, was that linked to some new study?


    Examples of icons that have changed from a glossy look to a flatter one, including Lync, Skype, Photoshop, Last.fm, Chrome and others

    Just a trend. The Microsoft style formerly known as Metro is a big factor in this trend. They've done so much advertising and marketing to promote it. Also, it's technically easy to implement, and that doesn't hurt it's popularity.

    This would be a good question for [graphicdesign.se] as well.

    Note that all but the last of your examples are Microsoft Products. As @obelia stated, it's part of their "Modern" UI movement.

    Somebody at MS decided that they really liked the 16 color '90 look, and decided to use on all their products, including word and skype.

    @CodesInChaos: Seriously?

    Simply, it's the current trend. Microsoft is pushing it with metro. It's just basically the opposite of what Apple has been pushing the last few years (skeumorphism). It's the same as asking why indie rock is big when hip hop was big 2 years ago; trends

    I'm interested in this as well, as it seems to have permeated web design and appliance design in general. For example, the Nintendo DS and DS Lite were both glossy, but the DSi was matte.

    Designers follow trends like everyone else. Remember when Half-Life was huge? Everything was Half-Life orange for a while.

    Its the same as with cars. All cars used to have glossy or metallic paint, and then The Dark Knight came out with a matte Batmobile, and suddenly matte paint was cool.

    Lync, Word and Skype - three of the four examples in your table - are created by the same company (Microsoft). Regardless of whether or not there is a global shift towards a more "flat"/"matte" design, your example is crap!

    @LordScree That's why here, at StackExchange, we have the ability to edit everything. So please, decrapify my question by editing it. Also, same note was mentioned 3 times already.

    I've updated the icon table design and added a few more (Microsoft-centric) examples. If anyone else would like to update the table to add any other appropriate examples or would like to be able to use a similar table for any other UX.SE questions/answers, here's the PSD

    Basically the world is going through a big depression not seen since the Great Depression in the 1930s. This could have some influence on designers and their outlook while designing icons, making them use more muted colours which would reflect their mood and general outlook on life while living in a depression. Obviously it's not as bad as the great depression yet because most designers aren't using black and white icons.

    IIRC it all started with the Adobe-Macromedia merger when the Macromedia designers took over Adobe (the main force that dictates what is currently hip).

    Significantly, Apple just jumped on this bandwagon with iOS 7.

    "Steve Jobs' Love of Simplicity Fueled A Design Revolution"

    I for one welcome our new matte UI!

    I wonder if design ease has something to do with it too. For example, I'm a programmer, but I'm definitely not a graphic designer. I have very minimal Photoshop skills and patience for those tasks. But I can bang out decent looking matte-themed designs no problem -- they won't be *amazing*, but they'll be *acceptable*. So it's very enticing for me to build UIs that way, since I no longer need to find a skilled artist to produce *acceptable* results. In web apps I don't even need to make *images*. I don't know why the shift initially occurred but from that POV I can certainly see its appeal.

    Strange considering that most monitors nowadays are glossy instead of matte.

  • Kit Grose

    Kit Grose Correct answer

    8 years ago

    It's a shame no one has mentioned the impact of the Mac OS X "Aqua" interface on all this.

    Aqua was the name Apple gave to the user interface style it introduced in Mac OS X. It changed the Mac's software from looking like this:

    Screenshot of the MacOS 9 Finder demonstrating the Platinum UI style

    …to looking like this:

    Screenshot of the Mac OS X Finder demonstrating the Aqua UI style

    Here's Steve Jobs introducing it for the first time at MacWorld San Francisco 2000. As he says:

    One of the design goals was when you saw it, you wanted to lick it.

    It's no doubt that a huge influence into the look and feel of Aqua with all its lickable buttons and pinstripes and translucency was the huge popularity of the iMac:

    The iMac G3 showing colourful plastic, pinstripes on white and translucency

    Aqua was a huge change in UIs; they changed from being predominantly drawn by the OS to being defined mostly as layers and layers of bitmap (or even vector) graphics. Windows XP followed this same idea in 2001; its Luna UI looked like this:

    Screenshot of Windows XP showing its Luna UI style

    When it was released, Aqua made a similar sort of splash as the iMac had when it was first released. It felt like for the next 5 or so years, every single thing from third party designers had some unnecessary gloss on it:

    Some example shiny bubble icons found on the Internet

    But even despite the popularity of the translucent and glossy coloured plastic aesthetic, Apple has become more and more restrained with its hardware designs over time:

    Photos of iMac designs from the original G3 model to the first aluminium iMac

    The relentless march of material design, simplification and style in hardware had a similar effect on the software—with transparency being reduced, pinstripe visibility fading until they disappeared entirely, the introduction of brushed-metal interfaces, all the way through to something not particularly different to the old, predominantly grey interface from MacOS 9:

    Screenshot of Mac OS X v10.2 Jaguar, showing how the interface was toned down from the earlier releases

    Screenshot of Mac OS X v10.3 Panther, showing the massive expansion of brushed metal

    Screenshot of Mac OS X v10.4 Tiger, showing the reintroduction of more gloss, e.g. in the menu bar

    Screenshot of Mac OS X v10.5 Leopard, showing the integration of brushed metal and Aqua to form the predominantly grey UI

    This change isn't specific or unique to the Mac; it happened all across the industry.

    In the meantime, though, iOS was released (then called iPhone OS), which looked like this:

    Screenshot of iPhone OS v1.0

    And as you almost certainly know by now, the iPhone and iOS itself have been massively successful. Many, many applications (including Skype) were released with the glossy icon overlays to look appropriate next to those icons.

    But, like Mac OS X went from looking exciting and refreshing to a gaudy eyesore over years, that original iPhone OS interface screenshot is now 6 years old, and it now looks like this:

    Screenshot of iOS v6.0

    …as you can no doubt see, there's been an extremely, uncharacteristically slow march of progress when it comes to the look-and-feel of Apple's mobile offering.

    The old adage goes something like:

    If you're not improving, you're going backwards

    And so by staying more or less the same, two of the major competitors to Apple in that space (Google with Android and Microsoft with Windows Phone) have seized the opportunity to do something radically different, and to advance the state of the art themselves, leaving them looking like this:

    Screenshot of Android v4.0 Ice Cream Sandwich

    Screenshot of Windows Phone 7

    Updates: Just thought I'd add a bit more of a comment on the Android "Holo" and Metro visual languages, and how the two manufacturers describe the flatter, less glossy aesthetic to designers:

    When they first announced the Metro design language (or as they now call it, the "Microsoft design language"), Microsoft made some thinly veiled jabs at Apple's glossy iOS aesthetic. One of the main claims they continue to make is that the flatter, more typographic design style of Metro is more "honest", and "authentically digital". On their Windows Phone design principles webpage, Microsoft is pretty explicit about this:

    Create a clean and purposeful experience by leaving only the most relevant elements on screen.
    When it comes to designing great app experiences, we believe in content, not chrome.

    Focusing on content over chrome reduces unnecessary elements, allowing your app's content to shine. Let people be immersed in what they love and they'll explore the rest.

    They later state:

    Being authentically digital is about going beyond the rules and properties of the physical world to create new and exciting possibilities in a purely digital space. Take full advantage of the digital medium.

    Be "infographic." Information delivery is the primary goal, not the wrapper around it. Adopting the infographic approach will help you optimize the user experience on Windows Phone

    Regarding the redesign of their logo, Microsoft again touches on the justification of being "authentically digital" as their reasoning for removing the gloss:

    It was important that the new logo carries our Metro principle of being “Authentically Digital”. By that, we mean it does not try to emulate faux-industrial design characteristics such as materiality (glass, wood, plastic, etc.).

    For their part, sadly, Google have not been very explicit about their intentions in creating Holo. While they have definitely moved strongly toward the so-called flat design style, they haven't been particularly explicit about why. Regarding icons (which are at the core of your question), they simply say:

    Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.

    They do go into some better depth in their developer documentation however, where they say (emphasis mine):

    Image from the Google developer guidelines, showing what not to do with gloss
    Icons should not be cropped. Use unique shapes where appropriate; remember that launcher icons should differentiate your application from others. Additionally, do not use too glossy a finish unless the represented object has a glossy material.

    Their previous design guidelines from Gingerbread and earlier (that is, pre-Holo), also explicitly mention texture ("Icons should feature non-glossy, textured material"), with the full description of the materials described as such:

    Launcher icons should make use of tactile, top-lit, textured materials. Even if your icon is just a simple shape, you should try to render in a way that makes it appear to be sculpted from some real-world material.

    …and later…

    Android Launcher icons are...

    • Modern, minimal, matte, tactile, and textured
    • Forward-facing and top-lit, whole, limited in color palette

    Android Launcher icons are not...

    • Antique, over-complicated, glossy, flat vector
    • Rotated, Cropped, Over-Saturated

    So clearly it's been the intention of Google and Microsoft pretty much from the get-go of their respective current mobile operating systems to avoid the iOS/Aqua/glossy aesthetic.

    +1 Even though it is a long way to scroll back up to the voting buttons... :D

    I think windows 8's Metro has huge effect on the UI changes. Sites like billboard has already changed their UI which looks similar to Metro. By the i like to UI of Mac OS X. Even I have installed a Mac OS X Theme in my Ubuntu system.

    "It felt like for the next 5 or so years, every single thing from third party designers had some unnecessary gloss on it:" This is my huge complaint with gloss. Nowadays whenever I see excessive gloss, it's usually a sign of amateur design.

    The disparity between GUI and hardware design from Apple I find quite interesting. Might change with with the removal of Scott Forstall but I'm not so sure. It'd be a big shift, and if anything all Apple products have been moving *more* toward iOS skeuomorphism. It'd be a big change to fling back, and at this rate they're behind the curve if they decided to go "flat".

    +1 i think this is a much better answer as it focuses on the question as an aesthetic visual design trend (and doesn't confuse with the concept of skeuomorphism, which is arguably a different topic).

    @DA01 skeuomorphism in UI design has very definitely taken on the meaning of "emulating physical things" rather than just the standard meaning from physical products

    @BenBrocka while I don't like that, I do agree. The term has broadened a bit. That said, the original question was talking more about a particular aesthetic, as the examples weren't really emulating real things.

    The picture showing the evolution of the iMac, made me realise people don't want to buy a computer anyway, as in they don't really think of a computer as something special, so computers don't need to look noticeable. I mean its like TVs you don't buy a TV because it looks cool, as you don't *use* a TV, you watch programmes and the TV itself is unnoticeable as possible. People can now abstract away from the hardware meaning it can be more minimal, now in the same way people are starting to be able to abstract at from the software and focus more in the data/task, so the UI becomes more minimal.

    You could add the `windows vista aero glass` episode as well.

    @User117: While I believe the shift from the classic Windows shell through Luna to Aero Glass and now to sort of "flat Aero" is caused by the same sort of thing, I don't know that it'd help answer the OP's question, which mostly centred around glossy/shiny things. I think the Windows Vista logo compared to the Windows 8 one is probably worth a discussion, or at least addition to the table in the question.

    Dude this should be a blog post. I don't read much and an answer as long as that is usually a nono but it's so excellent I kept with it all the way through!

    So many images, so the upvotes...

    holy crap this is a very well thought out response! definitely deserves the upvote!

    Redefines 'thorough'.

    This answer was obviously a lot of work, and it gives a really interesting historical lesson and was a good read. But, it doesn't seem to attempt to explain why any of these changes took place to begin with.

    @JasonC I think the direct quotes from (especially) Microsoft regarding their intention with the Metro design language and their Windows rebrand seem to explain their thinking as best as I can. Is there some justification you think I've missed?

    @KitGrose Well; it's a really wonderful answer. I think it's this: It's pretty clear that MS and Google were trying to set themselves apart from Apple. Even in the included quotes, though, their primary motivation didn't seem to be UX based at its core, but more of a negative campaigning tactic against Apple, to paint its themes as "antiquated". If Apple had the flat theme I'd bet MS and Google would have switched to glossy and made similar "UX" based comments. So it's still all relative to Apple. What *I* want to know then is why *Apple* changed. ...

    ... E.g. Why is the glossy a "gaudy eyesore" now but was fine 6 years ago? What changed that made us suddenly interested in "authenticity" and does a flat interface *really* inspire trust in a controlled environment? The psychology behind it, but separate from the competitive marketing. That kind of thing. The UX side rather than the marketing campaign side. But like I said, great read, thanks! Plus combined with the other answers it's a really nice topic in general.

    The Apple fanboy-ism in this post is too damn high!

    @ShreyasTripathy Heh, I'll cop to that (at least on some level), but I still maintain that Apple was a clear trailblazer of this style and they've been a very important influencer of design trends for some time (presumably in part because such a sizeable proportion of visual designers use Macs). I *did* indicate that iOS 6 was looking dated and mentioned Microsoft's Luna theme as being representative of the trend, though more as a follower than a leader (we were all expecting XP to look like the screenshots we saw of Whistler).

    Agreed. I was just venting my frustration here to be honest. I used to always look forward to what Apple would do in terms of visual design and aesthetics because Steve Jobs was always gunning for that. The prime example being - **One of the design goals was when you saw it, you wanted to lick it.**. But of late, they have taken a step back and aren't the pioneers in terms of design anymore

    One motivation for Metro that I took away from the launch announcement was the desire to run the same app on phones and desktops. A flat style wthout anti-aliasing is much easier to scale, but IMHO is rarely sleek and often sad.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM