3.3 Laying Out the Profile Page
In this lesson we’ll create the top part of the profile page. This lesson goes through some typical layout and typographic issues that you’ll encounter when working on 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
3.3 Laying Out the Profile Page
Hi this is Chris for tuts+, and welcome back to the course. In the last video we created the news feed for example app. In this episode, I'm going to be creating the next screen which is a profile page. Again, the specifics of this profile page aren't too important, but there'll be a lot of principles that you'll be able to apply to your own designs, and the profile page is a typical screen that you might in any app. Okay, so for the last time, we have the homepage that we created, which I'm just gonna hide now. But we're gonna need this header. Here's a quick look at the screen that we're gonna be creating. So what information do we have? We have the user's profile picture, we have their name, we have some details about them and some facts about them on the app. Then there's these secondary actions, like adding them as a friend or sending them a message. And below there is a two column card layout with the looks books that they've created. Okay, so the first thing I'm gonna do is create a copy of this header. Because the person's name is further down the page, there's no need to give this page a title as well. So we'll give it some breathing room by merging this navigation area with a profile area. I'm quite frequently copying layers and creating different versions of them like this. To quickly create a copy of a layer, just hit Alt and one of your arrow keys. So I'm gonna delete that page title. I moved out of the navigation area somewhere along our grid line. Next I'm gonna add a circle for our profile picture and I'm gonna give it a size that aligns to our grid. Then I'm gonna just give it two rows beneath this icon here. I'm just gonna separate this from some of the other layers. Know the profile pictures that I can get on Uifaces are big enough to fit in this area. So I'm just gonna use a picture of myself to avoid using any copyrighted images or images that I don't own. As usual I'm gonna convert this to a smart object. I'm gonna go to Layer, Create Clipping Mask to limit this to the area of the circle. I wanna give this circle a slight stroke around the picture. Without that, it just feels a bit unfinished. It looks almost like we're looking through a hole. So I wanna give this profile picture a distinct area on the page. I'm gonna make the stroke quite strong and give it a stroke of four pixels. Although, that, of course, will be two on non-retina devices. One thing as well is that you can position a stroke inside or outside. I'm gonna go inside, the reason being that when I go outside, this actually knocks our profile picture outside of the square area that we've aligned it to. So let's just align that stroke to the inside of the image. You might think there's a lot of wasted space around this profile picture, but actually white space is one of the most valuable elements in any design. By giving a lot of space around this image, it shows that it's important. It's important enough that we're not adding competing elements, and we're giving it room to breathe, just to indicate it's significance. It's one of the most common things to hear designers complain about clients, that they'll see empty space and decide to fill it with anything, just cramming things in there. It doesn't really happened so much but still you want to find to get significant elements have a good space to breath and appears significant on the page. When you're are leaving lot of space like this so it great its handy to give it a structure rather than floating endlessly. Next about add the name beneath the profile and I'm gonna give that the biggest size from our style guide. I'm gonna center the text and place it on the center of the page beneath the profile picture. I'm gonna leave two rows of padding beneath the image and there we have it. Okay, so if you're on a user's profile in an app, the next thing you might want is some information about them, just some basics so you have some context about who they are. So I'm gonna add a location, add a description of the fashion sense of the user. So first I'm gonna add a location. So this is supporting information. I don't want it to compete with the name. We wanna indicate that the name is the most important thing on the page. So to give it this hierarchy, we're gonna reduce the size of this location text. I'm gonna try a 28 pixels. Even at that, the two text sizes are a little bit too similar to be differentiated, so I'm gonna reduce it a little bit further to make it clear which is more important and I'm gonna reduce the weight of this text to light. Okay, so you can clearly see the hierarchy between these levels of text and the image. Again, I'm gonna give two rows of padding to have some consistent spacing and it's gonna move this to the left for a second. I'm gonna copy the layer. And I'm gonna add another piece of text describing the user's fashion style. Let's just call me a hipster for the fun of it. Next we're gonna wanna make sure that these two pieces of information don't run together so I'm gonna put a divider in between them. Use your shapes tool, and add a line. You'll see that these two items of texts are roughly contained within one row of height. But I'm gonna make this line a little bit bigger, so that it doesn't look like a text character. And I'm gonna reduce the opacity right down to 20%. So, that just gives it a little bit of structure. What sort of padding should we have left and right? Well, it's gonna be the same again. I'm gonna make sure that text is aligned right to the baseline. And then I'm gonna leave two columns either side of the divider, which gives it a nice little bit of structure. One thing you will notice is that the text on the left is longer than the text on the right making the design seem a bit unbalanced. Consider this when you are designing mobile layouts, especially because they deal with a lot of changing content and user information. You can never be 100% sure about what content will by in a space. That's why you should avoid Lorem Ipson or place holder texts as much as possible, and consider what the real text might be. Also consider edge cases and what might happen if the text wraps or gets too long. So you might want to have solutions where the text has the ability to wrap or limit the character count. Don't just use perfect text examples, but deal with real world situations. Okay. From the resources PSD you can drag in these two icons as well. Moving the icons to one side I'll just discuss why these might be added. These two pieces of information are kind of irrelevant without a label. You might not know what this information means. So typically you might have a label like Location, Above Dublin, Ireland and Fashion style above the other. That would technically be correct. So, why instead am I using icons. Well, mostly to save space. It also adds a bit of visual interest, but also these are supporting pieces of information. If I start giving them labels, they're taking up as much space as the profile name, and they're not really that important. These icons will just give enough of a hint as to what the information is about, in case the user is unsure. I've made the icons roughly to fit one of our tiles, and I'm gonna leave one column of padding between the icon and the text. I'm putting the icon on the left-hand side so the word Hipster has to shift across a little bit. Why am I leaving only one column of padding between these and two columns between the others? What you need to think about is the meaning of space. Items that are more related should be closer together than items that aren't. So that's looking pretty solid. Then I'm just gonna have these dynamic numbers that tell us a little more about the user. So we're going to save the number of look books that they have. The number of friends and the number of likes. 36 is our max text size typically. But these are very stylized elements. So I'm actually going to break this rule and bump the text size right up to 64 and make it bold. Again you guessed it, two rows of spacing between this and the above content. And there is one row of spacing between S and the content that's related to it. I'm actually gonna duct this text just a little bit because I notice that it's kinda competing with the main name which is the first thing that we want them to see. So let's reduce that text down to 48. That gives a better hierarchy. And I'm reducing these labels down to 18. This is actually below the legible text size that I'd recommend. But as I mentioned previously, for all caps or supporting text like this, you can get away with it from time to time. Okay, so how are we going to align these pieces of information? The easiest thing to do is imagine that there's a box around them, okay, so let's grab the number 8 and the word books. One other quick thing to mention is that technically that should probably be the word look books, but I've adapted the word to fit my layout, and that's what you really need to do design and content together, because each can affect each other. If that was the the word look books, it would totally break the layout. But the word books equally works in that space. So I'm gonna create a square around these two. So that's the amount of padding that I want to the left and right of this. Actually, I think it might even need a bit more space. So I've created three squares of different colors to indicate the imaginary space that the three items will be taken up. Also bear in mind that these items will be selectable. And you wanna make sure to give an adequate touch target around them so the user doesn't accidentally click the wrong one. So I'm gonna select each three relevant items and center them to each other. Then I'm gonna delete the three squares. And there, you have a bit of structure. It's a bit of a hack to demonstrate. But you can see, with those imaginary squares, how I've managed to give a bit of structure to items that would otherwise just be hanging there. So I'm adding a white bar to give it a bit of contrast from the main area. And then I'm gonna give it four grid lines. This is just gonna sit on top of this. Actually before we continue, let's go and group our previous elements. We can tidy them up later. Just so that we know that that's the profile information. I will group these all together as the profile page. Now you can quickly switch back between the different pages within your [INAUDIBLE]. Again, grab the icons from the pack that I provided and we're gonna have another one of these dividers to separate these two actions. Actually we can copy all of these information from above. And just change the color of that text to our purple color. The icon as before is just gonna sit one column across from the information, and there's roughly two columns between the information and the divider. The purple color is getting a little bit lost with this weight, so I'm gonna make it medium. So that might be a pattern that we'll use elsewhere. As you discover things going through your design, it's important to remember why you did them. And then you can create patterns that you'll use elsewhere. So I'm have to decide that every time I have text that's purple and clickable, I'm going to make it medium and perhaps even the same size. Then the next time I want to create a clickable action I can use this again. It's good to use the same patterns over and over again. It creates visual consistency and expected behaviors for the user. It's better for you designing because you don't have to create a new item every single time, and it's better for the user because they don't have to learn something every time. I'm actually gonna make this background area one row taller so there's even padding above and below. And I'm gonna give this the proper text information as well. Even things like where you use capitals and where you don't, so I'm using title case rather than sentence case for these buttons, remember these things and try and keep them consistent as well. One note on pattern and spacing, the crazy thing about this section is that if you look at the text, it's actually just taking up one of the rows and four whole rows are dedicated to padding. But this is something that takes a while to get used to. but just never be afraid of padding and always add more rather than less if in doubt. More spacing gives context information. And let's users understand what's important quickly. Also on mobile when you have space around objects it creates a bigger touch target which prevents user error. So now we've created the profile information area, that's all for this lesson. In the next lesson we'll be creating the two card column layout showing the users different look books. Thanks and see you in the next lesson.