Hi everyone. Thank you for coming. So sorry. In the control. Can we put the presenter notes bigger, I cannot read. Thank you all for coming with the entire team with design wish list just for you and this event. And we are very excited to share with you how that process came to life. So hopefully you can transfer a little bit of, you know, my learnings and my design process throughout the years into your own. So let’s begin.

I’ll start with app navigation, which starts with creating concrete sections for your content and your functionalities. That’s kind of how we like to start. We need to start planning, you know, with knowing what exactly we’re building. So navigation is, you know, kind of like a dry topic, but I personally love it.

So we’re going to kick off with that next. I’ll go into layout and talk about finding the best way to present content in a screen. And finally, I’ll dive into visual design. This is our components and visual elements come together to bring clarity and personality to your app.

Okay. So as I mentioned, I designed this app from scratch, and the very first thing I did was thinking about the app navigation, deciding the content and the features that the app will have will give me a good structure. So you can build with clarity, and you’ll know how to use navigation components like the top bar and the toolbar.

I started by brainstorming and listing out everything my team and I wanted the app to have and do. We wanted to celebrate goals and all ideas were welcome. We were on this brainstorming stage. The designer said only for a minute. From there I simplified and I kept only the essentials for a travel bucket list app like create trips, add photos, search and then I step back and group related ideas together like trips and activities and progress and celebrate completed trips.

These groups represent the top three sections of the app, so I named them wishlist, goals and Search. Now this is our app. This is what it means to you. Whether you are starting from scratch or revisiting an existing app. It is incredibly helpful to go through this exercise.

I’ve done it with developers here in the Developer Center for for a while in workshops, and it’s always a very eye opening. So I encourage you to do the same. So it helps you organize your thoughts and turn all these loose ideas that you have in the brainstorming into connected screens that now you will be ready to build.

I’ll explain how all of this connects to SwiftUI. I know that this is what you’re here for. I’m getting there in iOS. There are two components that support app navigation. The top bar and the toolbar. First, I’ll show you how the top bar works. The top bar shows the top level sections of the app, and it remains visible across all screens.

In this example, the app can feel more complex than what it actually is. We all see these apps where, you know, the more features I have, the more things the Topbar keeps sparking, but not a lot of people like that. It gets very complex. So one thing I always recommend is keeping the number of tabs low. It helps you stay simple and it’s very predictable. It reduces the decision making. So whenever I open the app I know exactly what options are available to me.

Second, keep your tab bar native. Is this in your bingo card for today? So SwiftUI components, as you know, like the tab bar, come with built in behaviors like animations and accessibility support. So these kind of behaviors can easily get lost if we customize. But don’t worry, there’ll be plenty of other places in your app where you can express personality. The top bar is just not one of them.

Finally, make sure the tab bar uses clear symbols and labels that match what is inside each tab. Wish list. Doesn’t have a universal symbol, right? So I choose a rainbow, which is a still recognizable and captures trips people aspire to take, right? Like it’s hopeful. The goal is to have, on the other hand, uses a symbol that it’s more explicit, it’s more explicit, and matches its label very well and has the same shape as many of the collectibles inside, which I thought it was a nice touch. Your tab bar can be just as effective as efficient if you follow some of these guidelines.

Now I’m going to take a quick detour. If you want to dig a little bit more into design or tab bars, visit the Human Interface Guidelines. You have heard that from us before. The Hague is the home for design, guidance and best practices across all Apple platforms and technologies.

This is your first stop for questions and advice before you come to us, and you can finally find a link for The Hague in the design section of the developer website, which also contains the incredibly valuable Apple design resources. The designs for the wishlist tab and almost every other app I’ve designed in my life use native components from this library.

And while you’re browsing and building your design toolbox, why not downloading the SF symbols app? It’s apple cider of iconography. It has seven more than 7000 symbols that you can just copy and paste into your designs or code. These are the ones that I use for the top bar, and it won’t be the last time. I’ll refer to it today.

So okay, back to the talk track. Both the top bar and the tool bar support app navigation. But there’s a difference, right? They act at different levels. People will use the top bar to move across your app. We said top level navigation right. But when it’s time to take action and to go within a particular section, we’ll use the toolbar.

The toolbar has different elements to support navigation. First, the title of the current view. In this screen, you can see that people. They can tell that they have. They are in the wishlist, sorry, in this in the wishlist section, and they have some context about the content of the screen. Kind of like sets the tone.

And then the toolbar shows the control for the most important actions that are on screen here. The primary action is to create a trip. So I place a control in the top right to do so. The third element of the toolbar is navigation controls. Here in the trip detail, I added the back button that allows people to pop back one level and reach wishlist again.

