Subscribe or Login to watch video

Login or Subscribe to watch video

11 - Production video - student views in Adobe XD


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hey there, this is our production video. What is a production video? It's where I need to make this stuff for this tutorial to carry on. You can either follow me, or skip it because we're not going to learn anything particularly new. You see some of the work flow that I go through so it can be interesting, or you can just skip on to the following video where we learn some new stuff.

All right, in this particular video, what we're doing is we're going to create this page, and connect that button so that jumps to this, create a cross 'x' button to go back into this. There's nothing really going on here because the client, in their brief has asked us not to work on Student view. They've already got Student view, they want us to Prototype the Trainer, or Instructor view. Let's get into the video, and start making it, or you can skip it, and I'll only be a tiny little bit offended. All right, go, Dan.

First up, when using the page I find this easy to hold 'Alt' and just drag this cross 'x'. You get the kind of duplicate, I love the pink boxes, the automatic spacing. I'm going to rename this, this is going to be 'Student View'. And I'm going to keep only a couple of pieces out here. I'm going to select all of these, so I want you gone, I don't want the button. I just want the text, and the close. And in here I've got some text, this is what the student sees. The front end of the platform. Remember, the client has asked us not to design this so we're just kind of leaving it in here, so that the button has somewhere to go. And what I might do is, because it's 16-- that's the final size. And I'm going to put a cross 'x' here.

What I might do is actually turn this into a bigger button. As in, I'm ungrouping it, and I am selecting on it. Ungrouping is not working. It is totally working. I'm going to put the border back on it and try and make it into a perfect circle. Easiest way is to link these-- not to link them-- is just to make sure that they're the same height and width. All right. Select both of them and horizontally aligned, vertically aligned, group them. Cool. So that's all that's going to be on this page. Not much going on. I'm going to make sure it's in the center. Now let's rig it up, so we're going to go to 'Prototype'. I am going to do a couple of things. It's that, when this button is clicked, this 'Show Me', I'm going to group it with the blue box. And you can group while you're in Prototype, or Design which is kind of cool. And when you click that, you're going to go to this page here.

And what are we going to do? 'Dissolve', we're going to continue on with that. And when I click on this 'x' button here I'm going to get them to go back to probably back to the Home Page, or that preview option. Probably Home Page, I'll test this to make sure. Let's do that quick test to see where we are at. So you go on to click on 'Preview', and you can see what the student sees. And this is what the student sees, close it down, back to the Home Page. I think that's probably the best way to do it. And that's why I like having Prototype open and working as you're developing, not waiting till the end.

All right, so that's going to be it for this one, let's close this one down. Let's go to 'Full view'. 'Command 0', or 'Control 0' on a PC. All right, let's save it, and on to the next video.

ALL ACCESS: $19.95 per Month + Cancel anytime