This course provides an introduction to designing mobile interfaces. If you’re new to UI design, or creating your first app, it should be a great place to start. Follow me as I design an app interface, and get familiar with the conventions and basic principles of working on mobile apps.
1.Introduction3 lessons, 12:51
2.Theory: Building Blocks of Mobile UI Design3 lessons, 29:12
3.Design Exercise6 lessons, 1:03:50
4.Conclusion1 lesson, 04:55
1.1 Welcome to the Course
Hi this Chris for Tux Plus, and this course is an introduction to mobile UI design. Whether you're new to UI design, you're creating your first mobile app, or just looking to brush up on some of your skills, this course should be some help. So what is the course gonna cover? Well, first of all, in the introduction, I'm just gonna discuss some of the restrictions and opportunities in designing for mobile and how it differs from desktop design then we're gonna go through the theory. We'll talk about the building blocks of UI design like type, color, and grids, and how they specifically apply to mobile. We'll also talk about some more general concepts like hierarchy and consistency and how they can be used to create a professional looking app. Finally we'll put it all together with an exercise. We're going to go through an example app that I've created with some typical screen's that you'll be designing in the apps and how you're gonna put them together yourself. So let's get started.
1.2 Limitations and Opportunities in Mobile Design
Hi again. This is Chris for tuts+. Welcome back to this course on Mobile UI Design. This is lesson 2 where I'm gonna talk about some of the restrictions and also some of the opportunities in designing for mobile. First of all, let's just talk about some of the limitations, especially if you're coming from a desktop background. For the purpose of this course I'm mostly talking about apps. We'll touch on responsive design occasionally, but mostly I'm looking at apps and their native capabilities. So here's some of the limitations. The first is layout. There simply isn't the space for multi-column layouts and any variety they might provide. The second limitation is in getting your brand across. With the limitations of space, there just isn't much room to get in big brand imagery, or rich colors, textures, or features that you might have on the web. This relates to our third point, flat design. Whether you want to call it a trend or a progression in design standards, the reality is that right now most apps are going with a flat flat design. This means that the textures, gradients, and imagery that might have added to the richness of apps in the past has been removed, and apps are now mainly focused on typography, content, and a real minimalist style. So that gives you limited opportunity to really get a unique style or brand across within the app. That's not to say there isn't opportunities. There's so many opportunities in designing for mobile apps that just didn't exist 10 to 15 years ago. First let's talk about focus. The limitation of layout actually forces the app to focus on what's important. There's literally no space for anything superfluous. So apps tend to have a focused, singular purpose. And similar to flat design, UI design is moving towards a more simple, minimalist approach, letting the content rise to the top. More opportunities come with native functionality. Smartphones come with cameras, GPS, audio, video, and a multitude of tools that were expensive even by themselves only ten years ago. The best apps take advantage of these functionalities. Further to that, because the operating system and hardware are so in tune, we really know the capabilities of the device the user is using. When you're working on the web you really don't know what context the user is going to be viewing your content. With an app you know the operating system, you know what's available to you, and all these functionalities that come out of the box with the operating system are at your disposal. There's even the opportunity to go further and work on transitions, and really interactive functionalities to create a really immersive experience. Lastly, in terms of opportunities, which might be surprising, is the use of patterns. This might seem boring, but the fact that people know how to do so many things with their smartphones already is an advantage. We don't need to reinvent the wheel. You're not starting from scratch and explaining your interface. You're leaning on the number of common patterns and uses that people already are used to on their phones. I have a couple of examples where I can show these opportunities in use. First talking about focus. Apps were originally intended to be single use tools on the iPhone before the advent of the App Store. A lot of the best apps can still be considered single-use tools. If you think of any of your most used apps, most of your time is spent in a single view. On Facebook it's the news feed. It's a condensed snapshot view of everything that's happening on Facebook. There's nothing complex to the layout. It's just one feed that's scrolled vertically. Similarly Dropbox just focuses on your files, and finding the things very quickly. There's no noise in this interface. It's just the quickest way to find things that you need. Looking at other content feeds like Instagram and Pinterest. There's no bloat or unnecessary elements. In terms of native functionality, you notice that a lot of the best loved apps take full advantage of the phones' native capabilities. An app like Uber couldn't exist without the smartphone. It's completely reliant on the mapping and GPS functionality available through the phone. While Instagram is completely in tune with your camera. Patterns are deterred and, perhaps most important advantage of designing for mobile specifically. There are so many things that people already know how to do. You don't have to worry about teaching them how to use your interface like you might on the web. People know how to use the camera app, so when you want to use photos in your app, you can lean on this functionality. The contacts page shown is very minimal from a UI standpoint, but it's a clear example of a number of things that people now know how to do on smartphones. The blue text links to navigate, the A to Z list, even just tapping on list items. The fact that people know how to do these things already is a great help for you in designing your interface. Nearly every app will use list views like this and the search box shown above. They're common patterns that everyone can lean on. Even in terms of tools and functionalities that might integrate into your app, the day picker on the top right is quite complex, but people already know how to do this. And when Skype asks for access to your camera on the bottom right, this is the kind of thing you're used to seeing as a user. There's something else to notice in all these examples. There's not actually a lot of UI elements. You could be forgiven for looking at these examples and thinking there was no interfaces on. There's no buttons, there's no drop shadows, there's no gradings, there's no textures. There's none of the things that would have been associated with the UI design five to ten years ago. If we look back to the style of iOS apps prior to iOS 7, this is only a few years ago and look how different things were. In Game Center alone there's so many patterns, and textures, and drop shadows, and effects. You might be forgiven for thinking your job would be easier looking at the examples on the previous screen. However, when we go back to these examples, you'll see that they rely on a more traditional graphic design principles like typography,and grids, and consistency in structure. These are the things that really make a good design. And while it's not as glamorous or maybe as fun as creating a table that mimics a real poker table for Game Center, this is where you can tell really good mobile UI design. Given the limited set of just grids, type, color, and layout can we create both the usable and recognizable app. That's the challenge at hand and that's what we're going to tackle through this course. So let's get into the next section of the theory. We're gonna go through each of these building blocks and figure out how you can create a professional-looking app.