To keep it easy to scan. I minimize the number of actions. Same guidance as in the top bar, and make sure the meaning is clear by choosing familiarize of symbols. When there are too many items like. Clearly in this example, it’s difficult for people to understand what is expected for them to do first. So to fix that, I can simply find the actions that are less common or are there more advanced and hide it behind the more menu.

Toolbars also offer a prominent style for key actions. It adds a pop of color and creates an instant focal point when you’re designing your app. Make sure to use only this style for one action per screen. At tops, I know that there are a lot of prominent features that we might want to highlight, but you know, if everything is important, nothing is important.

So in this case, what would be a travel bucket list up without any trips. So I want to make that prominent. And last thing I’ll say about the toolbar, just like with the top bar, it’s best to keep it native. We should say it together. Adding extra stuff like a background doesn’t really, you know, it competes with your content. It competes with functionality, with morphine effects. And later Kurt will talk a little bit about that too.

So up to this point, I’ve focused on the structure of the app and how people will move through it. And now it’s time to bring content into the screens and decide how we’re going to present it. This is what I mean with layout. I’m going to show you a couple examples of two layout patterns that I like to use lists and collections.

Both are highly flexible and you’re more than welcome to choose one or the other, but you’re going to figure it out soon that depending on the content that you want to display and what people need to do with it, there’s one option better than the other one. So for example, I use list when the content is text based. Yeah. And multiple items that we need to display and it helps people scan through it very quickly. So that’s why this layout works well for trip activities.

Here I’m using a style called edge to edge because I need to. And when I need to categorize content I use a group style. So it’s a subtle difference. But the inset, the inset layout and the rounded corners really separate the different categories of content that I could have in a list.

So I didn’t really needed this style in the app. As you download it and start playing with it, you’re not going to find this example, but I wanted to show you how I could do it because there’s always some, some confusion around like when do you use edge to edge or when do you use inset? So this is how we do it.

Lastly, to help people move and act quickly through a list, I use accessories and controls. Accessories such as images and subtitles, help people recognize items faster without needing to read line by line, and controls like the selection button here helps people take action without going into a different view, which is very common. Sometimes apps get really complex because we’re adding views for just a couple actions that we could just get done from our list view.

There are many types of controls that you can add and support different functionalities. So I would encourage you to go and explore what’s available to you and see if there’s any opportunity to simplify your layout. Here we have steppers, toggles, sliders, and many more for you to try.

And that covers lists which help people move quickly through text. But when the goal is to browse through photos, videos or or products. Collections are a much better fit in. SwiftUI collections are essentially stacked view with a scroll view that allows content to extend beyond the screen, and it invites people to scroll and discover what’s inside. But here in the wishlist tab, the primary goal is to browse. So I choose to build a layout with multiple variations of collections that give strips a more visual presentation and feels personal and exciting, showcasing photos that people uploaded.

Now keep in mind that with collections, not all content is visible at once. Most of it is off the screen. So to set the right expectations and encourage people to scroll through them, I’ll make sure to add titles and image effectively. What does it mean? Well, in this example, do you think the images add value?

Does it look a little bit random? Yes. Very random. And that’s the thing that sometimes we lose credibility in the content because the images doesn’t just make sense. It doesn’t look curated. And then we can add titles that shows that shows consistent length. Otherwise again, the layout is start to look a little bit clunky and it looks misaligned. So not only it hurts the collection, but also the vertical scroll whenever I have something underneath. Now everything looks like it’s a little bit wobbly. So it’s nice and clean to try to set some rules for you in the content of your collections.

Okay, so SwiftUI already handles many design principles that I have been sprinkling a little bit through throughout my explanations, but things like hierarchy, alignment, and proximity, those are all part of the components. But also we encourage you to start exploring those to create your layouts. And that is a big part of visual design.

So we’re going to use text color and again imagery to guide attention and express your personality. So far we’ve been quite functional trying to be effective. And now let’s see if we can bring a little bit more of your charm. So I’m going to focus on three aspects of visual design that have the biggest and earliest impact textiles, semantic colors, and consistency. Together, they make the app enjoyable and easier to understand and something that I love. They’ll give you guidance to reuse your reuse patterns as your app grows.

I’ll start with textiles so they style hierarchy. They sorry. They set up hierarchy and encourage readability across different screen sizes and conditions. So I’ll use system textiles and you get that hierarchy right out of the box. But what’s important is that you choose the right textile for your purpose in the app. I use this consistently. For example, title three is for all section titles like Summer glow.

It makes every screen look more balanced and more polished because there’s there are concrete sections of content, and the moment that I see a textile that I know in which hierarchy represents, I know exactly what the content is going to mean. Another reason I rely on system Textiles is dynamic type, so lots of people use larger textiles because they need it for comfort or sometimes for both. And when you use dynamic type, those textiles are named the same, but they are consistently larger. So please use it.

