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

1.3 Our Example App

Let’s introduce ourselves to the app that will be created in this course, along with some guidelines on what tools to use, and how best to create it.

1.3 Our Example App

Hi, this is Chris for tuts+. And welcome back to this course, an introduction to Mobile UI Design. This is lesson three, and the final part of the introduction. In part two of this course, we're gonna be going through the building blocks of UI design that you'll need to create an app. And in part three, we'll get our hands dirty with the actual design of the app. I'm gonna dive right in now and show you some of the screens I've created. This'll give you some framing and context for what's to come. Okay, first I just wanna give you a quick explanation for the app I've created. The concept of the app itself is a bit irrelevant. What I wanted to do is just create some screens that are common to many apps. And the type of screens that you might be creating in your first app. So when we looked back at apps like Instagram, Facebook and Dropbox that we'd all be familiar with, I was trying to think of common screens that you might design your first app and that might be useful to you for designing apps in the future. So that included profile screens, newsfeeds, things like that. The app I've created is called Look Book. It's a bit of a silly idea where friends are sharing fashion tips and clothes that they're thinking of buying. It was just a framing device to have these common screens, so don't worry too much about the actual content of this app. So let's open it up now in Photoshop. Before I go through the screens, let's just have a quick word about tools at the outset. Personally, I use Photoshop. It's the program that I'm familiar with and that comes most naturally to me. I've also used Illustrator in the past, particularly for working out user journeys and early wire frames. All of what we're creating in this example though could be created in many design programs, Photoshop, Illustrator, Sketch. And there'll be other ones to come. It doesn't matter what tool you use. You should be able to follow these principles. It's best not to focus on tools too much. They're changing so frequently that if we focus entirely on the tools a lot of the information will be irrelevant in six months. So, I'm gonna talk more about the actual principles of design, and you can use whatever tool suits you best. Even while I've been working on this course, Apple announced that their system fund family San Francisco will be rolled out to iPhones as well as the watch. And Photoshop released their new design space to specifically help with UI workflows. So the tools are always changing, but we'll just focus on the principles. One other thing to mention is that these designs are for iPhone. A lot of the same things apply for Android, some things are a little bit different. I've actually written an article for tuts+ previously, which you can check out to read about the differences in designing for iOS and Android. It doesn't always require a complete rework. There's tweaks you can make to make the same deign work for both. So here's the first screen of our all too serious app, Look Book. This screen is a simple newsfeed where friends are sharing products that they're considering purchasing. It's a simple newsfeed layout with profile and product information at the top. A description and photo of the actual product. Some tags and the ability to like the product. It covers some pretty common things that you'll see in a lot of news feeds. The next screen is a profile page. Where you can see information about other users and collections of products that they have. These collections are in a two column lay out. What you'll notice about both pages is that I've gone for a card based approach. Cards are really popular right now both for native apps and for responsive design. On the profile page there's two columns of cards. And on the news feed there is one column of cards. The reason the cards are popular is that they're a great way to show bite size pieces of information which can change and adapt both in the context in which they're presented and across different devices, different screen sizes, and different operating systems. But within this app we're really just looking at the visual side of things so you can see how you can style things to look like modern card-based design. The other screens that we'll look at in part three of this course include a list view, which I basically wanted to touch on because it's one of the most common screen types that you'll have in an app. And finally what I'll touch on is the two most common navigation types, that you'll encounter, a sidenav and a tab bar. Sidenavs tend to be more popular on Android, whereas the tab bar is native to iOS. You may encounter both of them when working with apps. So we'll just have a look at the two of those as well. So that brings to a close this introduction section. In the second section of this course, I'm going to be going through some of the building blocks of UI design, the theory behind what we'll be creating. We'll talk about grids, we'll talk about typography, we'll talk about color. And then once we've dealt with a little bit of theory, we'll get to the fun part in part three of creating these screens.

Back to the top