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

3.5 List View

This lesson will cover how to create list views, which are common in most apps, along with touch targets and a few other principles that come up.

3.5 List View

Hi this is Chris for Tuts+ and welcome back to the course. In this video we're gonna be creating a simple list view. It's not gonna be as complex as the previous screens, but it's an important screen type as you tend to get list views in most apps. Sometimes they can be for friends lists Or it could be a settings page, things like that. So there's just a couple of things I wanted to mention. As I said in the previous video, I already have created a list and card view, which you'll find in the Photoshop files supplied with this course. Here's the list view, and here's the card view. The card view is pretty much just created by reusing the cards at the bottom of the profile page, but repurposing them with just one item on each card. So this list in card view, it's something that you see sometimes where it's two different ways to view the same screen. So it's a little toggle that we have here between the tile and list view. And here's a preview of how the list view is gonna look once we create it. What you'll notice already is that mostly this is using elements that we've already used within this app. So we're gonna try and create this from the profile page, then I'll mention a couple of things on the way. So I've created a new document just called list view. And we have our header and our page background in there as well. I also just have some of the icons that we're gonna be using that are put in in advance, because icons are a bit of a subject in themselves. And I'll mention that briefly in the following video. So I've used the header area to give the actual title of the page, we'll just put a bit of supporting profile information beneath this. Okay, so I'm gonna give this six rows. So I'm gonna show you how I made this from the profile screen. So first of all, let's grab the profile picture. We'll drag that in there and just reduce it then to fit this area. I'm gonna make it 50% of the size. It just makes sense as a ratio. And I might remove this stroke on this circle as it's already on a white background. It's not where you need it on this version. Okay, I'm just gonna leave one column and put it on the left. And then we have roughly one row of padding above and below, I tweaked up my second to bring in the other information. So, I just want to put in my name and a piece of supporting information. So, to do that, let's see where we have something like that already, so we had something a bit like that in the cards on the news feed. So I'll drag those two pieces of text in and just change the color. And I'll change the supporting text to gray. Because this text is on white, I'm gonna bring it back up to a medium white. I feel like the text is a little bit big. For the area here, so I'll just try and increase the height of that row a little bit. That's probably not bad for starters. The text is aligned to the baseline grid and we have relatively equal space above and below. I'm gonna knock down the size of this header a little bit, just to 28. I think that's using the space a little bit better. You can see above and below the way I'm using the space, and I'll reduce this similarly. Okay, that's giving a little bit more padding to the text which, as I say, usually looks better. Then we're gonna go out to the icons that I created as the switch between the list and tile view. So what I do sometimes when I'm creating placeholder icons like this is I just make them from shapes in Photoshop. I'd recommend using Illustrator for any proper finished iconography, but you can see when you need a quick icon, I've just made this out of circles and rectangles in Photoshop. But both the lists I like, we don't need the Chevron for a second. So let's just align these. I feel like the second icon will need two rows of padding to the right of us and also let's imagine the touch area around it will be a slightly bigger square. Okay, so that's all right. Then we're gonna put the actual list of items below it. So I'm gonna copy this rectangle, leave one row of space, and then this is gonna be the size of our list item. So what size should this be? Well. The original kind of IOS specification in Android would recommend touch target of I think it's about 80 pixels for a retina size, so we're above that. It should be fine. You'll actually find that some apps are going I go a bit below this recommended size these days. What I imagine is originally when these phones came out the touch target that we always aim for was a thumb print size. But as people become more familiar with using apps and complex ways and throughout their entire day, they're gonna be using their hands with them a lot, they're gonna become more dextrous to use them, so it might not always be the case, especially for advances apps or apps that people are using a lot. It's gonna be a trade off. If you wanna be able to touch this list item and it's too small, you can see how that's gonna be difficult. But if it is something slightly below the 80 pixel recommendation, you may be able to manage it too. So, it's some thing to think about and play around with when you prototype. Its rock gives a good balance of being easy to use. I'm fitting enough items on the screen. So next I'm going to bring in a photo of the product and a description of the product. And the chevron is just there to give a slight indication that this brings us a level deeper to another page. You sometimes see chevrons and other icons like this being used just as indicators to show what direction you're gonna be going in the flow. The reason it's not bright, like a purple color or something like that, Is it more of a civil indication. It's kind of like reassurance in your mind of where you're gonna go in this user journey. But it's not a call to action or something we want to particularly draw the eye to. Then we'll take the text from above and copy it, and this will be the product description. We'll grab the same product description that we saw on the newsfeed and we'll grab the picture while we're there as well. I've just realized that those row colors weren't actually white, which was what was putting me off with this icon, as well. So I'll just go back and tweet that error. That makes more sense now. So what size should the image of the product be? I'm in two minds because I would like to make it the same size as the profile picture to make it line up nicely, but I also don't feel like that's a big enough area to really show off a product. So I'm actually gonna make it one size bigger. The reason being with something I mentioned previously is to make two things different It's better to make them more different than slightly different to each other, because at least it looks intentional. Where as when you have things that don't have enough difference, it looks like an error. Something as well to consider when you're using assets like profile pictures, or product pictures in multiple areas in the app, is to use the same sizes over and over again. Think of it the same as text sizes. Like we spoke about with topography, you might have a set range of text sizes that you use in 32 pixel, 28 pixel, for retno screens whatever that is. You probably wanna use the profile picture in a limited number of sizes, and the same with this picture as well. It just creates a consistent experience and less for the user to learn, which is something I'm always looking for in designing an app. So that's kind of our list item there, I'll move the chevron down into the center. It's pretty big for a list item, but I kind of want to show off the product which is something that I'm slightly tweaking compared to what I had before. There's a couple of different ways I could repeat this list item, so first of all I'm just gonna group items together so I have the profile and I have the list item. So one way I could do this, is I could duplicate it over and over again. I could leave a space in there for the line between them. Or I could merge them together and then add a divided line and be able to change the color. Or the other way I could do it which I think I did the first time I created this screen, is I could bring this background down. Just copy the product information. And add dividers in between them like this. Dividers don't always have to be full width. It can create a bit more breathing room when it's split like this while still retaining a bit of structure. But what I realize when I look at the divider is that there's not really enough space. It's another thing you just figure out by building up multiple items. So, there's one column on the left of this item, one column on the top and one column below. That columns a bit to small to to be split between two items that when you them next to each other. So, I'm gonna do is go back. So I'm going to go with this method instead which makes the padding equal to the divider rather than to the next picture so it makes more sense. So that gives a kind of even look all the way around this. It's a pretty easy screen to create. I just wanted to talk about a couple of those issues around touch targets, using chevrons and items like this, and repeatedly using UI elements. It's only something you really see when I touch on multiple screens. So you can go back and see the original list view that I created with this app the first time around, and see which works better for you, whether you want to adopt it like this or go with the original style. In the next lesson we're gonna be creating a couple of navigation screens. It's a pretty nice one. And we'll touch on some iconography as well. So I'll see you there.

Back to the top