Design with SwiftUI

♪ ♪ Will: Hello and welcome to "Design with SwiftUI." My name is Will, and I'm a designer on the Apple Maps team. Later, I'll be joined by my colleague Philip, and together, we're going discuss some of the unique benefits and applications we've found from using SwiftUI. We will speak from our perspective as designers and share personal insights about how SwiftUI has enhanced our design process. We will also provide real examples from our work on the newly redesigned Maps app in watchOS 10. On the Maps Design team, we're huge fans of SwiftUI. It's helped us validate design concepts, provided us with unique capabilities that no other tool offers, and given us a better understanding of how interfaces are constructed and brought to life. For this year's watchOS app, we developed all our designs in SwiftUI, right on device. This gave us control over every detail, from spacing and typestyles to animations and interactions. In today's session, we'd like to share how SwiftUI impacted this design work. Along the way, we'll cover how SwiftUI can be a powerful yet approachable tool for designers, how it helps you think through the details of your concepts, design rich interactions, accurately test your ideas, and effectively present your work to others. Let's begin by understanding how SwiftUI functions as a design tool. While SwiftUI is a powerful framework for building applications, it's also a uniquely powerful tool for designers, enabling us to create interfaces with higher levels of speed and precision. Many people with no programming background, just like myself, find that they are able to learn SwiftUI and design productively in a short period of time. That's because SwiftUI is built on the idea that common things should be easy and complex things should be possible. In practice, this means you don't need to spend time recreating common UI elements. And at the same time, you won't feel limited when it's time to create something brand-new. Here's another way we like to think about this concept. Some tools are really good at making things easy. They lower the floor. A microwave is a good example. Most everyone can use one, and it's great for lots of simple things. However, if I need to make a fancy dinner, a microwave isn't the right tool. Other tools are focused on being powerful. They raise the ceiling and enable you to make things that are complex and rich. A good example of this is an industrial espresso machine. While these machines enable you to make incredible drinks, they can be unapproachable, hard to learn, and difficult for doing something simple, like making a basic cup of coffee. SwiftUI strikes the balance between these two types of tools. It lowers the floor for simple tasks and raises the ceiling for creating new and novel things. When writing SwiftUI, you use a tool called Xcode. In recent years, Xcode has become even more useful for designers, thanks to the addition of a visual canvas that allows you to view and interact with your designs in real time. Here I am, changing a simple line of text by adjusting the font size, weight, string, and color. Each time I make one of these changes, it updates immediately on the canvas.

Equally helpful for designers is the declarative way that SwiftUI is written. This language model builds on intuition that many of us already have for how interfaces are put together. When writing SwiftUI, you just declare what you want to create. For common elements like a button, we'll just write Button. And for an image, we'll just write Image.

When it comes to styling these elements, it's just as straightforward. SwiftUI provides you with Modifiers to change the appearance of things just as you would in any other design tool. This could be adding effects like drop shadows or borders, changing format of text though unique fonts, or manipulating the layout of elements by changing properties like aspect ratios or paddings. SwiftUI also provides easy access to system controls, like color pickers, and behaviors, like push transitions.

These are built directly into the framework, giving you native functionality right out of the box. If you're using SwiftUI, it also means you now have access to the unique capabilities of Apple hardware. With a bit of work, you can take advantage of things like haptic feedback, audio feeds, cameras, gestures, and sensors like accelerometers. You can also take advantage of all the work that's gone into the dozens of Apple Frameworks . That means, you can design with dynamic maps using MapKit, pull in live weather information from WeatherKit, or render objects in augmented reality using RealityKit. All of this can happens across Apple platforms because SwiftUI works with iPhone, as well as iPad, Apple Watch, and Mac. In most cases, you can even share code too and take of advantage of how system elements adapt on their own. Now that we've discussed SwiftUI through the lens of a design tool. Let's get specific about how it helps you actually design better, starting first with getting the details of your designs right. Modern interfaces are dynamic. The products that we build contain complex flows and highly interactive elements. As a result, there's so many important decisions that we need to make. SwiftUI helps by quickly surfacing all of those important details that need your attention, for example, how an image should look when it's loading or how a button appears when it's pressed. These are the types of things that make a product feel complete. They're easily hidden in static design tools but are quickly surfaced when working in a dynamic tool like SwiftUI.

That's because SwiftUI makes it easy to build your designs on device. In doing this, you gain a more complete understanding of what you're making. Separate parts now interact together, and you can begin to evaluate the experience as a whole. This process quickly reveals what's working in your design and what still needs attention or polish. On Maps, we've found this to be tremendously helpful.

When we first began designing this year's watchOS App, we thought it would be great to create a more map-centric experience for people's wrists. To begin testing what that felt like, we put a simple map view onto a watch. Because we were testing on device, we immediately discovered an issue: The speed at which the Digital Crown zoomed into the map was much too fast.

To improve this experience, we tested multiple values in our SwiftUI prototype, adjusting the sensitivity of the Digital Crown until we found a zoom speed that felt natural. Once we improved the zoom speed, we started adding to the map, first adding points of interest, then UI controls, and finally, to better contextualize the map, a walking radius around your current location, helping show what's around you and roughly how long it'd take to walk there. We took this work back on device, adding to our SwiftUI prototype. This surfaced new things that needed our attention, like the interaction of the walking radius. Specifically, we felt like the walking time could use more detail as the Digital Crown was scrolled. To explore what that could look like, we prototyped several different options. Our favorite was this ticker animation, which we developed as a separate SwiftUI prototype.

We took these separate prototypes and integrated them together. This led to even more questions and surprised us in just how much complexity was hidden in such a seemingly simple design. All of these details were initially opaque when we began designing. But the moment we started making prototypes, they were obvious.

