Production video – student views – UI/UX & Web Design using Adobe XD [11/42]

Hey there, my name is Dan Scott. This is one video from
my larger Adobe XD course… which you can check out on You can also go in there to download
the free exercise files… and the free cheat sheet if you like. All right, enjoy the video. 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. And 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. Hey there, please ‘like’ the video. Consider subscribing to
my YouTube channel as well. If you want the full course for Adobe XD… check out my website That’s it. Bye now.

Leave a Reply

Your email address will not be published. Required fields are marked *