Thoughts on Liquid Glass

Apple just announced its new design language - Liquid Glass. This is an overhaul for the visual design across all of Apple’s products. For a product designer, any time a large company updates its core design language is a big deal. But Liquid Glass may just be more disruptive than usual, in good ways and bad.

In some ways its a return to form, a call back to earlier design principles, in others it’s forward looking.

I’ve been nerding out on all the material Apple’s released during its WWDC sessions and did something that I know I should never do… I installed the very first developer betas… never a good idea.

So far, it’s… interesting. It’s still in a very rough state. But rather than just listing out things I like and don’t like, I started thinking about the design lineage of Liquid Glass, trends in UI design and how design systems influence each other.

Often ideas that are abandoned by one design language are picked up by another one later on and sometimes, concepts and ideas that were rejected by one design system gets accepted later on through as it has gained widespread acceptance.

Material Design

Back in 2014 Google unveiled Material Design, their new overarching design language to be adopted across their products and intended to provide building blocks for designers and developers across platforms. A novel idea and it definitely has had a huge impact over the years, Material Design introduced the masses to the concept of design systems.

During its design a member of the team posed a question about what the windows were made of and what was behind them. This apparently spurred discussions and resulted in them creating this digital material that content was made of. They modeled the interfaces extensively using paper to understand how the content would stack and interact with light. But beyond paper and ink, this new material had to have properties impossible in the real world. As the head of design at Google Matías Duarte said:

"…unlike real paper, our digital material expands and reforms intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch."

It’s a novel idea that provided the foundations of the design system. My hot take though is that through the subsequent versions, this focus on physicality and material have been de-emphasized through the years.

The reason I mention this history of Material Design is because it feels that with Liquid Glass, Apple posed a similar question and Liquid Glass is their answer. It’s a physical material with properties beyond what’s possible in the real world… unless of course we’re living in a simulation, but that’s a whole other thing.

Memories of Aqua

Old people like me have fond and not so fond memories of using MacOS Classic, back then their visual design language was called Platinum. But after acquiring Next Apple went into crunch mode to develop the next generation of MacOS, called… MacOS X, Apple’s always had this thing for roman numerals.

With MacOS X apple did something groundbreaking, they modernized the UI in ways that hadn’t been done before. They created the Aqua design language, using glass like bubbles for buttons, using shadows and transparency everywhere and motion was intentional, the genie effect was amazing at the time… to this day, the first thing I do on a new Mac setup is to turn on the magnification effect on the dock.

This was novel in the world of computing, interfaces were generally gray, flat and animations were sparse, after all, why waste computing cycles on such frivolous things. But for users MacOS X felt new and fluid in ways computers weren’t and it didn’t take long for its influence to be felt. Microsoft introduced Vista with its Aero interface, where every window was a glass panel with consistent lighting across all windows. Aero was later refined in Windows 7 after the not so warm reception it received

Aqua was an interface that adopted physicality and depth. Through the years this physicality evolved into the skeuomorphic UI’s that took this physicality to the extreme. In a way that makes sense, the intention of skeuomorphism is to create familiarity in digital interfaces with analogous real objects… it just went pretty far.

The great flattening

As this skeuomorphic trend went overboard another trend in UI design started rearing its head. Flat design rejected this physicality in favor of a purely digital design. Android started down this road before Material Design with its short lived Holo design style and Microsoft went all in with its Metro design language.

My hot take on the subject is that flat design became inevitable as platforms matured and had to adopt to more screens. The raster based assets needed for skeuomorphism became difficult to handle and devices weren’t quite in a place to render a lot of complex vector based graphics. Some of us have shiver at the thought of providing endless assets, dealing with the naming schemes and working with devs trying to make sure correct assets would load on the web for high dpi screens.

In 2013, Apple followed suit with its release of iOS 7. Notably the interface design lead by the new Chief Design Officer at Apple, Jony Ive. Skeuomorphism was out, the new iOS 7 design language embraced its digital nature. Elements were designed for rectangular displays and were intended to go edge to edge.

One of the essential elements of this design language was the use of blurs, panels and toolbars were intended to look like rice paper, subtly hinting at the content behind it. While it was visually flat, it kept a modicum of depth as a core principle. As a designer, I loved this idea, it provided a way to provide affordance for content, it indicated when content went below the fold, when content was scrolled etc. This aspect of iOS became a significant aspect of Apple’s design through the years, others adopted it as well, with Microsoft using it in its Fluent design language, it’s a part of Material 3 Expressive and Samsung leaning heavily into it with its OneUI 7 release. And with this background blur now being a property in CSS, its all over the web as well.

Now, this was in no way done first in iOS, Apple had already used this to provide depth in Aqua, Microsoft also did in Aero and so on. But iOS really leaned into it as a functional mechanism rather than just a cool effect that they could do.

