When you start creating screens in your web or app design, you’ll want to work faster by setting up consistent elements like headers and footers, be able to change screen sizes, and more. InDesign master pages give us that power and flexibility. In this video, you’ll explore how to effectively use master pages for UX projects.
- [Instructor] When you start creating screens in your web or app design, you'll want to work faster by setting up consistent elements like headers and footers, be able to change screen sizes on a page and more. InDesign master pages give us that power and flexibility. In this video you'll explore how to effectively use master pages for UX projects. So that we can set the page size, the guides, the columns, a footer element and different things like, to be consistent across a bunch of pages in our project, we're going to use master pages.
On the right hand side, go over to the Pages panel. Click on Pages, right there, and you should see that we have our masters up top and our pages down here. Master pages, we start with one. Essentially, anything that shows up on a master will show up on the first page or any page we create. So if we put anything on the master page, it's going to be contented, it's going to be consistently across all the pages. Double click A-Master. And here's a nice little tip; I love this. If you want to change the name, if you have the name selected here, what you can do is opt, on Mac, or Alt; click on the name and you can change it right here.
So you're going to see Prefix. We can change the name to something like Phone. If you want to be very specific, go ahead. We'll keep it really simple. Then click OK. Now we're going to add or do a few things to this page to make it so that it works for every page. First of all, we're going to set some columns. Come into Layout, come to Margins and Columns and we're going to go in and change the Top and the Bottom. So set this one to 0, press Tab, 0. Left, Shift click on the arrow down and make sure that it's at about 30, there we go.
Same thing there. And make the Gutter about 30 as well and Columns set at 2, just so we have some columns to work with. And there's something called Enable Layout Adjustment, you can work with. That means that if you adjust the size of the page, for instance, the content can move with it and maybe even resize. We're not going to do that right now. So go ahead and click OK. We're going to put an object down here in the footer. I don't want to make you create that right now. So we're going to open a file and copy, paste. Come up to File. Go ahead and open up a file.
In the Exercise Files folder, 03_ReusingContent, you should see a file called content. Go ahead and open that up. There's just some really simple things in here. We're not going to go crazy, but you come down here, you're going to see a bar. Click on that. It should select a group that has these icons in it. Copy that. Come back over to your app, and what we're going to do is we're just going to paste. So if you come under Edit, Paste in Place should put it down there, and then just drag it down towards the bottom, and there we go. We've got ourselves some columns.
We've got ourselves this footer object, down here. If you come to the first page here and double click, you're going to see it's all there now. Unfortunately for the first page, in a previous video, we set the margins and the columns and all that, so it's different from the master. So what you can do is just reapply the Phone Master to this one. And it should override what we've got out there. Now let's create a few more pages out here. Make sure the first page is selected, otherwise you're going to create master pages. And click to create a few more pages out here. And you'll see it's just going to do it vertically, like this.
If you double click on each of these pages, you'll see they're pretty much the same thing. We can create master pages of different sizes, maybe for tablets, maybe for desktop; that type of thing. But let's do this. We're going to create a new master page. So click on the Master Page, right here. Come down here and create a new master page. Opt + click on the name here, because it's selected it'll let you do that, otherwise it won't. Alt + click on it. And let's call this one Phone Home and click OK.
It's pretty much blank. It's the default content. What we can do is we can actually say let's apply the Phone content to this Phone Home, which is going to be the home screen for our app. This Phone master page could be used as a master's master. So we're dealing with something called based on master. If you opt + click, or Alt + click on this name again, you're going to see, right here, Based on Master. Go ahead and choose A-Phone. The A is just a prefix. It's not like a phone. Click OK and you'll see what it does.
It applies the content from A-Phone to A-Phone Home. Notice the A in the corner there. On A-Phone Home, let's draw a box. Go over here to the rectangle frame. Draw a box; make it about as big as we want. We're designing here, quickly. Let's go change the fill. Make it black. Come up here and let's change the tint to something a little bit lighter, that way we don't have to stare at it. Press Enter or return and you can see the box. This is going to be the home screen. So if you notice out here, you'll see that the A, out here, indicates the A master page is applied.
Well we have two, so we need to change that prefix, right there. Opt + click, or Alt + click on the name again. Come here to prefix. Just call it B. You can put up to three characters in there, if you want to. Click OK. There we go. Now this is going to be for the homepage. So if you come to the homepage, double click to look at it, you can see it's just got the A-Phone master on it. Come up to the B-Phone Home. Opt + click on the master thumbnail and that should apply it. Later, if we decide to make a change to the original, the A-Phone master page, double click on that page to go to it.
Let's suppose we want to take this bar and move it up or move it down. So come to the selection tool here and drag it up a little bit. And if you were to look at all of the pages out here, you'd notice; by double clicking; it changed on all of them. That's because A-Phone is applied to the B master page, which is applied, first of all, to the first page and so on and so forth. All right, let's undo that. Go to Edit, Undo Move. That way it should put it back in all the master pages and pages. If you want to, you can also create a master page for a different screen size, for instance.
If you come up here; we're in the masters; if you click on one of the master pages, it doesn't matter; come down here and say make a new page, it's going to make a page the same size. If you come down here, you can edit a page size. Click to create a new page. It's going to create one called A-Master, again. Opt + click or Alt + click on the name, because it's highlighted, it'll let you do that. Call this one C. Call this iPad, or something like that. We won't base it on A-Phone, but click OK.
Now we can change the page size and the orientation. Come down here, with it selected. Make sure that this page is selected. Click on the Edit Page Size. And you can see we've got a series of page sizes. I might have more than you, because I created a custom one. But what we're going to do is come to Custom. Click on Custom. And we'll call this iPad-Vert, something like that. Make sure it's vertical.
See I've got one down there, you don't have that. We could change the actual width and height. You guys could pick one down here and then change it to a custom page size, if you wanted to. Make sure you've got the width and height set around these sizes right here. Click OK. Click the Edit Page Size button, down here, again and choose iPad-Vert. Go in View, Fit Page in Window, so you can see the whole thing. There we go. Now we can go in and add content that we want for this one and apply it down in one of the pages down here, just to show you that.
This is actually kind of interesting. If you drag a master page onto a thumbnail that's a different page size, watch what happens here. I'm going to make this one the iPad version; for instance; of a home screen design. It's going to ask you. It's going to say do you want to keep the current page size or use the master page size. Choose Use master. Come down here and take a look. You're going to see all it did was keep this master text frame that we're going to talk about soon, when we talk about text, I promise. I want to do this. Just make sure that you've got A-Phone applied to these two pages here, 2 and 3.
So I'm going to drag A-Phone down here. Do this, use master page size. Another way to do this, to apply a master page that is, you can actually click on a page and then opt + click, or Alt + click on a thumbnail for a master, to apply it. That's a fast way to apply a master page to a page. Anyway, we've got a lot of options out here, as far as working with masters. Saving time and ensuring consistency is the key when working on your web or app designs.
Using master pages in your projects is one of those keys to working smarter. With a few pages created, it's time to add some content you create next.
- Setting InDesign preferences
- Creating InDesign files
- Creating reusable artwork and formatting
- Creating a content library with CC Libraries
- Creating wireframe screens
- Setting up alternate layouts
- Creating a prototype
- Working with multistate objects
- Creating animations
- Exporting prototypes to interactive PDF and Publish Online