Liquid Glass is a significant new step and evolution of the look and feel of Apple software. It introduces a flexible, dynamic layer to apps and system experiences across Apple’s ecosystem of products.
It builds on learnings from all the way from the Aqua user interface of Mac OS X, through to the realtime blurs of iOS 7, to the fluidity of iPhone X, the flexibility of the Dynamic Island, and the immersive interface of visionOS. Building off these learnings, rather than trying to simply recreate a material from the physical world, Liquid Glass is a new digital meta-material that dynamically bends and shapes light.
And simultaneously, it behaves and moves organically in a manner that feels more like a lightweight liquid, responding to both the fluidity of touch and the dynamism of modern apps.
I’m Chan and i’m a designer on Apple’s Human Interface design team. In this session, we’ll go over some of the core dynamic properties of Liquid Glass. Then, my colleague Shubham will discuss how Liquid Glass automatically adapts to different contexts and environments.
Lastly, Bruno will take us through some key principles on how to work with Liquid Glass. Let’s dive in.
Liquid glass complements the evolution of Apple product design, as screens have gotten more rounded and immersive.
It’s represented in the UI in rounded, floating forms that nest neatly in the rounded curves of modern devices. These clearly defined shapes feel easy to tap and are designed to relate to the natural geometry of our fingers so they feel friendly to touch interaction.
The primary way Liquid Glass visually defines itself is through something called Lensing.
Lensing occurs all around us in our experience of the natural world. Through this experience we’ve all gained an intuitive understanding of how the warping and bending of light of a transparent object communicates to us its presence, its motion, and form.
Liquid Glass uses these instinctive visual cues to provide separation and communicate layering in a new way while letting content shine through underneath it.
... continue reading