Liquid Glass showcase: Tide Guide

Good morning everyone. My name is Tucker MacDonald and I'm the founder of Condor Digital, an app design and development studio. I'm thrilled to be here today to talk about my app, Tide Guide. I certainly realize that Tide Guide doesn't have the same household name recognition as some of my previous presenters. So let me tell you a little bit about the app.

Tide Guide is my ocean tides and marine weather app that I've been publishing since 2018.

The app has grown from my experiences growing up by the ocean, fishing with my grandfather, monitoring the evening weather forecast to go for a boat ride or track the full harvest moonrise over the ocean.

The app itself has evolved over the years alongside annual system updates. I've always admired apps that adopt the latest design patterns and system features. So this is something that I try to do with Tide Guide every year across all platforms, including iPad, Watch and Mac.

I've always strived to have the app feel purpose built for each platform. From being super simple and glanceable on Apple Watch to having more informationally dense layouts on iPad and Mac. One aspect of the app that I'm really proud of is the interactivity throughout. I've always wanted it to feel tactile and fluid. Be delightful to use.

For me, this is what Liquid Glass is in service of creating new ways to interact with apps without getting in the way. It lets interfaces feel alive without being overweight, expressive and functional without being distracting.

So this morning, I'm excited to share a little bit about how I've been adopting Liquid Glass in an app that's all about water.

There are the big and default changes to nav and toolbar buttons added margins around sheets and containers.

But my favorite parts are a variety of subtle ways that you can use glass effects within the interface to enhance interaction and add clarity to the design.

What surprised me most with these effects is how subtle many of the improvements can be, yet how dramatically they can refine the feel of the interface. A little concentricity here, a little shimmer there, and all of a sudden the interface feels more intentional, alive, and functional.

So today I'll go over some of these effects and show how and where I've used them in Tide Guide and highlight a couple aspects of the design more broadly that don't require any glass effects at all that I've enjoyed adopting.

So one of my favorite aspects of liquid design as a whole is the interactive effect, and this is most obvious on buttons. This wouldn't be a design talk without going over a little minutia of a button.

Buttons are obviously essential to all apps, and I'm a fan of buttons that feel like buttons in all of their placements. Proper touch down states, animations to handle loading, etc. and in Liquid Glass buttons have this beautiful new style. This is what gives them the great behavior when they expand and morph under your finger. It's a small thing, but for me it creates this subconscious sense of delight. I found this effect to be particularly useful on smaller buttons, ones that are normally covered by your finger when you tap them. Here's an example where it's not immediately obvious that you're in the tap target until you lift up your finger with a Liquid Glass button style applied. You get an immediate reaction when touching it, and it makes the interface feel much more Responsive.

It's not only useful in smaller buttons though. Here in my hourly charts sheet, I've added it to the day of the week buttons and it causes them to expand and morph within the container. The effect is snappy and with a little haptic feedback it makes for a really nice moment.

Individually, these effects are small, but they start to establish a new expectation of interaction. They make buttons feel intentional and immediate.

Building on these interactive effects, I've found the identity variant to be one of the most delightful and one of the most flexible. This effect doesn't change the appearance of a view until you interact with it.

I've applied this effect here to the main tidal wave. On first glance, it's not obvious there's anything glassy about it, but as you start sliding it, the interactive effect adds a soft, subtle highlight beneath the wave. It's a small detail, but I think it's really delightful. I've added it here in the tide charts as well. Previously, I had a small scale animation on each card, but adding the glass effect makes the cards feel more cohesive within the rest of the app and the platform as a whole.

And here in the hourly chart containers, the same effect is applied to the background. So when you scrub through the hourly conditions, the container scales and feels very tactile.

Next, I'd like to show some examples of using glass and some kind of custom ways, similar to other system materials and colors. This is effective to draw attention to small details or spruce up an animated component or empty state.

I've added it here again to the tide chart as a little highlight, showing the selected water level as you slide your finger along the wave. And here in the station empty view. When a new user is setting up the app for the first time, the glass material gives the rings of the radar animation a beautiful refraction effect.

These effects have shown me how flexible Liquid Glass can be beyond buttons and toolbars. It can bring a bit of delight to moments that might otherwise feel flat or overlooked.

Next, I'd like to walk through an example of using some system components in a slightly custom way to design experiences that feel at home. In the new design, I recently introduced a new charts tab to the app in. One of the things that I think is really great is how users can set things up to suit their own preferences. You can change the time line of the charts, the order, the height, and more. I first shipped all of these options in a context menu.

I love this pattern and context menus are great in so many places, but after using a bit, I noticed some friction and some paper cuts with my implementation. you open the menu, navigate to a submenu. Make your selection and the whole menu deconstructs every time. Very quickly. It can lead to many, many taps to figure out how you'd like to get things set up.

Removing the hierarchy and putting everything in one menu I didn't think was that big of an improvement. I find a list like this to be very hard to read at first glance.

I've ended up using a glass popover instead, using the same components from inside the menu. I think this helps with the initial understanding of what's available, and you can change fiddle and find the options without the menu dismissing.

You can even tap in and get a full sheet of controls.

Reorder things how you'd like, and when you're done, everything collapses back into the ellipsis menu, giving a sense of origin to all of these settings.

I've used the same pattern here in the tide tables as well, with a custom component for various presets. The popover allows for just a little more customization than, say, using a control group in a menu.

So, beyond interaction effects and materials and updated components, there are a few aspects from the new design that I've really enjoyed adopting. The increased concentricity that Apple keeps talking about. I really do love the soft corners throughout interfaces. It makes screens feel much more welcoming and makes them feel at home, no matter the device or screen space available.

The consistent leading alignment and spacing. This is something I didn't think I'd appreciate as much as I have, but it really helps increase familiarity across apps and screens. Being able to quickly scan the leading edge of every row and know action and content based on color and iconography helps reduce the cognitive load when looking at settings or functions.

And finally, the new keyboard and search bar placement text text entry is one of those things that is so frustrating when something unexpected happens. So I love being able to support the new keyboard design, and when I encounter an app that still has the old one, it's becoming more and more apparent every week.

So these are some of the ways that I've been building Tide Guide to feel modern and delightful on the latest platforms. Liquid Glass and the new design system have helped me bring new levels of interactivity and delight to the app.

There's rightfully a lot of attention on the actual glass material part of the design, but the new design system is full of fantastic usability improvements, so much so that many of the changes that I've made to padding and hierarchy, I haven't cordoned off to just the latest OS version.

Going through this process, one of the things I realized was that a redesign is certainly not required to adopt the new design. In fact, my process was more adopt and then redesign. Many of the best aspects come from just using the latest version of system components.

I've had a wonderful time exploring what's possible with Liquid Glass. For me, it feels like the start of a new era of interaction with software. Everything is more fluid and recedes to highlight the content of an app. I've been thrilled with the response from Tide Guide users. I'd love for you to check out some of what I've shared today in Tide Guide. It's available on all the platforms in the App Store. And shout out to my family watching live who have been my beta testers from day one. Thank you. Have a great day! Back to Sarah.