7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Closing Thoughts

This concluding lesson gives a short review of what we’ve learned in the course. If you’re comfortable with the material covered in the course, this lesson also discusses what to look at next, to take your mobile design skills to the next level. Thanks for watching!

Related Links

4.1 Closing Thoughts

So that pretty much brings us to the end of the course. I hope this gave a good introduction into designing interfaces for mobile. Hopefully you were able to follow along and create some of the screens that we talked through. Other good ways to get into mobile design, that you'll always be looking at patterns online, of what apps are doing. And I'd also familiarize yourself with the iOS and material design guidelines. These lessons are really an introduction, and as you start to practice there will be a few things that will help you to get to the next level in UI design. Just to touch on a few of them quickly, things like the flow between screens, how this news feed transitions to the profile page, and how that interacts with a product page. That's something that you'll usually map out in wire frames at the start. And that's more considered part of UX design. But it really is something you need to consider in your interface. For example, even how that journey looks like, whether a screen slides in from the side or from the top. And how you close screens and journey back between them. Touching on that, you're going to have to think about transitional states. For example this like button. Here we have an on and off state, but what actually happens? There's also advanced things you'll think about when you're working with developers. Like what happens if the user touches this button but they don't have a strong Internet connection? Do you display the like state anyway and allow to connect up later, or do you present them with an error message? Automation itself is becoming a really big area within UI design, especially with material design. They're really advocating animation. And because your user interface doesn't live in a static state, never changing, animation really helps to communicate the things that are going on within your app. These guidelines are about authentic motion, which is making things feel natural rather than robotic. And that's the thing, animation in an interface should be all about making things feel natural. It's not something to overindulge in because then it begins to feel gimmicky. But it can be a nice way to explain the functionality of your app, and add a bit of delight on top. As you can see in these guidelines, there are a lot of great examples of how you can cleverly transition from one screen to another. As well they deal with natural transitions. See how everything here loads in in a hierarchy. This isn't just automation for its own sake. It's created a more natural visual language to the app. It's a bit much for a beginner's course, and in fact animation isn't something that I work with too much myself. But it's becoming more and more important in new art design over time. So it's something that we're all gonna have to get familiar with. There's other advanced things to consider too. For example, dealing with real content. What's going to happen if someone puts a really long line of text in here? Or if they only leave a short comment next to the product? Or what if they use a really horrible image? It's all very well having this perfect use cases and lovely shiny screens. But we really need to consider how this is all gonna look when someone actually uses the product. And that's something that you can only really learn by getting in depth into the design of an actual product. Similarly, you might have to think about how it will adapt to different languages. Even still, empty states and first use states of an app are something that's really important. For example, what would this look like if I didn't have an image or if I didn't leave a comment? Or even still, what if I just joined the app and there was nothing in this feed? That's why the apps put a lot of work into designing empty states, first use states and on boarding flows. An on boarding is an introduction to the app the first time you download it, it might give you a little guide before you log in. It might give you tooltips to guide you around the app the first time you find features, or find other clever ways to surface the app's functionality to you. And finally, you have to consider how your app is going to evolve over time. If you add more features and more screens, you want to make sure that it's consistent, and you don't want to add unnecessary styles or patterns. It quickly becomes unmanageable, so creating a style guide could be very useful as well. So in terms of those next steps, here's how it summarizes. Looking at the flows between screens and transitional states, animation to support that, and generally dealing with moving parts. Adapting to different content, like I said, where there's less text, when the text overflows, when there's images of different types or styles. The fourth one is empty states, first use, and on boarding which I've just spoken about. So how are you gonna communicate those things to a user to help them to get familiar with your app and understand what's going on? And finally, style guides and evolution. To make sure you're in control of how the app will evolve over time, rather than allowing the interface to become bloated and inconsistent. But overall I hope this course gave you a good primer in designing UI for mobile. Thanks to Ian and the team at tuts+ for all their help. And feel free to get in touch with me if you've any questions about the things that I covered within the course. Best of luck and happy learnings.

Back to the top