2.3 Colour and Anatomy
This lesson explains how to introduce colour to your app. It discusses the function of colour, colour for branding, and how colour is used in different apps. The lesson also discusses anatomy, i.e. the typical structure of mobile apps, and the components and patterns you can lean on from iOS and Android guidelines.
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
2.3 Colour and Anatomy
Hi, this is Chris for Tuts+ and welcome to the last video of our Building Blocks Section 2. In this lesson, I just want to talk about using color in mobile UI design, and then before we go into the exercises in Section 3, I'm just gonna quickly talk about the anatomy of apps on iOS and Android. So, first, let's get into color. Here are the things I'm gonna cover, just gonna talk about native patterns, the function of colours, and colour palettes, so the first thing is how colours are used natively on mobile apps. Since iOS 7, most of Apple's own apps are using this kind of all white color scheme for their apps. You can see the content areas mostly have a white background, and as you'll see on the calendar app on the right, they use gray as a background color behind content and then the text on top of it is black and gray. The only colors that are used are for clickable areas. In the calendar app in the middle, the red color is used for a clickable area and in the podcast app on the left, the same thing is done by the purple color. So that's what I mean when I talk about the function of colors. When you introduce a color to an app, it should have a reason or function for its being there. In these examples on iOS, they're only using one color, and the color is being used to indicate tappable areas. Even within this, there's flaws though. When we look at the tab bar at the bottom, the active state is the colored tab, but of course, that's not the clickable one, because it's already active. The grayed out ones are actually the clickable ones. There is a few areas like this since iOS7 that Apple haven't quite got it right. They have similar problems with segmented controls, where they just have a color to indicate the on and off state. It's quite hard to identify which one is on and which one is off. What Android have done with their material design guidelines is they identify a primary color and an accent color. I think this works better. In the example here from their guidelines on the left, the violet color is the primary color and the pink color is the accent color. The pink color really stands out as a call to action, and that's what it's for. There's a lot of contrast between these two colors, so the idea of this accent color is that it stands out from the rest of the app when we need something to distinguish, be it for a link or a call to action. Google's inbox app on the right uses a blue and red color here. The blue color's the primary color, the red color is the accent color. You see the other colors that they've used in this app are other primary colors as well. The color palettes that Google are pushing for are quite confident in style and quite bold with the colors. When you're trying to come up with a color palette for your app, you have to think about what the experience is gonna to be like with the app. It's got to refer back to color theory and color psychology and figure out what you’re trying to achieve. Do you want the app to have a harmonious experience, where the colors blend together? Or is the app more vibrant, exciting, and attention-seeking, where it's using vibrant colors to catch the eye? Whereas with typography I said that you should stick with the system defaults as much as possible, I think color is more of an area of where you should follow the brand. Because apps are so flat these days, your brightened colors are one of the only ways you have of differentiating your app. You want to make sure that the user always knows what app they're in, and to create a positive experience with your brand. I do also think these accent colors work really well. So if there's subtle differences in colors between your brand, you could use the most vibrant one for calls to action and other interactive elements. There's a lot of areas where I think apps run into trouble using color. Here's two examples from the same company. So we have Foursquare's main app and we have Swarm, the new addition from a couple years ago. Swarm on the left uses its primary color all over the place, this orange. It's used both as background colors and clickable areas. For me, it's a little bit overwhelming. I think the white text is hard to read on top of the yellowy-orange background, and I don't think the active areas stand out enough on top of it. However, it does create a strong relationship with that color, and it's quick to recall the app in your head. You'll think about that orange color every time. Where Foursquare runs into problems on the right is that there's too many different colors going on. I can't really distinguish what the meaning of the different blues and pinks are. And when you see it interact with real content, these photos have their own colors anyway. So do we need as much color in the interface? It's a solution that Instagram have arrived upon. Instagram are using very little color in their app, and very little interface all together when you compare it with the app when it first came out. It was the height of iOS 6 skeuomorphism. But when you look at the modern Instagram app, the interface is mostly black and white, and they just use blue for text links so you know which text is clickable and which isn't. And why don't they need too much color? Because the content of the app is the photos themselves. And the photos are the real content. We don't want to be paying attention to the interface, we're there for the content. And because they've been so restrained in the use of color, it lets the photos themselves shine. They stand out in the interface and they provide the color and content to the app. Another app that's done it well is Spotify. Spotify has a reverse color scheme, where it's actually mostly black, but again, they haven't used too much color in the interface themselves. They only use their brand green color to indicate some active and clickable states. But to create vibrancy and interest in the app, they let the actual artwork do the work and let the interface fade to the background. So here's the four things I think you should consider most when using color in your app. The first thing is to Give each colour a meaning. Don't add loads of colors just for fun or to make it more interesting, it's an interface after all. It's not meant to be attention grabbing in itself, it's meant to facilitate content. The second thing is Contrast. Use colors in a way that helps you to distinguish the different meanings, and especially when it comes to an accent color or a color that needs to be a call to action. Give it enough contrast to the rest of the colors on the interface that it really stands out. The third point is to really Limit the use of colours. It just gets messy when you use too many, and as a user it's hard to distinguish the meaning between different ones and it creates too much of a cognitive load. And the final one is to Consider real content. When you're mocking up things initially, it might be tempting to add lots of color, but if your app, as is likely, is gonna use anything like profile pictures, product pictures, or any kind of real content, remember that that's gonna add the flavor and excitement to the app. So don't create an interface that's too loud, that doesn't allow that to come to the forefront. Make sure that the content is the first thing that someone sees, and then you're doing a pretty good job of color. So we're nearly ready to get into the action videos part of this course. The last thing I wanted to talk about before we do so is getting familiar with the anatomy of an app in both iOS and Android. If you're new to mobile design, it might seem intimidating to not know all the patterns and uses for the different objects that you see. But once you get used to it it's really helpful, because you're never starting from scratch. There's so many things that come out of the box that are gonna facilitate you from getting your app off the ground. It would take me too long to go through all these in the videos, but it's one thing I had to address before going through the exercise part of this course is to go through the guidelines for iOS and Android and to grab a kind of default UI kit. It'll help you get familiar with both the terminology and the anatomy of an app. For example, here's the iOS human interface guidelines, which goes through the basic UI elements. This gives you the anatomy of a basic screen. So you have things like the status bar, you have the navigation bar, you have the toolbar, and then you have other components like the search bar or a segmented control. There's so many different views and components. Don't get too overwhelmed by it, but see it as an opportunity to lean on already existing patterns. It'd be useful to grab a UI kit to start playing around with. Teehan and Lax have some quite famous ones that they created that have been downloaded by designers all over the world. In fact, when I started designing apps first, I was so afraid of copying that I didn't download these UI kits. But all it did was slow me down in knowing the conventions of the platforms. As you'll see, it has a bunch of the elements that you're gonna need. The segmented controls, the sliders, icons, search bars. It'll really help you get familiar with the components that are used natively. You should build on top of them, and then as you learn, you might find improvements. But native components are gonna be your best friend. Material design guidelines have similar UI components defined. They have a basic structure of the app, which is similar. It defines the toolbars, the bottom bars, and where all these things are placed. Separately, they also have a section on components. And these components include everything from buttons, dividers, bottom sheets, list views, menus, pickers. Even if I go into pickers, there's things like calendar and time pickers which they already have patterns for. I'm not saying it makes your job easy, but you don't need to reinvent the wheel every time. Get familiar with these as soon as you can, and it'll really help you in designing your app. And similar to the Teehan and Lax iOS UI kit, you'll be able to find good Android ones as well. One other thing you can do to familiarize yourself with the anatomy of apps and these components that are available to you is try and recreate a few screens from an app that you're familiar with. And you'll start to recognize them for yourself. As I said, it's something that you'll get familiar with over time, but I'd suggest having a bit of a look over those guidelines and grabbing a couple UI kits, and I'll see you in the final part of this course where we're actually gonna start designing our app.