Prototyping & Interactivity
Hi there in this video, we are going to connect our pages up, you can see the little wires there, we're going to preview it and we're going to make our wireframe interactive. Watch this ready to click the button jumps to a different page. Go back to the home page. It's simple, but quite the milestone in our course. Let's go work out how to do prototyping now in XD. Alright. Time to add interactivity. We're gonna get this first this button to go first. So we're gonna click on the blue button, not the text in the middle. So I've got it selected and we're gonna switch to from design to prototype. Okay, so your toggle between these quite a bit when you're building wire frame and a mock up. So design does all the design stuff you can see over here changes. I can do fill and fonts and stuff, prototype gets quite simple what ends up happening in the big differences. See this little box zoom in a little bit so you can see it. Okay, this little tab appears, so no tab tab. This guy is really han...
dy. Click hold and drag so when they click this blue button, it's going to go to the start trial and you just drag it to the side. You can see it can go anywhere in here. So it goes blue sea, not blue blue straight here, let it go and you'll see it connects to whatever the middle of the outboard is. Usually it's a dive down here that now is connected. Let's just see what it does by default. So to preview that you click this little play button up here on it. The launch is this like a little preview window and because it's separate from XT, it's this kind of separate little window and if I click on it ready. Ah cool. Huh? Basic navigation. We're kind of trapped here now we can't get back. So we're going to close it down at the little red box to go back in our case. We're going to click on the logo. It's really common on the website and an app, if you click on the logo, you go back to home base. So whether it's selected, I can click hold and drag it and it goes back here. So we ignored this before. Okay, this little pop up little window, we're going to leave it all at the moment by default and have a look at a bit more in a second because I want to show you how to preview So and hit this little play button member play, we click on it, home button goes back play. That's fun. Okay. But this window, you can close it, reopen and close and reopen it if you are like me and you are working with more than one screen. Not everyone is and you don't have to, but I'll just quickly show you here on my phone what I do is my setup. So I've got a Macbook Pro, it's nice, it's portable but the screen is a little small, so I fixed that by plugging it into this big LG monitor, LG do some really cool four K monitors cheap cheap enough, like I think it was like 400 U. S. So it's not cheap but pretty cool. Anyway, so what you end up doing is remember we hit preview before? Okay. And it appears it appears here. Okay. And we kind of have to close it down to get back to X. D. So what I end up doing is clicking holding and dragging it over here so it just appears on this window. Cool. And I never close it down, just stays open. And the cool thing about that is if I zoom in, hang on, I need to put my hands down for shortcuts. Sorry? Sorry, sorry. Alright, I need a I need a I need a cameraman following me around, I don't have that. So I've zoomed in really close here. Okay, I'm gonna go even closer real close. So this you see the screen there, you see over there, it's still that it's normal size so you can be designing in here and doing things and actually just checking it over there to see whether it's the right size rather than going back to 100%. The other thing is it's a live preview so I'm gonna kind of see if you can see both of them to the giant blue button on the right. Okay. I'm not sure if it's on the left or right in the video and get confused but if I click and drag it, can you see it's dragging on both. Okay, so it's live preview which is super handy. The other thing I want to show you is something you can see. It's quite thin there. Okay, it's not and if I try and make it bigger, you might have done this already. You're like well it's going to make it bigger and it does this and the black bars up here. Why is it showing me black bars? It's because over here if I go back to design, view, it's back here in Camp Tasia. I've switched back from prototype to design and I'm gonna move across, click on my outboard homepage name. Okay, zoom out. Remember this viewpoint height. Okay, the view port height is what's determining that kind of what you see on that laptop. So what you can do is you can adjust this and that will give you a taller box on that laptop. The only problem with that is that we're kind of designing for the 768. So we want to just keep that little letterbox window so we can only see that much. So we know what's up kind of above the fold but that can be a bit painful when you're working. So we'll jump back to the cell phone now and I'll show you kind of how it works. Alright, see you back and what we're gonna do is go to prototype actually know being design and remember you can change it over here view ports but you can also just drag this line and this is what I'm gonna do. I'm gonna drag that line up and down up and down and watch this up and down. You can see so if you go too far it's gonna try and put too much into view ports and your laptop on my my laptop screen can't show it. I want to find just this happy medium of that. Okay so my view ports ended up being at 10 and it's good for previewing on this but I need to realize that remember the fold kind of finished up here so I just need to be conscious of that but I can't deal with the black box black bars. So I just adjust my view ports to help me show on my laptop how confusing was all of that. Hopefully it wasn't too bad. Let's jump back out now. Alright one quick little thing is loads of people ask me in different videos what monitor that is because I always talk about it so I'm just gonna show you here so that you can go off and google it and figure it out if you want to buy it. Um That's the top there is the L. G. 27 U. D. 88 W. I bet you can't buy that anymore. It's about a year old now And depending on when you're watching this video it could be like 20 years old but it'll have family members that you can buy so um don't go and buy it you don't have to but people email me all the time about that so I'm just trying to cut that question right out of there. Alright back to the video. Alright I apologize to look at some of that video just shot on the cell phone. It was average not a cameraman. I hope you found it useful though. And the last thing I want to kind of just quickly take off for this kind of basic prototyping. We're going to do like full on prototyping later on when we've got our kind of high high resolution version going or high fidelity. Okay so at the moment though we're just going to cover all the basics what we need for our wire frames. There's a couple of little things is if I click on this you got a prototype if you need to break the wire. Okay so say you're like oh I don't want to connect that anymore. There's two things you can do. The easiest is to click drag, drag, drag and just let go in no man's land and it will just kind of snap back to its home. Alright wait there for a second little course update um in the rest of this video I'm going to discuss making adjustments to this. Okay. And what you did in the past as you clicked on it and it all these kind of adjustments here popped out. They've changed XD now. So all of these exact same settings when you click on that button instead of being a pop up, What happens is you click on it okay? It appears all over here, same stuff. Just all the triggers and types are over here. I'm going to discuss what these do throughout the course. Okay. But you was confusing where it didn't pop out here anymore, but it's over here. It's not too big a jump and now, you know, all right back to the course. The other thing you can do, I've undone that is you can click on it and say I'd like it to go to this. So you're saying I wanted to win this button is tapped. I want to transition to this page. Okay. Which is our start trial and that's the name of the outboard up there, you're gonna say none. And that gets sort of it as well. The other thing you can do with that trick is let's say you're in here really close and like we've got two outboards and it's pretty easy but you'll have, you can, you can have hundreds of art boards. It's not uncommon what you can do instead of trying to drag to like the 100th art boards to like it's just too hard. You can click on this and say actually I don't want to drag anymore. Dragon is cool but choose an outboard. I'm going to click the start trial and you can see it's done the wire as we mount it's connected it instead of dragging. Its just another way of doing it. The other thing is you can kind of see it here. If I have black arrow, click in the background, I'm on prototype and I go, where's the Edit, select all. So command a on Mac. Control a on a pc to select all. You can get this kind of nice. You can see all the wires going all at once. You like have I done all the buttons. It's really easy to see in this case and the one you don't have done is start trial. I was playing around with that in the break. So you don't have this one. So that's the one we do need. So start trial goes to the same box. I'm gonna click hold and drag it and connect it. And this one here goes back when it's done. All right. That is the intro to prototyping and using their live preview on a different monitor. Let's jump into the next video