WWDC25: Meet Liquid Glass | Apple

TL;DR

Liquid Glass enhances Apple's UI with dynamic, adaptive design.

Transcript

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 ... Read More

Key Insights

• Liquid Glass is a new digital material that dynamically bends and shapes light, offering a fluid, organic interface experience across Apple's ecosystem.
• The design of Liquid Glass is informed by Apple's previous UI advancements, such as the Aqua interface, iOS 7's blurs, and the fluidity of iPhone X.
• Liquid Glass adapts to different contexts and environments, ensuring clear separation and legibility by dynamically changing its properties.
• The material's behavior is designed to feel lightweight and responsive, with a gel-like flexibility that aligns with the fluidity of user interactions.
• Liquid Glass uses a technique called Lensing to provide visual separation and communicate layering, without scattering light as traditional materials do.
• The material's adaptive nature allows it to seamlessly transition between different app states, maintaining a consistent floating plane for controls.
• Liquid Glass offers two variants: Regular, which is versatile and adaptive, and Clear, which is more transparent and suitable for media-rich content.
• Accessibility features such as Reduced Transparency and Increased Contrast are built into Liquid Glass, ensuring inclusivity for all users.

Questions & Answers

Q: What is Liquid Glass and how does it enhance Apple's UI?

Liquid Glass is a new digital material introduced by Apple, designed to enhance the user interface across its ecosystem. It dynamically bends and shapes light, creating a fluid and organic experience that responds to user interactions and environmental contexts. This material builds on Apple's previous design innovations, incorporating elements from the Aqua interface, iOS 7, and iPhone X, to provide a more immersive and visually appealing interface.

Q: How does Liquid Glass adapt to different contexts and environments?

Liquid Glass is designed from the ground up to be adaptive to both its size and its environment. It continuously changes its properties to ensure legibility and clear separation from the content layer. For example, as text scrolls underneath, shadows become more prominent to create additional separation. It can also switch between light and dark modes independently, allowing it to fit seamlessly into any context.

Q: What are the key visual techniques used by Liquid Glass?

Liquid Glass uses a technique called Lensing to provide visual separation and communicate layering. This technique involves dynamically bending, shaping, and concentrating light in real time, offering definition against the background content. Unlike traditional materials that scatter light, Liquid Glass maintains optical integrity while allowing content to shine through, creating a visually grounded and immersive experience.

Q: How does Liquid Glass maintain a consistent floating plane for controls?

Liquid Glass maintains a consistent floating plane for controls by dynamically morphing between controls in different contexts. As users navigate through app states, Liquid Glass seamlessly transitions between sections, ensuring that controls remain on a singular floating plane. This design approach makes transitions fluid and seamless, enhancing the overall user experience by maintaining visual continuity and coherence.

Q: What are the two variants of Liquid Glass and their specific uses?

Liquid Glass offers two variants: Regular and Clear. The Regular variant is versatile and adaptive, providing all the visual and adaptive effects discussed. It ensures legibility regardless of context and works in any size over any content. The Clear variant is more transparent and suitable for media-rich content. It requires a dimming layer to maintain legibility and should only be used when certain conditions are met, such as when content is bold and bright.

Q: How does Liquid Glass incorporate accessibility features?

Liquid Glass includes several accessibility features to accommodate different user needs. These features act as modifiers that change certain layers of the material without sacrificing its magic. For example, Reduced Transparency makes Liquid Glass frostier, obscuring more of the content behind it. Increased Contrast makes elements predominantly black or white, while Reduced Motion decreases the intensity of some effects. These features are available automatically whenever Liquid Glass is used.

Q: What is the importance of tinting in Liquid Glass?

Tinting in Liquid Glass introduces a new way of emphasizing elements while respecting the principles of the material. This technique enhances legibility and contrast by generating a range of tones mapped to the brightness of the content underneath. Tinting should be used selectively to bring attention to primary elements and actions in the UI. It helps connect the material more deeply to the content around it, making the interface feel more transparent and grounded in its environment.

Q: How does Liquid Glass contribute to a unified design language across Apple platforms?

Liquid Glass establishes a unified design language across all Apple platforms by seamlessly blending hardware and software. It introduces a more fluid and dynamic interaction experience, bringing a striking new look to every part of the interface. The material's adaptive nature and consistent visual techniques ensure that the user experience is cohesive and immersive, regardless of the device or platform. This unified approach marks the start of a new chapter in Apple's visual and interaction design.

Summary & Key Takeaways

• Liquid Glass is a revolutionary digital material introduced by Apple, designed to enhance the user interface across its ecosystem. It dynamically bends and shapes light, creating a fluid and organic experience that responds to user interactions and environmental contexts.

• The material builds on Apple's previous design innovations, incorporating elements from the Aqua interface, iOS 7, and iPhone X. It adapts to various contexts, ensuring clear separation and legibility while maintaining a lightweight, responsive feel.

• Liquid Glass offers two variants, Regular and Clear, each with specific use cases. It includes built-in accessibility features to accommodate different user needs, and it establishes a unified design language across Apple's platforms, blending hardware and software seamlessly.