Learn how to design and style your app so it stands out from your competition. Choose your app theme, your color scheme, and your app header.
Let’s get stylish! In this lesson we’re going to learn about designing and stylizing your app with themes, and how to style and adjusting your app info. In order to make changes to the graphic layout of your app, click on the Style and Navigation tab. You can start with Themes. You can try different pre-set themes, such as Dark, Light, Café and then if you click the right arrow, you’ll get even more themes. Let’s try a restaurant theme. Next, you can select Navigation and Layout. So we can choose to have your main app pages show up on the bottom with a More button, where they can choose from anything else with inside the app. You can have that menu up at the top. You can simply have a list of all the things you’ve added to your app. Or you can have them in a tile format. Now how do you decide which one will work best for your app? Well, since this is a test app, we’ve been adding just about every feature you possibly can. If you truly have this many app pages within your app, you may not want to go with the tile styling, since it will create an overabundance of icons. Instead, you may want to go with something like this list that displays your pages in an organized fashion. And I think this one works particularly well if you have this many pages in your app. Now what about using a menu? Let’s put the menu on the bottom. While Como offers an unbelievable array of app pages that you can add to your app, you may choose to take a minimalist approach and have just a few app pages that you’ve added to your app. If you have three or four main things that you want users to use, they’ll show up right here, and then all of your ancillary app pages, or the ones that are less important to you or you think will be less important to your users, can come under the More button. Now keep in mind that if you choose this view when your app users open your app, they’re going to come to the very first app page that you have listed. So, if we go back to App Pages, the very first one that I put in here was Facebook, so that’s what it’s going to default to. Now you can change the order of the app pages by just clicking and dragging. So when you hover over an app page, you’ll see two sets of dots. And that means you can grab it and pull it over, wherever you want. Let’s move Coupons in here, and then we want Events. So now we see down at the bottom we’ve got Twitter, Instagram, Coupons, and Events, while everything else that falls to the right of that will come under the More button. So, let’s go back to our Style and Navigation tab. Next we can use the Style section, and here we can change our color scheme. And you can change the colors of anything you want to in this app. So, we’ve got pre-set color themes here that you can click on and try these out. If one of these looks great to you then that’s awesome! Just go ahead and leave it like that. But you can come down here under Content Colors, and change everything that you want to change: all the colors, all the text colors, accent colors, borders, buttons, links, and anything in your app that has a color you can change. So let’s take Main Texts, and just for our purposes here let’s make it kind of a yellow, so we can really see the change. So we click outside there. We’ll see that we have a nice yellow text here. Actually it’s not so nice. It’s really hard to see this yellow color on the background here, so let’s make it something a little bit darker—let’s try blue here. This is not very graphically pleasing, but you can see now how to change all the colors. So, let’s just change our buttons and links. We’ll go with a kind-of purple color, so again we can see the color change and now we see all these buttons have changed. So, play around with those and figure out what color scheme works with your business, and perhaps matching it to your logo is a good idea. Next we’ve got App backgrounds in this section here. So you can always add an image or you can upload one, and you’ve got one image for mobile phones and you’ve got another image for tablets. Because as I’m sure you know the screen size is different on smartphones than tablets and users actually use them in a different way. Smartphones will be up and down, so you’ll have a taller image. Tablets are generally used in a horizontal manner, so you’ll have a wider image. So in order to upload an image all you need to do is click the pencil, go find your image—and it’ll upload that for you—click, OK and you’re done. Now we also have some different options for background images that are pre-set into Como. And so, we’re doing a restaurant app here in our example, so this is a real nice background picture. You can kind of see the glasses in the background, and that looks really nice, especially for a more elegant-style dining restaurant. So you have some options here pre-set, and you can also click, Show All, and then you can scroll down and you get any one of the app backgrounds that Como has pre-set for you. You can also change your Overlay color. Now if we go down to App Info, you may have noticed that if you’ve built part of your app, up in the top bar you’re generally going to have text. So, you’ll say, Joe’s Restaurant. And we’ve got sort of a standard font there. And what you can also do is upload your image. So you’ll have an image that needs to be 640 by 88 pixels. And when you choose that, you can upload an image, and it’ll upload your logo or whatever other image you want to up at the top. We can see that Joe’s Restaurant has a red font here. Let’s change the background so we can see this a little better. Let’s make this maybe more of a lighter color. So there’s kind of a green color. Now we can see Joe’s Restaurant much more distinctly. And just notice that that also changes the menu down at the bottom. You can also change the text color from here. Lastly, down at the bottom we’ve got Brand Identity. So you can choose your app icon, and it gives you a nice notification here, that if you change this and have already submitted your app, you’ll have to resubmit your app. And the reason for that is because the app icon that shows up here. So, let’s click, OK. So you’ve got two options here—Icon Bank, which are app icons provided by Como (I’ve chosen the fork and the knife, because we’re doing a restaurant app), or you can go to My Uploads. And you can upload an icon by clicking here, finding your icon, and clicking, OK. Now the recommended image size here is 192 by 192. So let’s go back to our Icon Bank here, and let’s just choose this app icon. We’ll click, OK. Now we see that our icon’s changed. Next you’ve got a Launch Image, which is also known as a splash screen. So when you open an app, it often takes a few seconds to load, and during that time there’s usually a splash screen that’s displayed on the app. And it’s very often the apps logo on a nice background, and since we have to have that splash screen in order to allow the app to load, it’s a great opportunity to reinforce your brand by having your logo on that splash screen. So, let’s go ahead and click the edit icon, and here you’ll see that you’re going to need to come up with four different splash screens. So we’ve got standard smartphones, we’ve got iPhone 5, which is a little different size, we’ve got iPad specifically, and then Android tablets, and these four (once your upload them) will cover all the smartphones and tablets on the market. So you simply click the pencil icon, choose an image, crop your image, click OK, and once your image appears click the OK button again. And now this will be your splash screen. There’s obviously no logo on this splash screen, so I would advise using a very nice-looking splash screen with your logo on it. And lastly, you can change your app’s name and change the language. So mine’s in English US, but you can choose any language that you like. Now after you’ve finished styling your app, don’t forget to take a look at how it’s going to look in both the phone format and in formats like iPad and other tablets. And when you’re done, remember to save your progress. And if you’re done creating your app, simply click, Done Editing.