3.1 Creating the Skeleton
It’s time to start designing. In the first part of this exercise we’ll create a very basic skeleton to begin creating the screens for your app.
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
3.1 Creating the Skeleton
Hi this is Chris for tuts+, and welcome back to the course on mobile UI design for beginners. I'm delighted to say it's finally time to start making the screens for our app. I'm just gonna open up Photoshop here and show you the screens that we're gonna be creating. So we have a news feed, we have a profile page, we have a product page, a card view, and a list view. So as I said before, the idea is just to create some common screen types that you might tackle in your own app. First in this episode, we're gonna look at setting up our documents and creating this news feed design. Okay, so the first thing I'm gonna do is create a new document. I use this working size, 640 by 1136. This is a retina iPhone screen and the resolution used for an iPhone 5. Why do I use this screen size? Simply because that's the phone I have. So it's simple to test on the go on the device. With iOS devices after iPhone 4, all of the devices have the same aspect ratio. So the one design will work across different devices. The base size is actually 320 by 568 but because the device is a retinal device it has double the pixels for a given area. So that's why we need this size to work from. Okay, so the first thing we're gonna need is a grid. As I said before what worked for me with mobile screens is to use an ATP tile grid. At a two x size this equates to a 16 pixel grid. So what I'm gonna do is I'm gonna put up the extension guide guide which I mentioned previously and I'm gonna set the column width to 16 and the row height to 16 and I'm just gonna create a tile grid like that. In the episode about grids I spoke about margins and gutters. When working with a tile grid like this the increments are small enough that these tiles themselves can act as the gutters and margins. So we might want a 16 pixel margin on either side and that'll just be one tile. The first thing we're gonna do is add the status bar and the navigation bar, which are common across all screens. A handy resource is this iOS 7 cheat sheet, which I'll link to below. So what's explained quite well in this cheat sheet is that the status bar and navigation bar are two separate things. So in the design of our app I've indicated this with two slight different tints of the same red. So this is the status bar and this is the navigation bar. Previous to iOS 7 this status bar was always a black color, but since then developers have been given control of the color of the status bar. So by giving the status bar a navigation bar the same color, they kind of appear as one item like here. Okay so I've added the status bar which you'll find in the acids folder provided. This isn't really part of your design, cuz it's just a system display but it's usually good to leave in your document anyway to get a real feel for how the screen will look. The next thing were gonna need is the navigation bar. So that status bar is 40 pixels in height and the navigation bar is typically 88 pixels. So first I'm gonna group status bar and turn it into a smart object as it will be a common element and we don't need to edit it further. Then I'm gonna add rectangle as the base of the navigation bar and I've given it a height of 88 pixels. So I've gone ahead and created this swatch with the colors that we're gonna use in this app. As I mentioned previously, don't feel limited to this. Just use it as a basis and add colors as you need to. But really think about the meaning of each color and why you want to add it. Don't add colors haphazardly because it'll lose the consistent look and feel of the app. So the background color of this is just gonna be our main red. As well as this for creating the basic anatomy of the screen, we're gonna need our background color. I usually delete the default background and use a rectangle. It's easier to edit it again later. So you'll see I've even named my swatches according to their function to make it easier. This one is called background gray and then I'm just gonna lock that there. I'm gonna add a subtle bit of shadow beneath the navigation bar. The reason I do this is because the newsfeed items will be scrolling below us. We want to give some indication of the layering and the things are above each other, otherwise it just doesn't feel natural. If you want your app to look modern and in keeping with the current flat design trend, you of course have to keep these effects to a minimum. I'm gonna give an opacity of 35, a distance of two, and a spread of three. In fact even that's a little bit too big so we're gonna go one and two. Rather than use a pure black color, I'm going to use the black from our color palette. Okay so there's just a bit subtle shadow in there. So if for example I take a box and I move it behind, there's just a subtle bit of shadow to indicate that it's beneath. It's important to give your layers name that make sense. It might seem tedious, but you'll be thankful later. I begin by giving the layers names, and then group them into objects that make sense as well. It's not only helpful for you but if you're working with someone else, be it another designer or developer, they'll have a much easier time navigating your documents if you've named your layers and groups. It's just good manners. Then we're gonna put the title on this navigation bar. You want to use the size from the pallet we discussed earlier. 32 pixels is usually the heading size for the navigation bar. Sometimes I find it hard to tell when things are in the center when I'm using this tile grid, so a handy thing is to select both rectangle and the text layer. And then using the align controls you can align them centrally. For where the textured align, I usually try to stick to the baseline grid where possible. We're also going to have an icon for our menu on the left. You can do that in two ways. You can create shapes in Illustrator or you can do it all in Photoshop. Lets just create a hamburger icon for now. Lets leave the discussion about the merits of different navigation types out for now. Okay, so the first time you really have to start thinking about space. Because we're working with the set height of the status bar and the navigation bar, unfortunately these items don't 100% conform to our grid. But if we look at the space we have available, visually we have about six rows high to use. And we want to fit this icon into a kinda square space, so let's use two of these squares for our icon and then we'll have two squares of pattern to the left, two on top, and two below. Which will give it equal padding all the way around. Also, if you look across our text, it's more or less seen inside two boxes as well, so it'll line up nicely. Now I'm just gonna create three quick rectangles for this icon. Again you can convert this to the smart object, you don't even have to group this. You can just right-click and hit convert to smart object immediately. Then we'll give this the name Hamburger Icon. And we can edit it later if we want to. So now we have a few items that are making up this header area, so I'm gonna add them to groups that make sense. So the navigation background, the heading, and the hamburger icon make up the navigation bar. And we have the status bar. And together, they're basically the header of this page. So I'm gonna give them that name too. So these nested groups might seem a bit over complicated but it's actually really helpful in finding things. And you don't have to navigate through a ton of items on the right hand side. So now we have the anatomy of our basic page. We're ready to create the items for our news feed.