SwiftUI is built for modern interfaces. It helps us address specific design details and experience how everything works together as a whole. Next, Philip will discuss one of our favorite topics: interactions.

Philip: SwiftUI is a powerful tool for designing interactions, with first-class support for gestures, transitions, and animations. Everything feels native because you're working in a truly native environment.

What designer doesn't like a great looking animation? Animations in SwiftUI are performant, easy to use, and fully interruptible. This is helpful because interactions give you a sense of how your designs feel, not just how they look.

Often, interactions involve gestures, like dragging, scrolling, or tapping. But there are other input sources, like hardware sensors, you can use for interactions.

On the new Maps home screen, when you tap the location button, it activates a compass. As you move around, the compass displays the cardinal direction you're currently facing.

In order to get a sense of how this interaction would feel, we created a SwiftUI prototype with a magnified compass to test out transitions using the watch's internal sensors.

It only took a few hours to get this prototype working. SwiftUI made it easy to use the watch's real sensors, which made the compass accurate and helped us refine this small interaction.

Another interaction we wanted to create was related to the search experience.

If you're searching for a location, like a restaurant, this new split screen shows a map and list of results. This design required a unique scroll interaction that would have been difficult to achieve in other tools.

Here's the SwiftUI prototype we made to get a feel for this interaction. Our goal was to make it immediately responsive without being too sensitive. The platter responds to slow movements of the Crown, and once a threshold is hit, a new platter quickly transitions into place, along with a haptic response.

Fast movements, on the other hand, use a tighter spring animation. This helps the interaction feel snappy. These adjustments create an experience that feels right when scrolling at both slow and fast speeds.

SwiftUI provides a great out of the box experience for many interactions. And when you want something custom, it's a highly capable tool, giving you the power to fine-tune things until they feel just right.

Design isn't just about how something looks or feels though. It's also about how it works. One thing that's easy to overlook in the design process is testing your ideas in realistic scenarios. I know for myself, I can get carried away designing for ideal scenarios, using nice photos and short labels, and in general, making sure my design looks the best it possibly can.

However, as design work progresses, it's important for me to find out where my designs break, testing them in the real world to see how they hold up.

SwiftUI makes it easy to design and evaluate your work in realistic scenarios. On Maps, we think about this a lot, as people use our product in the outdoors in a wide range of conditions. SwiftUI enables us to take our designs on the go and test them in real time.

For example, we pay attention to how glare and sunlight impacts the readability of the cartography and interface. This often leads us to adjust contrast levels across the app to provide a more legible experience.

Another practice we find helpful is to use real data in our designs. In Maps, we consider the different types of terrain and routes people will encounter when using our product. If you're biking or walking with the Watch app, the new elevation graph gives an overview of the elevation range for your route and your progress in real time. When we built this chart in SwiftUI, we were able to import real data from different types of routes. For hilly routes, like those found in San Francisco, the chart worked just as we expected. However, when we use data for flat routes, like those you might encounter in New York City, we found that it looked much more extreme than it actually was, as if you were hiking a mountain. We realized we needed to revisit the chart so that it accurately reflected a diversity of routes and elevation profiles. In this case, we needed to adjust the scale of the Y-axis so that flat routes appeared more like you'd expect.

One more practice we often use is creating one-off design tools using SwiftUI.

For the new walking radius that Will shared earlier, we needed a design that rendered properly over the map, which is a very dynamic surface. We created this mini design tool to better understand how the radius would look over different map environments. Here I am exploring styles by changing things like line width, opacity values, and blend modes.

Small parameterized tools like this one allow us to scrub through way more variations than we'd be able to do efficiently in a static design tool. They're easy to build in SwiftUI and can help answer specific questions or solve complex problems.

SwiftUI helps you design in real-world scenarios with diverse data sets and a holistic understanding of different environments. By testing your designs, you're able to better account for how they will perform in people's day-to-day lives. Another way to test ideas is to share them with others. SwiftUI is a great tool for presenting your work. There are many great ways to share designs, but on device demos are uniquely effective at bringing your ideas to life.

When people can hold a demo of your work in their hands, designs explain themselves. This helps build consensus and can save everyone the hassle of more meetings.

For our work this year, we prioritized building demos and brought them to design reviews as often as we could. In these reviews, we put multiple demos into a single SwiftUI app. This included ones we shared earlier, like the walking radius and search results, and many others, like the cards that appear with business information. Everyone was excited to play with the demos and provide feedback about the experience. Instead of spending time explaining the designs, we were able to spend more of our time evaluating them.

The demos you build with SwiftUI can de-risk a project and prevent confusion, both for yourself and for your team. At the end of the day, no slide deck in the world can compare with one spectacular demo.

These are some of the benefits we've discovered using SwiftUI. We encourage you to think of SwiftUI as a design tool, one that helps you surface important design decisions, enables you to design how things feel, get realistic about how they all work, and share your designs with others using on device demos. It was these benefits that helped us design the new Maps app in watchOS 10.

The tools we use for our creative work have a tremendous impact on the end experience. By using SwiftUI in your design process, we think you'll find that it leads to a more considered, complete, and well-crafted final product. There is also one more amazing benefit of using SwiftUI that we haven't spoken about yet. When you use SwiftUI, you're not just creating a prototype. You're making an app. And that means, you can ship what you design. The app that you're creating can be more than just a design artifact. Because you're working with the same materials an engineer uses, you can build and submit apps to the App Store and share them with others.

We hope you enjoyed learning how we've used SwiftUI as designers on the Maps team. If you're interested in learning more about SwiftUI, there's a lot of resources for you to discover. We'd encourage watching "Introduction to SwiftUI" if you're just getting started.

Thank you for joining today. ♪ ♪