3.4 Completing Our Profile Page

Hi, this is Chris for Tuts+, and welcome back to the course. In the last video, we created this profile page, or at least the top section of it. For this lesson, I'm gonna start by creating the cards which sit underneath the profile page, and then we're gonna see how they can be used in other places as well. In the Layers panel on the right hand side, you'll see that I've organized the elements we've created so far. So there's the header area, there's the profile information, and there's the social buttons. As I mentioned previously, it's always good to organize your layers so it's easy to revisit the project. And also you might be using some of these groups in other places. So within the app, the user has a number of these lookbooks. In the example here, this would be my profile. I have eight of these books. So we're going to show a preview of each of these lookbooks with a number of products within them. And we're going to use a two-column layout, which as I mentioned before is probably the maximum amount of columns you can really use for content on mobile due to the limited screen size. What I'm going to use to create these cards, is I'm going to actually take the card we created for the home page, I'm going to re-purpose it for these profile cards. So, I'm initially just going to position this with consistent padding beneath the profile area, and I'm gonna see how it can re-purpose for one of these collections of products. The first thing I'm gonna do is get rid of the text, because this card is just gonna be image-based, and I'm just gonna use half of the screen for the card. Now I'm realizing an interesting problem. It's hard to actually, it's hard for me to completely match my grid and go with a 50/50 layer. I'll explain why. If I draw a rectangle here, just to use the context area minus the margins on the left and right-hand side, you can see the midway point is here. So at the moment that card is taking up 50% of the content area. But, of course, we can't just put the two cards flush to each other, or else there would be no gap between them. So we need padding. The issue I have with the margin between these two cards, and I'll just add another card area roughly to explain this. Using the content area 50/50, there's no padding, as I mentioned. But if I go and move this item one column to the left, then the other one is still aligned centrally. So, really, I need to move that one as well. So although they both have the right amount of margin from the center, the padding doesn't look even around the cards, because you're getting two columns in the middle there and one on either side. So this is one of those situations where I'm just gonna have to break the rules of my grid slightly. What I'm gonna do is I'm gonna give each of these cards half of the padding which they need. So if there's 32 pixels as there is right now between those two cards, I'm just gonna divide the padding between them. And as you see, this isn't actually aligning perfectly to the grid. But that's just one of the trade offs I've had to make. So, all we need for these cards is the title of the card itself. I'm gonna align that text to the baseline grid and give it roughly the same amount of padding above and below. And I've got to reduce the text size slightly. For the secondary action here, I'm gonna use a similar pattern, and I'm just gonna mention the number of items that are actually in this collection. And the other thing I'm gonna do is show four items within this area. So I've quickly jumped ahead and I just added four products to this cart. Ready to zoom in. You'll see, yet again, that the spacing is pretty even around each of them. I think I need to tweak it just a little bit. Actually, I've made a slight error. As you can see, if this card was aligned directly to the center, then you'd have the proper amount of padding. But because we've had to reduce the width of the card, it's slightly breaking my alignment. So what I'm gonna do is, to get the alignment right, I'm gonna move this back over. The right hand side of the card, it looks correct. And instead of reducing the width of the card, I'm gonna move the whole card over to the left hand side by eight pixels. Which means that the space we're losing, it's on the left-hand margin of the page rather than the center. Actually I'm kind of happier with this as a trade-off, because the card itself aligns to our grid structure, but as an item, it's just moving slightly outside there. So it has all the right building blocks to be identified as part of our app. And the margins we can kind of live with. So I'm just gonnato group all that and name it book one. The other issue that I'm having here, which I've mentioned before, is that this card is taking up too even an amount of space within this area. The person using this app should be able to scroll down through a feed of cards, but they're not really seeing anything below this card, because I've used up all the space. So I'm gonna try and save a bit of vertical space elsewhere to make sure that that card is cut off a little bit at the bottom of the screen, like we did in the news feed. So I've just simply bumped everything up a couple of rows. Then I'm going to copy this card and make book number two. And I'm going to create another row of cards below them. So we have a bit of a hint that there's more content below the fold of the screen. So my feeling on what we've created here is that it's not the most revolutionary looking app in the world, but it's very solid and professional looking. It wouldn't look out of place on your phone and so much of that we keep seeing is consistency, spacing, and layer. If we look at this page, of course we're using only one font. We're only using it in three or four different sizes and in two weights. Within that we've had enough room to create a hierarchy. We're only using two or three colors, and we're using the same spacing throughout. This kind of consistency is so essential, and the space between things is as important as the content itself. If you really make sure that your spacing is consistent, you'll notice how much more professional your designs look. The last page that I'm going to go create in this course is a card and list view, which the user will find when they click into one of these lookbooks. You'll see in the one I created earlier that I have the title of the lookbook here, Everyday Items, and I have a card and a list view. After you see how I've re-purposed the cards, you probably have enough information to recreate the card view. So give that a go for yourself. Then in the next episode, I'm gonna go through creating the list view. It's pretty simple, but I just want to talk through a couple of things, because list views are one of the most common views that you're gonna find when designing apps. Every app is gonna have one in a couple of places at least. So that's all for this episode, I'll see you in the next one where we're creating this list view.