Using masters within Axure is a great way to manage your consistent navigation throughout your prototype. We talk about how to create and use masters in your prototypes.
- [Instructor] Now we're going to cover Masters. Masters are collections of widgets that you can maintain in a single source location, and then reuse throughout your file. Common elements that are created as Masters, are usually things like headers, footers, and navigation. Any edits that you make to a Master in one location, will be made across the board. So, here we have, I've already set up, our bottom navigation for our Android app, and the top level navigation that you normally see in any Android application. Now we're going to go ahead and piece together our Masters, so by the end we should be able to look at and have a preview of how our navigation will work.
Alright, so let's get started. Let's go ahead and select this Top Navigation here, and what we're going to do is Right-click, Convert To Master. And we'll call this our Topheader. And let's Cap Locks that H. And we want to Lock to Master Location. That just keeps it in the same location no matter what page we put it on. And then hit Continue. And then we also want to keep this as a Master too, because we want to make sure that it's in the same location on every single page.
So again, Right-click, Convert To Master, Lock to Master Location, and we'll call this Bottom. Alright, now let's go ahead and create our tray. So, what we're going to do is, let's go ahead and go to our Default Libraries, and just pull out a box. And pull out a second box. And now that we have two boxes, we're going to put our two boxes on top of each other, and one's going to act as the top portion of our tray, where it reveals who the user is.
So let's pull in our circle, and we're going to change the style on this, so that it's white. And we're going to change the border to that same color that we're using, just so that it matches. And then let's go ahead and put this, make it about 45, and if you can't do it with your mouse, like a lot of times it's just easier to go up and change the width up here. We can also choose this Maintain Aspect Ratio, so go ahead and click in there, and do 45, and voila, we have a 45 diameter circle.
Alright, let's go ahead and grab a Header Three. And we'll change the header three text color to white. So go down to our Fonts Section, and change the color to white. And we'll just put some random name in there, you can put in whatever you want, I'm going to choose Jane Smith. And that's going to be who our user is. So let's change this bottom rectangle, and make it a little longer, so that it extends to the end of our app window here.
And then let's go ahead and also make that white. And then we'll do the same thing that we did with the circle, and make our border the same color, so that it's that kind of brown. And now we have the beginnings of our tray. If you look closely, you may notice that our top rectangle here has a different border color than what we have below, so let's quickly change that as well. Perfect! Now, let's go ahead and add in our navigation.
So we'll bring in a few Header Threes. And one will be for Home, one will be for Book Attractions. So let's just name this first one Home, the next one is Book a Room, and the last and final of course is Attractions. Alright, now let's go ahead and make sure they're evenly spaced, so select them all, and Distribute, on the Vertical Axis, there we go.
And let's go ahead and change the text color as well for this, so that it matches the rest of our design. We're going to use that same brownish color. Now we've got a tray. Excellent. So the next thing we want to do, is go ahead and set up the rest of our tray, so that the Home, Book a Room, and Attractions all link off two of the pages that we expect them to link off to. So go ahead and click Home, go to Properties, Create a Link, click Home, Book a Room, Create a Link, Book a Room, and of course the same thing with Attractions, Create a Link, Attractions, voila! Awesome.
So now, let's go ahead and select all of this, because we want to make this a Master as well, so we can try this, but sometimes this doesn't always work, as you can see. We didn't end up with, you know the click and drag to grab everything, it didn't pick up everything. So let's go ahead and hit the Shift key, and click on the rest of our image here, and we'll Group this. Now that we have our grouped items, let's go ahead and we're just going to move them temporarily off the page. So go ahead and Cut them.
Now we want to go ahead and Edit our Top Header Master. So Double-click inside of that. And then we're going to click on it, and create an on-click to open and close our tray. But before we can do that, we need to have our tray here, so let's go ahead and do Command + V, and the one thing we're also going to do, is we're going to take our top square here, and we're going to Create an On-click on this, so go ahead and Close it. Let's take our group, and go ahead and Drag it into our Location, that we're going to need it to be.
Now, let's Right-click, and Convert To Master, and we'll call it a Tray. And we want to lock to this Master location, because we always want it to go back to this location. So go ahead and click that, and hit Continue. Now the last thing we want to do is click Hidden. Now let's go back to our top header, and from here we're going to create the on-click slide in and slide out of our tray.
So double-click on On-Click, Toggle Visibility, our Group, the Tray here, Toggle, and we want it to slide in from the right, and slide out to the left. Go ahead and click Okay. Now you'll notice when we preview this, that it's not quite where we want it to be. Because see if we click inside the tray, it doesn't close. We have to click back up to the header. So, let's go ahead and add an extra level of navigation here.
And we'll double-click inside to our Master Tray, and we'll go ahead and we'll select this top square. And we'll create an On-Click here to Hide. And this Group. And we want it to slide left, and click Okay. So let's try that, to preview that again. Now I'm going to click, and it opens, we click and it closes. Now we have our navigation, if we click Book a Room, well, there's nothing there, but it goes to Book a Room, so voila, it's beautiful, it works.
That's how you create your navigation with Masters.
- Designing prototypes for mobile apps
- Creating wireframes to wearable apps
- Creating a hand-drawn look for your UX design
- Sending data between pages or views
- Building forms
- Creating documentation