Join Justin Putney for an in-depth discussion in this video Creating links between mockups, part of UX Design Tools: Balsamiq Mockups.
In this chapter, we're going to take a look at adding links. You can point a link to a URL. Or it can be pointed to another mockup. In this case, we're going to take a look at pointing it to another mock up. So starting with the mock up we've been working from. I'm going to go up to File > New Clone of Current Mockup. I'm going to do a Save As. And in the Chapter 4, 04_01, Final folder, I'm going to call this mockup tours, because this is going to be of the Tours page. What I'm going to do is change the headline to say, Tours.
I'm going to double-click to exit the Symbol Edit mode. In that case, I was just editing that particular instance of the symbol. And double-click to exit that. Now, I'm going to double-click to edit the menu. And I want to remove this little indicator. In fact, I'm just going to cut it using Cmd+x. And I'm going to paste it next to Tours so that we have an indication that we're currently on the Tours page. And I'm going to hit Cmd+Return to exit that, and I'm just going to hit Cmd+s to save. I'm going to switch back to the initial markup.
And I really want this headline to say Resources. So I'm going to go ahead and edit that as well. And I'll hit Return. And double-click the exit out of editing the symbol instance, and we save that. So right now, we have two different pages. We have a Resources page and a Tours page, and I want these two linked together. If I were on the Tours page, if I clicked Resources, I want it to point back to the Resources mockup. And in the Resources mock-up, I switch over there and click on Tours.
I want that to point over to the tours page. So we'll set that up right now, and it's actually easier than you might even guess. I'm just going to select the menu and rather than having to double-click and add some kind of special code for the URL. All I have to do is go into the heads up display and click Show Link Inspector. So, mock ups is smart enough to recognize that everything that is on it's own line of text is an individual item. So, I can just point one of those items at another link.
And when I click the drop down menu. I get a list of other mockups that are open right now. So I'm going to select the Tours mockup for the Tours link. And I'll just go ahead and save this. And maybe, I'll switch over to the Tours mockup and do the same thing. I'll select the menu. But this time under resources I'm just going to select. The mockup mockup. And I'll hit Cmd+s to save. And now let's preview this in the presentation mode of Mockups.
That's in the upper right-hand corner, it's the little square. And when I click on that, I'm currently on the Tours page. And it's actually highlighting this link for me. This is more information than I'll see, say in a PDF, and when we look at that in a later video. But this just gives me an indication so it's very clear that there's something interactive there. So when I click on that, I'm over in the resources page now. And of course, we could change this to be more obvious, but the headline gives it away for us.
And the indicator in the menu. And I'll just make sure I can switch back to the tours mock up and there it is. So we have interactivity. We can use this to switch between pages. We could also duplicate our mockup and then add a light box, or a mobile dialogue, or some kind of alert, and have that type of interactivity. Have a different kind of application state. So that's how we do it using links. And in the next video, we'll take a look at another way to add links.
- Adding, aligning, and layering elements
- Adding and formatting placeholder text
- Building symbols
- Adding new control types using Mockups To Go
- Creating links and hot areas
- Making wireframes for tablets and smartphones
- Exporting mockups for review