If you are a font fan, you’ll notice that I’ve used Apple System Font SF Pro across the entire app, but I’ve obviously not. Just using one style as a Pro includes different variants that let me shape the personality of the app without compromising legibility. We were going for a more sporty type of vibe, so I’ve been using expanded for emphasis in titles and condense only sparingly in some overlays.

Here again, I want to keep my choices minimal so both the UI feels intentional and the app is easier to maintain and grow. Then we’re going to get back to our textiles and it’s like, oh, when do I use expanded? When do I use? And now we have a bunch of textiles, a bunch of variants, and hell, a lot of fonts.

So earlier when I explained collections, I mentioned that imagery carried a lot of the app’s visual weight. So semantic colors are a good complement of the UI, and they have a very similar role, but much more specific, which is status and feedback. For example, I use Color Indigo across the app, and here, for example, it’s in completed activities and in the selected tab in the top bar, I avoid using it or any color that it’s really similar to Indigo for decoration. Otherwise people might not understand like, is this interactive or is it. Does it have any meaning?

I set this color is named Indigo, and before that we are in describing semantic colors. So it’s not a color that is, that is around. That is. Yeah, I chose a random. I provide it’s provided by the system and each color in in the native, sorry, each native component has its has its own color. So I didn’t set the background. I didn’t set the separator color. All of these are already out of the box for me. The only thing that I chose was this accent color.

So because these colors automatically adapt to light and dark mode, also liquid glass and different screen environments, it’s best not to get overwhelmed again with customization, especially with buttons and controls. Probably you’ve seen in the app that the color palette also includes a neon green, and I reserve it only for emphasis, like in progress indicators and subheadlines.

Again, trying to perceive meaning and these visual metaphors. So the color is not semantic. You’re not going to find it in our kit. So I make sure that it has enough contrast. I tested it against like different, different backgrounds. And I also provided a value for increased contrast.

So if you decided to use a non-system color, just make sure to follow some simple rules. Just as this one, keep testing and just make sure that your app stills is still expressive but without affecting usability. So I’m getting closer to the end here. and that means that it’s a good time to make sure everything looks at best. And for my final touch, I’ll go back and make sure that all elements are lined up and consistently spaced out.

This makes the design feel much more polished and visually balanced. It looks professional, and it also supports how people take in information and decide what to do next. If you have a lot of components like cramped in little space, what happens? We feel stressed, like we don’t have space to think or time to think. And when we make the UI breathe a little bit more, that’s when a great experiences start to happen, where giving people a space to process.

So when using native components, I’m careful to use them also in a same way, in the same way across different screens. I avoid giving people multiple ways to do the same thing, which sometimes happens. We get excited creating a new screen and we start from scratch. But the best, the best part of it, not only to simplify development, but the, the experience that people are going to have is to repurpose these components. They know how they they know where they’ve seen it before. They know how they behave. And they know exactly what is expected from them.

So progress indicators, for example, here use the same accent color and the same shape, but they are a little bit smaller still. They are in a context that I know. Yeah. What, what did they do? And that consistency also helps with your development. You have less components to build.

I briefly touch on imagery while explaining collections, but there are of course part of visual design. So when selecting your images and illustrations, place them side by side and look if they are familiar in lining. Level of detail and overall mood, then you can tweak and adjust so they feel like they are part of the same brand. If they feel like they belong in the same collection.

Follow your gut. They are probably right. In which list? For example, people will upload their own photos. But again, to illustrate the point, I’ve used images to show you how you can also have it in. In the code, you’re going to have that access to those images. So you can see kind of like the pattern that we went through. So I’m going for dynamic Sky. So often the subject is smaller or interacting with the space, but the idea is that the UI is more prominent than the photos, but definitely something for you to evaluate to get a consistent look in your apps.

So stepping back, I can really take a lot of credit for the design of the app, maybe a little bit, but if you are is handling a lot of the design decisions for me. And that is like, yes, an honest thing to say. But it’s true. I, I really enjoy working with, with engineers in creating this app. And it’s so cool to see that everything that I have designed, it has a very similar translation in code.

So we’re very excited to share it with you and that you can get to play with it. And hopefully you can take a couple of these tips for, for, for your process and reduce a little bit of uncertainty that, you know, sometimes it happens when you want to get creative, just like at any random point or just give you a space to be creative at the beginning, make decisions, brainstorm, and then get to code.

So as you get back to work, define or assess the structure and its navigation. Use components mindfully. This will help you make clear decisions. So at the moment that you start coding, you know exactly where you’re going. You’re exactly what you’re building. And yeah, you’ll build an app that is much more intentional.

Okay, so partner with SwiftUI. Let it do the heavy lifting and then make your best job bringing personality, creativity, and humanity to it. Thank you so much. I hope you have a lot of fun building it and playing with the app. And that’s everything on the design side. Thank you for coming. And now I’ll hand it back to Leah.