3.6 Navigation Screens
One of the most distinctive parts of an app is the navigation. With what we’ve learned so far, we’ll put a lot together to create both an iOS-style tab bar and a more Android-style drawer menu. The lesson also touches on iconography, and how to create a consistent icon style for any 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.6 Navigation Screens
Hi, this is Chris for tuts+ and welcome back to the course. In this video, we're gonna be creating a couple of different navigation options for our app. So, here's the news feed that we had from the start. And what we're gonna be doing is going through a side nav, add a tab bar navigation system. Whereas in some of the previous videos, I was going through making these from scratch. In this video, I've gone ahead and created the navigation options for us. By now you should have the basic idea of how these are put together. The way I'm aligning things, the use of blocks, colors, etc. One thing to note is that even if you're using the same application, everybody does things differently. Often at work I'll talking to a colleague and I'll see the way they're doing something completely different to me. There's not always a right or wrong way to do things in Photoshop. Mainly because it wasn't built for UI design originally. A lot of things are work around, but whatever way works for you to get things done is okay. Ideally, it's good to have work flows that are repeatable and that save you time as much as possible. Beyond that, it's up to you. So, as with everything in this app, we're mainly focused on the UI and I'm not too worried about the contents of this app or whether the overall system makes sense. We're just gonna look at the visual side of things. So, the first thing I tackled is a side nav. Let's zoom in and have a look. I've broken it down into a few folders. We have labels and icons. We have these dividers. We have the highlight on one of the tabs and we have the profile area at the top. So, how did I create this? Well, the first thing I needed to show is, what are the screens being pushed to the sides, make room for this side nav? There's a couple of different ways to do it. You'll see I've moved the entire screen to the right. There's other examples where it overlays the screen rather than pushes it out to the right, or you get a kinda stylized version. But this is just what I went with. So, the first thing I had to do was create a copy of the news feed and push it out to the right. You see I have that here as a smart object. And that contains the entire news feed. So, if we turn everything else off for a second, you'll see that's been moved to the side there. The next thing I did was an an overlay. I didn't use a pure black but I used the black from our color pallet and I set the capacity to 80 percent. Then I brought in the background of the sidebar, which has a slight drop shadow on it to show it's a layer of both the screen that's been pushed to the right. This is the background for the side nav and it's again just one of the colors from our color palette. I played around with a couple of options. You could have made this red as well. But for the layout that I wanted, I found the purple worked better in the end. Then there's the profile area, as you'll see it has a good bit of space around the top and bottom of it. What I tried to do is sorta replicate what the profile screen itself looks like when you go onto it. So, that it kinda makes sense when you jump from there to there. It's good to use the same elements over and over again. It prevents adding new patterns which people will have to learn. So, what else is in the side nav? Well, I have this kinda highlighted tab style. So, how I created that was, I added one rectangle which is just again our black with a 10% overlay. And then I also put this white bit out to the side just to show that it's active. I just thought it gave an extra reassurance for a user. Then we have these dividers, that again are just overlays. And lastly, the labels and icons, this is where it gets interesting. What I've mentioned a couple times is using ample padding. What you'll see here is that if we look at how much area the text has taken up, it's basically one of our rows. But there's four hole rows above and below, so there's ample space. It's not what you think initially when you started marking this up. It seems a bit excessive, but it gives ample space to each item and gives it importance, and also a big touch target, so it's easy to tap. For the difference between the active states and the inactive states, I've just reduced the opacity to 70% on the text, and to 40% on the label. At the bottom, I have to more icons just for settings and notifications, which are in a slightly different style. The icons are slightly bigger and they don't have labels on them. So, you can see there are quick ways for the user to get to different parts of the app using this type of navigation. The complaint that's also made about these kinda side drawers that are accessed by the hamburger icon is that the discoverability is low. Because they're not on the screen all the time, it's not easy to know what options are available to you. But from a purely visual point of view, it's good to know how to create them. As for the icons, I mentioned earlier when we were looking at the profile page that I wasn't gonna dwell on them too much at that point. We just put in some placeholders for the time being. When I was working on the side knob, I realized that icons would really help, but they needed some style and consistency to really bring this page together. So, what I did was I created a quick icon for this app. I'll go to illustrator now and just show you the icons and how I created a consistent style. So, there's a few different elements that you can use when creating icons to make sure that the style is consistent between them. The first thing is whether they're fill or line icons, so in this case they're all line icons, which means as you can see there's no fill color. It's just a stroke color. There's a few other things you can choose that if you keep consistent will really make the icons come together as a set. The first one is the stroke weight. So, you'll see on the end side of each of these objects the stroke is four point. I have a slight error with this one here. Then what I've done is I've actually created some thinner strokes on the inside which is something that you'll see done sometimes, so they are only two point. It gives a lot of ways to the basic shape. And then the inner details can have a bit more subtlety. I'm not saying this is the perfect way to create icons, it's just one example. But you can see that by making those conscious choices, and making them the same in each icon, they look like a family or a set. Another thing I've done is I've chosen to round the corners and caps of these shapes. Which gives them that kinda rounded friendly feel on the end of them. Another example for icon set that they created was one that we were working on in Ryan Air. Here's an example of one of the first icons that I created. We needed something a bit more detailed that would work at a larger scale. So, what I did was I put this big stroke around the outside. I had a highlight here in the top left, a shadow in the bottom right, this dotted shadow coming out from the object, and a stripe line. And then there's two colors, the bright blue and the navy. Then when I went to create other icons in the set, I just pasted of the same elements. So, you'll see here that I have the same text stroke around the edge, always in black. They're mainly based on this bright blue. The secondary color is the navy, then they have a highlight in the top left and a shadow on the bottom right, with a stroke shadow protruding from the end of the object. The best thing to do, is to play around with one icon until you like it. And then see if these styles can be carried across to the other icons. Designing icons is very time consuming. For instance, even coming up with this small set for this app, took me a few hours of playing around with it, until I got something I liked. Designing icons, is an art in itself. So, sometimes it's just best to download a free icon pack or commission someone who does icons specifically. But if something that you wanna get into yourself, that's a good place to start. So, moving back to our app, what size did I make the icons? When I was creating the icons originally, I made sure that they all fitted into a sort of square area, so that they would line up nicely. If you look as I drag this square across, they more or less all sit inside this area. Depending on the shapes, I sometimes let small areas protrude if it helps to add detail. But overall the size and balance of them on this page is quite nice. The icons at the bottom I've made slightly bigger because they're in a different context and they don't have labels. The ones that line up beside the labels are actually really small. If you look here they're only 32 pixels which would be 16 pixels on a non-retina screen. So, you can see that you wouldn't be able to get away with much more detail within that space. So, that covers the side nav, what about a tab bar. Tab bars are probably more common on iOS. They're the native kinda style, whereas sidebars are more native to Android. I've created a tab bar version of the same navigation here. Natively in iOS, these tab bars are usually white. I went with red because I felt it synced nicely with our header area and it brought it up and off the page, that it wouldn't clash with these cards on our most common screen. The tab bar aligns the five bar rows. It's only 80 pixels in height. I think natively they can go as high as 96 pixels, but I felt it was all I needed for this screen. And again, I've just made the inactive ones a lower opacity for both the icon and the text. And I've given the area behind the active tab a slight shadow. If you look closely, as well as the background area, I've also given a slight divider between it at the tab side and I've even give it a slight stroke at the top to lift it above the content that scrolls beneath. Similar to that header area, it has a slight drop shadow as well just to give it that lift. The icons again are 32 by 32 pixels. The text is a little bit smaller than text I've used elsewhere. It's quite difficult to squeeze text into and area like this. So, that just give you a quick idea of how you can create these two common navigation patterns for your app. There is other navigation types. Sometimes you'll see a tab bar that's kinda beneath the header area here. I'll include the Photoshop file with these two navigation folders and you can tune them yourself for your own app. Thanks and I'll see you in the next episode.