Removal of chrome

With flat design, one of the core concepts was that content was king, the UI should recede and not call too much attention to itself. White space was heavily used and chrome was removed on controls, buttons weren’t floating or receded into a toolbar, rather an icon was enough, showing chrome only on when users interacted with the element.

Early on, reception was mixed with many feeling that these interfaces lacked affordance. Navigation and options was often nested into newfangled hamburger menus with the main UI often showing only the main actions. But with time, these conventions became learned and common.

Return of physicality and depth

Over the years, the great flattening has receded somewhat, with depth especially returning with shadows and edges on content.

This is in all likelihood in no small part influenced by the work being done in the big tech companies on augmented reality. Unlike the screens we’re used to, AR overlays objects into the real world, so physicality becomes important as well as interacting with light… these are core concepts of Liquid Glass

Now, as a designer… I think this physicality is great. Doing designs back in the days of skeuomorphism was a lot of fun, you were required to have some design chops to recreate the textures and lighting of objects. While flat design prioritized the content over chrome, and rightfully so, I can’t help but feel that the graphic design skills were lost. We have a generation now that has only grown up on flat design and is now re-discovering physicality… the short lived trend of neomorphism is a good example of that.

An interesting aspect of physicality is the concept of physics and weight in the system. When iOS 7 was first introduced it spent a lot of effort on how much objects weighed. When the notification shade was pulled down the user could slam it down and it would have a small bounce to it, shown visually and felt through haptics. But when the control center was pulled up, it was intended to be lighter and more springy.

These ideas were largely abandoned by iOS later on, while keeping some of the haptics, like when dismissing notifications.

Material Design 3 Expressive however picked this up quite a bit, using the same pattern of physical animations and haptics to give objects weight such as dismissing a notification has a noticeable snap when it disconnects from the list of notifications.

Teething issues

But with this physicality Liquid Glass seems to be forgetting some of the lessons flat design taught, while claiming to maintain them.

Objects now float over the content, with subtle progressive blurs used on the top and bottom of the display intended to make these floating objects more legible. Liquid Glass also tries to be independent from dark and light modes by adapting to the content below it. When light content is below the button, the icon is dark and the glass refracts the content below, as soon as dark content moves below the button, the glass the content below becoming dark and the icon turns white… it’s a nifty idea… so far… it’s super distracting. In effect, by trying to get out of the way the UI chrome ends upp calling all the attention to itself… it’s a nifty idea though… and when it works, it looks great.

This has probably been the biggest criticism of Liquid Glass, it often lacks contrast when it needs it, and over contrasts when it shouldn’t.

Liquid Glass also forgoes the traditional toolbars, buttons get chrome back and each button stands on its own, even when spatially grouped, this can work well in some situations, but being a design language that spans multiple platforms, it needs to be able to adapt to the needs of the platform rather than dictating the platform changes… and nowhere is this more apparent than in MacOS. Just playing around the OS, windows feel cluttered and messy, it’s something I as a user can get used to… but demanding every object to be floating rather than giving them a toolbar that can float somewhat goes against my current instincts as a designer.

Similarly sidebars on the left of windows are now floating, it’s a good idea on paper, but it creates issues. Famously Figma tried to introduce this trend in its UI3 design… the user base revolted and the rolled it back. The issue is that requires more space, a few pixels here and there, but more importantly content can move behind the window and then becomes visible to the left of the sidebar. I haven’t played around with the MacOS Tahoe beta enough to see if this is an issue, but just early impressions… I don’t love it… but I can get used to it.

Judging by history

If we look at the last two large design changes Apple did, they share a pattern. It’s first iteration went overboard. The initial receptions to Aqua were often “it’s too busy, it’s too colorful, it’s too animated etc.” - during the first developer betas Apple introduced the graphite theme to accommodate those who felt it was too colorful.

People also thought the pinstripes that were all over the operating system were distracting. Over the years and subsequent releases, Aqua pulled back on being its in your face design and became more refined.

Similarly when iOS 7 was introduced reactions were mixed. People thought it was too white, text only buttons weren’t recognizeable as buttons, the Helvetica Neue typeface was too thin and again… it was too colorful. Many also felt the blurring of content behind toolbars was distracting.

So, over the years the design was refined, typefaces gained some weight and were changed to the new San Francisco typeface. Some buttons regained some chrome around them and over time the design became much more refined.

Knowing that, I’m fairly confident that Liquid Design is in its early stages of showing off what it can do. I wouldn’t be surprised if the clear buttons gained some frosting to make them more distinct from the content below and adapting to dark and light content might evolve or be abandoned in favor of more frosting on the glass material.

This design language needs time to settle, it takes time to see what works and what doesn’t, the first releases are always full of concepts and ideas that sound like a great idea but don’t gain a lot of adoption.