Join Brian Thurston Bralczyk for an in-depth discussion in this video Managing pages, part of Axure for UX Design.
Adding and moving pages around in the hierarchy aren't the only things you can do in the Sitemap pane. You can also rename pages, duplicate them, and organize them into folders. And there's also a great search feature for pages that comes in handy when you start to build larger projects. Now, we saw we could rename a page as soon as it's created like this. But you aren't stuck with that name. You can also rename a page by giving it a slow double click until you see the text highlight and indicate that you can type over it.
Let's go back and give our pages less generic names. If you'd like to follow along with my example project in this course, we're going to be setting up pages for the website of the San Angelico Museum of Contemporary Art or SAMOCA. Let's rename these first two pages as Collections and About Us. Now, Axure also has some great contextual menus built-in throughout the application. These are the menus you get when you right-click on something, or if you're on a Mac with a trackpad, that's Ctrl+click.
So, in addition to renaming things the way we just saw, we can right-click on the name of one of our pages and choose Rename from the drop-down. And let's rename this last one Ask Us, which will eventually be our contact form. And you'll notice that Rename isn't the only option we get in the contextual menu. There's a submenu here for Add, and you can be very specific about where you want the new page to appear. You could create a sibling page before or after. Or you can specify you want to create a Child Page, which will appear nested underneath the page you right clicked on.
Another option here under our contextual menu is to duplicate something. And we can either duplicate a single page, in this case, it would duplicate just the home page, or we could choose to duplicate a branch. And that will duplicate the home page plus all of the child pages underneath it. So, you see here, we get Copy of Home, and underneath that is a copy of every single page that was nested underneath. Now, I'm going to right-click and choose Delete, because we don't need duplicates. And it will warn me in this case that, because there are child pages underneath, this delete action will delete not only Home, but all of the pages associated with it as children.
I'm going to go ahead and click Yes, and we're back to what I wanted. Now, duplicating pages right now isn't particularly helpful, because we don't have any content on those pages yet. But once a page is designed, it's a great way to quickly duplicate all of that content and any interactions you have on the page as a starting point for another similar page. Now, there's a just a couple more buttons here in the Sitemap pane I want to point out. One is this folder with a plus on it. And if I click on that, it creates a folder, and I can name it anything I want.
And from there we could drag any page we want into that folder. Just like we drug things underneath the home page to create our hierarchy. And really, it may not look that different than nesting those child pages under a parent page, but there is a key difference. A parent page is still a page where we can add content and interactions, but a folder is just a place to put your pages in as a means of organizing them up here on the Sitemap. It's super helpful when you start to get a large prototype with dozens or even hundreds of pages.
But again, you can't design or add any content to a folder, only to the pages inside of it. And the last icon at the top of our Sitemap is this search icon, and if I click it I get a search field. Let's go ahead and start typing s in the field, and you'll see it narrows the list of pages to those that contain those characters. Now, you'll also see their parent pages, but they are grayed out to indicate that they aren't part of the search results. Again, as we start to get lots and lots of pages in our prototype file, this can be super helpful.
That's all you really need to know about the Sitemap pane for now and how to create name and organize the pages in your actual prototype. I do have one more step I want to do before we start creating content on our pages and that's setting up our grid and layout guides. And in the next video, we'll do just that.
- Using and styling widgets
- Setting up interactions
- Creating hide/show options for content
- Creating an accordion menu
- Applying web fonts
- Using flow widgets
- Creating and placing masters
- Styling pages
- Adding form fields with widgets
- Building a slideshow with dynamic panels
- Setting up adaptive views