Prototyping & adding interactivity to Adobe XD

Hi there, welcome to this tutorial where we're going to start Prototyping, and adding a bit of interaction. You can see these wires hanging around here. What happens is, when I hit 'Play' I can hit 'Preview', then close it down, and go back. So that's going to add a little bit of interaction so that we can start moving around these Artboards and start doing some testing while we're working. All right, let's get started. 

To start Prototyping, and connecting up our Wireframe, so we get some interaction, we need to have more than one page. We've got an Artboard called Home Page. You got a couple of ways of making a new one. You can click on this, and our trick that we've been using so far in this course, we held down 'Option' key on a Mac, or 'Alt' key on a PC, and then clicked the word 'Home Page'. And you get to drag it across, and you get a new one. But I don't want all these elements so that's not what I'm going to do, I'm going to to 'undo'. You can go to your Layers panel, and just click this guy. Right click him and say 'duplicate', and you'll have two of them. I want a new page. To do that you can grab the Artboard tool, and just click once over here. You could go and resize it if you like. If you need a different kind of document you can see down here, there's the Apple ones there's Google, there's Microsoft, Web. So you can click on any of these. Say I need an iPhone. And that will add them to it, so that's easy, adding pages. 

Before we connect them up, we just need to add something to this page so there's something we can connect to. So we're going to rename the Artboard, and this one's going to be our 'Preview Option' page. So when people click on this little icon here - I'm going to zoom in - when they click on this, they get to decide on what kind of preview, whether they see the student side, or the teacher side. So first up, I'm going to borrow some bits, I'm going to grab you. I'll grab you as well, and that. Anything else I want? I'll grab the text, and review. Copy them, click on this page, paste them, they come along for the ride. So that's kind of bits that I want. I'm going to resize this to be something like this, in the middle. I'm going to use these two. I'm holding 'Shift' to grab them both. And looking at my kind of Wireframe, my hand drawn one, I've got two of these, I want this one to say 'Show Me'. Actually I want them both to say 'Show Me'. And it's this text here. I'll use that kind of 16 pt for the slightly larger text. And in here, I want to say 'What your student sees'. And that guy goes there, I'll right align them so that when I duplicate him, and go down here, and say 'What you see as the Instructor'. 

I'm going to be in to see-- I'm just kind of using this language to get started. It goes to be user testing that allows me to work out whether it actually makes any sense. I feel like it might not. I'm pretty sure the user testing is going to come back, and go "We get confused here." But it's our first start. The other thing is I want a cross, I could use the 'x' on my keyboard, but that generally doesn't look that nice. So I'm going to go through in here and find a cross, this one there. It's a handy little document, this guy, isn't it? So I'm going to click on him, ungroup him, I want you. And I'm going to paste him here. It's going to go over here, and you can stay up there. So now we're going to rig this up as a prototype. I've got two pages, and I want to be able to prototype it, and connect it. Why do we do it now when we're not finished with our Wireframe? I find that's a really weird way of doing it. 

What I need to do while I'm developing this is I need to design it and be testing it both on Web and phone as I'm working rather than waiting till the end. So it's kind of, you work between designing and prototyping quite a bit. So we're in design mode, and you can see, we got our design options. If you got a prototype, this is the way where we kind of add interactivity. What I'd like to do, is first of all-- that's my Home page. So I'll make clear that's kind of home base. It will be whatever the preview starts at. So I'm in Prototype, and you'll notice that lot of the options change, we're missing our little Properties panel here, but what we can do is, what I want to do is, when this preview button is clicked, not the text, this text is by itself, or the box, I'm actually going to select them both. Watch this, if I click off in the background, and then click on, 'Shift' click both of these, I can group them. I'm using the shortcut, but the long way is there. And with them both selected, there's this option that pops out. That is how we connect Artboards, I'm going to zoom out a little bit. I'm going to click, hold, and drag it. That means, when that button's clicked, it's going to go this page here. 

