Everything you need to know about Mobile App UI’s in 8 minutes (beginner friendly) transcript

When it comes to UI, mobile is just so different from desktop that it results in some pretty questionable designs. So, in this video, I'm going to show you how to design your very first mobile UI completely from scratch in a way that's dynamic, purposeful, and effortless to use. And by the end, you won't just have a stunning mobile design. You'll understand why the best apps are designed the way they are. The first difference of desktop to mobile is obviously the navigation.

Where we had an expansive sidebar, we now definitely do not. So, we have two options. If we can consolidate our sidebar links down to just a few key icons, we can go with a nice bottom bar, which nowadays is typically floating with the important action broken out just like this. Five links down here is pretty much the definite limit, and three or four is much more ideal. But, either way, this means that we'll always maintain over a 44-pixel target since people do have fat fingers.

It's important to note too that depending on the context you're in, these actions can and do change, which we'll touch on when we start building out a few pages. That typically is the standard. However, sometimes you just have too many important things in the sidebar to really fit things in here, in which case another valid form of navigation is to take the sidebar and turn that into a whole page that sort of becomes the home page.

In this case, we'll add in some recent notes to the top and actions and counts to the right side, so it doesn't feel so lopsided. It also conveniently clears up the bottom for a nice big search bar or action button, which is what apps like Notion do. Moving up to the top, a bell and more menu is a good place to start, but these actions are also highly contextual based on the page. Now, when it comes time to actually start building, squishing things down and trying to fit as much on the screen as possible is pretty natural.

This all looks fairly normal, actually, until I zoom out and show you the other normal-sized apps for comparison. Despite our screen getting much, much smaller, the type scale and spacing remains relatively similar to desktop, even getting a bit larger. iOS actually has a base font size of 17 pixels, while macOS has a base of only 13 pixels. So, more often than not, things actually get larger on these smaller screens.

And it's a tough realization that on desktop, where you could have had an action bar, a gallery of recent notes, a full calendar, tasks, and a scratch pad, now you can pick one of those things. And because we have to pick just one, the way we start to lay out content starts to change a little. Dashboards and desktop designs can lay out content in two directions at the same time. What that means is this layout has two columns and three rows, obviously extending in both directions.

However, on mobile, you can choose one direction to move in per section. Either you can stack each note vertically, or you can make it horizontal off the page, but of course, you can't have both like you reasonably could on desktop. This is a useful guideline when taking content from dashboards and making it mobile-optimized. And if you understand that concept, things really start to become a piece of cake. In addition, ignoring our floating menus and actions, there's really only four types of building blocks for an app.

The biggest and most important are cards. Basically, everything on here is a card in some way or another because it allows us to flexibly group content in place of white space, which we don't typically have a lot of here. The others are text or links, of course, images, and inputs. And of course, any of those can be put into cards as well. One important note about cards is to try and avoid double-nesting them, kind of like this.

It's not always avoidable, but it creates padding on padding, which really restricts the space you have and ends up cramping things. Often, you can group with white space instead of a container and somewhat alleviate this problem. Because we are so space-constrained on mobile apps, I'd like to introduce the important idea that one screen does one thing, and that's it. Obviously, the very notable exception is our home screen, but otherwise, the settings is just settings, and the notes editor is just a notes editor.

We don't throw in clutter like recent notes or suggested templates at the top. Instead, whenever you need to add something new, don't reach for a different layout, reach for a different page altogether. Though, this example about templates brings up an interesting point about context. We're editing a note, so we don't want to be ripped away to a new page to select a template, but we don't have enough room on screen. This is where bottom sheets become super useful.

This is a bottom sheet. You've probably seen it a bunch, and now we can simply add in a title, search bar, and a check and X, and all of our templates, too. These can be any height, but they keep the user in context and are easy to navigate with gestures, which we'll talk about in just a second. Another good example is the typical use of this plus button, which either opens a little menu or opens with an input to just immediately start typing.

But, before we get to gestures, sometimes when you're designing, you need some inspiration. So, a tool I use all the time and actually used to make this video is Mobbin, the sponsor of today's video. Mobbin curates hundreds of thousands of videos, images, and user flows, all from top apps like Notion, Craft, Headspace, and many more. It often helps me to see how top teams design flows like onboarding or to check out specific UI elements just like bottom sheets.

You can filter by categories, screens, UI elements, and user flows, so you can always find what's relevant to you. If you're interested, you can check out Mobbin using my link in description to get 20% off. Now, back to the video. Now, gestures is where mobile apps start to get really interesting. One of the most common is swiping right to go back like this. But, if we move the background left by about 35% and then also animate it right, we get a super smooth transition.

Same idea with our bottom sheets. As the bottom sheet comes up, we often zoom out the background and zoom back in on swipe down. Swipes are everywhere in modern mobile apps, so as long as you educate the user on how to use them, they can be relied on pretty heavily. A good example is a handy swipe up to search, which is used by Slack as well as sort of by Apple, too. And I'd be remiss if I didn't mention the long press, the mobile equivalent of the right click.

It's typical to blur the rest of the screen and just show the actions in addition to some slight zoom on the element itself. Or, we can take it even a step further and turn this into a more dynamic preview like how iOS does it. Now, also because of our limited space, actions need to come and go as needed. They can't always be persistent. For example, clicking into one of our notes hides our navbar and reveals other actions specific to note editing, such as text formatting or sharing up at the top.

Or, when we go to select templates, all of that is hidden for really just two actions, a confirmation button and an X. And of course, how these actions animate in and out is half the fun, too. Finally, what we've designed here is an ideal state. The app is filled with content, but don't forget what the user sees the first time they log in when there is no content. We could have cards inviting user to start adding in events, tasks, and notes, but instead, let's draw attention to the plus button, which is our main action, and add in a full-screen empty state to simplify things.

Then, we have a simple popover instructing them on how things actually work. But, there is also another type of empty state, which is when we search for a note, for example, and get no results. Instead of just an instruction, we should have some nice imagery, and we need to acknowledge that there are no notes matching the existing keywords, and then perhaps give them a few suggestions in case of a typo, and an action to exit the empty state.

There is a ton of different apps and mobile designs you could build, but this should give you the foundation to start creating some really pro-level app designs super easily. If you're interested in checking out Mobbin, it'll be the very first link down below, and the link to all of the Figma assets used in this video will be down there, too. Thank you so much for watching, and I'll see you in the next one.