3.2 Creating a News Feed Screen
The first screen is a news feed, which is a common screen type in many applications. We’ll use shapes, images, type and clipping masks to create the basic objects which make up this interface.
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.2 Creating a News Feed Screen
Hi, this is Chris for tuts+, and welcome back to the course. In the last episode, we created the basic skeleton for our app. We're now gonna begin designing the news feed. So the first thing we're gonna do is create the background card. Because I'm using an old version of Photoshop, I'm using a rounded rectangle, but in newer versions of Photoshop, you can just create a normal rectangle and add a radius with the properties tool. Rather than worrying about the specific size of this rectangle, we're just gonna let the grid be a guideline. Okay so that's the basic shape, and we'll decide on the size later, depending on the size of the content. So I'm gonna give the card a white background. Although it's almost flat, you want to indicate that the card is a layer above the background. You can do this either using a stroke or a drop shadow. For example, we could add a stroke that's slightly dark in the background. Being careful to get the color just right that it doesn't have too much contrast, but just gently lifts the card off the background. Or we can do it with a drop shadow. I usually go with 90 degrees and just give it a couple of pixels drop shadow. Again, similar to the header, you're gonna want to reduce the opacity right down for this. Because I want to keep this design as flat as possible, I'm gonna go with a stroke in this case. I've played around with the colors just to get the color of that stroke right. It's quite tricky. You want to get something with enough contrast to lift it off the background, but without making itself more prominent to the actual card background. I made the stroke two pixels rather than one, the reason being that this is for a retina design. Bear in mind always when working with retina dimensions that you want to keep everything to even numbers. If you had for example seven pixels, that would be three and a half pixels at a regular resolution. But of course we can't have half a pixel. So to make sure that your designs are sharp and crisp, you want to make sure that everything is in two pixel increments, or even numbers. So this is gonna be a user posting on the news feed. There's gonna be a couple of different pieces. There's the text describing the post, the image that's linked to the post, there's the profile picture and who posted it. So let's start with the profile picture area describing who left the post. First we're gonna add a divider to separate the profile area from the post itself. I've gone six of our grid lines down from the top of the card, and I'm gonna give that line the same color as the stroke on the outside of the card. As you'll see the line is coming out over the edge of the card. Rather than having to get this pixel perfect every time and for other reasons which we'll explore later, the best thing to do is go Layer, Create Clipping Mask. This is something we'll be doing a lot. Part of Clipping Mask tools is, it simply limits the shape to the area of the shape below, so I can't go outside that area. It becomes quite useful as you'll see later. That stroke looks a bit too heavy, even though it's the same color as the one on the add slide, so I'm gonna reduce it just a little bit. Okay, next I'm gonna add the profile picture of the user who's made this post. We're gonna zoom in on this area, and similar to the way we did with the menu above, we're gonna try and create a square area with an even amount of padding around the profile picture. I'm gonna leave 16 pixels of padding the whole way around, so let's quickly see how we can create this. So again, the shape aligns to our grid as well. In this case, it's 64 pixel circle. Okay, so now we're gonna want a profile picture to go on top of this. A handy website to use is uifaces.com. This is a website where people have added their profile pictures for people to use and use for interfaces. So they're great for mock ups, and you don't need to worry about intruding on someone's privacy. Okay we're gonna paste in this image, and before we add in the Clipping Mask I'm gonna convert this to a Smart Object. The reasons is that we don't know what size or want this image to be later. When you just reduce the size normally your compressing the image and you can't scale it up again. But when it's a Smart Object it retains the initial pixel data, so it can come in handy later on. So first we're going to roughly scale that down to fit inside our circle. But we don't need to be too accurate as we're gonna go Layer, Create Clipping Mask again, and now you can see that that profile picture is limited to the area of our circle. We're gonna have the heading here. And we're gonna give it our text black color. How should it be aligned? Well, we're trying to have the same padding the whole way around the edge of this profile picture, so we wanna leave one column of space again to the right of the profile picture. As for the vertical alignment, this is where a baseline grid comes in handy. So as we spoke about earlier, we're gonna align the bottom of the x side to our baseline grid. Then we're gonna add some descriptive text beneath it. When you have heading text like this with description text beneath it, you wanna make sure that there is enough contrast between the two text styles to be distinguishable. It's commonly said in typography that it's better to have more difference than less, because two types styles that are too close together look accidental, we wanna make the difference look deliberate and clearly indicate the hierarchy of this type. So this text is just descriptive and we're gonna drop it down to a lower text size, and we're gonna give it our gray color. It's aligned to the baseline here, keeping somewhat of a rhythm, but I feel like there's not quite enough room for this text. As well as aligning to this baseline we should make sure that there's the same amount of padding above and below the text. So I'm gonna move this divider down one cell, and because we want to make the profile image bigger, we have to do it in both height and width. So already I'm glad that I made this image a Smart Object, because now I can just scale it up, retaining the quality. Again, we'll just move the text over by one column. And now you see, even though we don't have many elements, there is a bit of structure to it already. Next I'm gonna add a text describing the post. So I'm bringing it in by one column and again I'm aligning the text to the baseline grid. For this I'm actually gonna create a text box rather than free text. The reason being that I wanna limit the text to a certain area and see how it wraps. Let's just put in some place holder text. Okay, so if you go to the character panel, you'll see what the line height is for this text. Here, it's 32. In general line heights should be between 1.4 to 1.6 times the size of the text. So if it's 32 it should probably be something like 48. And with this 48 pixel size, you'll see it aligning nicely to the baseline. The one problem I'm seeing is that this text is very similar to the main heading. So to keep having the hierarchy, there's not room to go up much more in text size, and I want to keep the text nice and legible. Although to me in Photoshop the text looks a little big, when you get it on the device it looks a lot smaller and that's something that you get used to the more you're looking at it. So let's go back and make the main heading bold to distinguish it from the body copy. Or even medium, bold feels a little bit too much. Next we're gonna add an image of the product. I've just increased the size of this box so I have plenty of room to play with for now. I'm just looking for an image of a product that suits what we're describing here. Okay, let's take this one for now. So where are we gonna place this image? The two main options are to place it here in the middle, or to have it side-by-side with the text in the card. I wanna make sure we're getting a few items in the feed. So I'm gonna place this to the right and limit the text to a certain area using the bound inbox that we already created. Now that we've limited the width of this text column, I think we're gonna have to reduce the size of the text as well, so that we're getting a bit more words in per line. Again we're gonna make this image a Smart Object, and reduce down the size a little bit. In this instance, we can't be sure what type of image the user will be uploading. So I'm going give it a square area with a slight stroke to indicate where this image goes so that no matter what, we can always see what the image area is and have something common to tie them together. So I'm not gonna have a fill on this box, I'm just gonna have a stroke. I'm gonna use the same stroke that we used for our line earlier, and again give it two pixels. You can see again that the padding is one grid line in from the side and the top of the item above. Because the stroke is aligned to the outside, it's starting to clash with that alignment a little bit. So I'm just gonna position the stroke to the inside instead. And if I select both the image and the square, I'm just gonna center them vertically and horizontally. To me it still looks a little big, so I'm gonna just reduce it down a bit. When I look back at what we've created so far it looks a little bit anemic, it needs a bit of color to be added. So what I'm gonna do is rather then just having a dividing line here, I'm gonna give the whole top section a background color. So we're gonna add another rectangle. And as you probably guessed, I'm gonna create a Clipping Mask again. Layer > Create Clipping Mask. And I'm gonna give it our purple background color. And then I'm just going to clear the divider below, which we don't really need. That gives a bit more distinction between the content area and the header, and gives it a bit more personality too. So the only other thing I want to do is reverse the color of this text. I'm gonna make this text light to reduce it even further. And you can already see a bit of personality coming together for the design. But, most importantly, there's a structure and consistency to the layout and where things are placed, which will make it feel solid and more professional. The last thing I wanna do for this card, is create an area for tags and for users to like it. So we're gonna add another rectangle similar to the one on top. And again, we're gonna make sure it has one row of padding from the item above us. It's hard to know exactly what height this needs to be until we add the content. This is gonna have a really light area just to indicate that it's secondary. And we're gonna add a couple of tags that the user has added. All caps is frequently used for secondary information in apps. The reason for this is that all caps, unlike paragraph text, has no ascenders or descenders, and so it has more of a blocky look. It's not easy to read for body copy, but when something's a supporting element it provides a nice bit of structure. And you can also get away with smaller type sizes. For instance, I'm gonna make this 22 pixels. Which is 11 pixels in a non-retina dimension, which is smaller than you'd usually go for body copy, but you can get away with that for this kind of structural all caps style text. The idea here is similar to hashtags, that a user could click on this and find the other post tagged Autumn. And the fact that it has color, makes the text look a bit more clickable. More and more, you'll find that app designs, that there's a lack of actual physical buttons. So in the past, you may have seen something like this, where there was a solid color behind this. And the text would be reversed out. Or more recently there's been a trend towards ghost buttons, as they're called, which have a stroke but no fill. So that would have a purple stroke, the same as the text, but no fill color. The thing is though, this is a supporting element. It's not a call to action. And people are so used to touches, and mechanism on smartphones, that we don't always need physical buttons to indicate, that something is clickable. Especially when it has color to indicate a link, it's not really so necessary. So, let's say we have two of these tags. Rather than having two buttons lined up, we're just gonna have two pieces of text with an adequate amount of padding between them to indicate that they're separated. Finally I'm gonna add a hard icon which I've created earlier in illustrator. This will be in the resources folder, which will give the user the ability to like it. Again, because this is an interactive element we need to think about the before and after state. What does it look like before the user has liked it, and what does it look like afterwards? Unlike the text, I'm gonna give this an extra padding from the right-hand side to indicate the large touch target. For the state before it's liked, I'm gonna give it a red stroke and no fill, similar to the ghost booking style I was just discussing. So this will have a two-pixel stroke, and no fill property. Check whether it looks better inside or outside. I think it looked better with a stroke on the outside. And then for the like style, it'll just have a color overlay. So here's the two different states of this button. We're gonna leave it unliked for now. So now we have our first card. Wasn't that easy? So now we have our first card and it is looking pretty solid. You can quickly auto select and group all these objects and name this Card1. Then you can copy this card and create multiples with different profile information and posts just to test out the design. Again, I'm making sure that the padding is the same between the cards as around the outside. And I'm creating third card. Sometimes the temptations is to divide up the area evenly so that things fit in neatly. Actually, It's a better idea to have this slight overlap. The fact that the cards don't end neatly on the screen gives an indication that there's more content below the fold. So it's clear to someone that there's more content if they scroll down. You can tidy up the layers inside this card as I mentioned before. Give them names that make sense, so that it's easy to follow your work. But I'll leave that to you to do. So now we have our basic news feed. I hope this lesson was helpful, and I'll see you in the next lesson, where we'll be talking about creating a profile page.