Prototyping a simple interaction

- [Instructor] Now we get down to another fun part which is prototyping. So, what I want to do is I want to start linking these different buttons to the various screens. And how you do that is by going into the Prototype tab up here at the top. And you notice how some of the tools will go away, but there's more that you can do. So, as I zoom in on this homepage here, holding down the space bar to kind of pan around, I'm going to select this Peaks button right here, and what do I get for any element that I select is this little tab, otherwise known as a trigger.

So, what I can do is I can point this tab or trigger to this Peaks page right down here. Pointing to it gives me this elegant line, and it's going to say, hey, you're going to target the Peaks page, it's going to dissolve and ease out over 0.4 seconds, okay. I could even change this if I want to, to say 0.8. And that's what I'll do, just so it's an easier transition to see. And then what I can do is I can come over here to this logo right here. This logo, I want it to go back to the home screen. Click, drag, yes it's going to dissolve, yes it's going to keep my setting that I had for the last one, and it's going to target the homepage, okay.

So, we're going to see this in a second, I'm actually going to hook up this Hikers link as well, pointing to the Hikers page. It'll point to it, okay, right over here. And in this case, I'm just going to do a slide left. Okay, it's going to go slide left. Selecting this logo going back, we can do a slide right. So, essentially what I'm showing you are the different slides and pushes that you can do just as an example. Because we typically want to test this out. So, that's set up, slide right, done, looks great.

In fact, how do we know that it looks good, and also notice, look, look right up here. There's this little tab. This is the homepage, right? If I wanted to show the alt page first, I can click right there. Nothing's hooked up over there, so we'll go back to this one. So, that gives you the ability to show any layout that you want, at least initially. Alright, with that selected, our homepage and a couple buttons selected and set up, I can do a desktop preview. Here's my preview.

Going to the Peaks page, let's click, should have that nice dissolve. Yeah, dissolves into this Peaks page. Let's go back. Nice dissolve. Let's go to Hikers. See that Hikers, we have that sliding in from right to the left, and then we're going to have it go back by clicking on the logo. So, you can see how that looks. Awfully fun as I select Hikers. This is typically what you'll do all day long, just play with these different transitions. But what I ultimately want to do is I want to change this, and you can change any one of these.

As I take a look right over here, you can always click on this little trigger, and then you can change that to Dissolve, and then changing this one to Dissolve as well. And sure enough, we could make sure we remain consistent for all of our transitions. But really, my goal for this layout is to make sure everything links up appropriately. So, Hikers needs to go to the Hikers page, making sure that's set to Dissolve. And Peaks goes to the Peaks page just like that.

So, that's how you can easily prototype in Adobe XD. My next step will be to setup all the transitions and interactions for the other screens.