Now, you get some options. By default, it is going to Dissolve. This is going to be like a fade going across. And there's a bit of an Ease, which just makes it look nice in terms of the Motion. And this is how long it takes. The cool thing about it is, whoever did these in XD they're all pretty sweet to start with, and I don't really need to change them. So let's test this thing and figure out what we need to do next. To test it we use this little Play button up here which says 'Desktop Preview'. Because we're previewing a web page it's best to preview actually on your laptop. If you were designing an app you'd go straight to Mobile for testing. We'll talk about Mobile testing a little bit later on when we start building the app version of this. We're going to hit 'Play' now. And this is like a little window that opens up. And it allows us to do our testing. 

So now we're going to test it, we need to click on 'Preview'. And you see, it did that little cross dissolve fade thing. You might not like that, you can change it, and turn it off. And now, I can't click on anything. So we're kind of stuck, so I'm going to close down the preview. In here, I need to do some other work, so that works. You can see, that's connected. Another way of getting to there is this thing here which says Example. I'm going to use that as my button to get across but one of the problems is that, that text is quite small. So it would be really common here in XD if you've got a button here-- I'm going to make a fake little button. So I'm going to go back to Design. I'm just going to make a bigger area for this to hit. So I'm going to turn off the border. Give it the same blue color so it looks the same as the background. And what I want to do is, make sure this, the text, I'm going to go bring to front. Grab my rectangle, it's a little hard to see, I guess, but I've 'Shift' clicked at them both, then I'm going to group them. That means that just the clickable area is more instead of just this little text which can be hard to click on. 

I'm going to make it nice and big especially when we get down to Mobile versions of prototypes. So back to Prototype. I'm going to zoom out a little bit. I want this guy to go to the same one. Doesn't really matter where you click it in, it all jumps to the right point. And do we want to Dissolve? We'll just test and show you some of the other ones. We could do 'Slide Right', you can decide which you want to use. What I also wanted to do, is this little cross 'x' button. I want it to, when clicked, to go back to this page here. So I'm going to have to do the same trick. So back to design, grab this tool. Draw out something that's easier to hit. Turn off the border. I'm going to move-- it's easier to move this to the front then it is, the other one to the back. So get behind this box, so bring him to the front. Find my box, and there you are. A little bit hard, I'm using my arrow key just to tap it around. Select them both. Holding 'Shift' to click both of them. Group them, and now I can go to Prototype. 

What you might find is, that dragging, dropping is cool, so you can zoom out and then go and drag it here, and that works fine but sometimes it's easier actually-- or I want to undo that, undo's not working, the normal typical undo, when you're in Prototype mode. What you can do-- say you want to break that, just click, and drag it to no man's land. That will kind of disconnect it. So I find, often when I'm in this close I don't want to have to zoom out to try and find the Artboard. You just click on this, and say, actually I wanted to go to—

In this case, previous Artboard will work, or a Home Page. I'm going to get it to go back to the Home Page and you'll see it jumps out already. Perfect. Either way you want to do it. So let's go and preview this now. So let's go to 'Play'. And, I'm figuring out we can click on this. Cross it out. We've got a little slide left, which is a weird example. I don't like that sliding, it works, but I get confused. There's a special time and a place, mainly through phones where this slide works, not through websites because no websites do that slide thing, which is just weird. So I'm going to go turn it off. 

The other thing is that, this is a separate window, right? Now I'm working on my laptop at the moment for this training course, but what I do when I'm working normally is that I've got a big 4K monitor that I work from, and I have my laptop on the side of it. So like working from two monitors. What I normally do is I've got two monitors. I've got this laptop, and I've got a big monitor that I work from mainly. So I'll have them both open next to each other, and I'll have this panel on one of them, normally my laptop, and I'll be working on this part in my main big monitor. The cool thing about it is that it's a live update so as you move stuff in here, watch this, can you see? As I'm moving it, this thing updates, so I have this open 100% of the time. So I could be making adjustments, seeing what it looks like at 100% and be playing around with the interactions through Prototype. So I don't have to keep hitting that Play button. Anyway, I have to close it down, and open it back up at the moment because I'm just working on a laptop. And what I'd like to do is, 'Example' here, I don't like the Slide Right. I'm just going to go to 'Dissolve'. Probably, it just needs a jump, but Dissolve looks nice. I'm clicking on this little dot here, you can click on either side. And I'm going to go to 'Dissolve' as well. Awesome! 

So that's the basics for prototyping. We're going to go through and build more pages and prototype more as we go along, but that's an introduction to it.