Subscribe or Login to watch video

Login or Subscribe to watch video

16 - Production Video - Sign up screen & Dashboard


Questions & Comments

- 5 months ago

Hi BYOL - QUESTION: in prototype. The color code, arrows in Grey and Blue. What're those implying? Thx

- 5 months ago

Q #2 - may I...
Wonder, what's the "preserved scroll position" function for? Thx X2

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hey there, welcome to this production video. Before you skip along, there's one thing you should check out in this video. And it's straight after my little introduction. And it's basically adding this kind of sliding thing that you need to know. The rest of it though, we're going to build all these pages here for our app. And yes, nothing super exciting. So you can skip after you learn how to do this thing. All right, let's get in and do it.

So I want to go through, and build my Login page. I'm going to steal most of it from one of these templates. Here's the Sign Up, up here. And I'm going to pick one of these, and go 'Command 3' to zoom right in. Let's get close. So which one do I want? I'll use this one here. It's going to steal a whole actual page, because it is an iPhone size. That's what all the templates are. So I'm going to click the word 'Sign Up', and I click 'Copy'. Jump back to my one, I'm going to paste it. I'm actually going to delete him, I'll take the name. And then you, good bye. And I'll just use this one here. That's one of the nice things, if I keep on using the blue colors rather than going off and picking custom colors, you have to go and update all the colors and stuff. There we go.

All right, so the thing you've hung around for, it is when I preview this so I've got this guy here, I'm going to go to 'Prototype' and I'm going to make sure this is set to Home. It's not by default. So you can set any of these to Home. So when you hit Preview, it goes straight to this one. So I'm going to hit 'Play'. And I'm trying to scroll up and down, but it just won't let me. So that's a bit of an issue. If I click on it, you can see, it's actually got lots of stuff in here. So to show all that stuff I'm going to click on the name, I'm going to go to Design, change scrolling to 'Vertical'. This is the first bit. And the Viewport is set to '667' which is the exact height of this iPhone here. I'm going to click on him, he is 667 as well. And what I also need to do is grab the Artboard to make it a bit longer.

So you set the Viewport. And then you make this as long as you need. So this can go as long as you like, you can see, that's the Viewport there, the dotted line. We had it automatically on our Web version, now we have it on our Mobile version. It just means, if I preview, it's going to preview to this, but I can scroll down now. So allow vertical scrolling, pick the right height. And make sure your Artboard is long enough to see everything. And probably what you want to do is just keep using this one to duplicate when you are making another slide from now on, because if you duplicate this one again you go back to having to do it over and over. Now you can skip along because I'm not going to do anything particularly exciting.

I'm going to go through and change this to 'Instructor'. I can't spell it. I can't. This text, I don't actually want any more. So I'm going to... that'll be good. So the Sign Up page. This is all good as a perfect Sign Up page. I have a Sign Up page, and a Login page, I'm just going to duplicate this out. This one's going to be my Sign Up. And in here, I'm just going to go through and change this option in here. That little bar there is kind of used to show where you're at. So you can toggle between the two. And this one, I don't need. All I'm going to need for login is email address and password. So I'm going to-- the person who made this is still made of-- using our cool repeat grid. But I'm going to ungroup it, so that I can click on parts of it. I'm going to ungroup, and say, you, I don't want. I want you. I don't need any personal information. So, gone. But I do need this little box here, and I'll set that at the bottom. And actually what I'll do is I'll click the edge. And I know it needs to be 77, what was it? I know, 667, there it is there. So I'm going to click on this guy, and your height now is going to be 667. Perfect.

I'm going to need you at the bottom. Nice. All right, so I've got my login screen, and my Sign Up screen. So I'm going to have to rig these together now. So, let's do that prototype. So I've got my-- If I do Select All, it kind of selects everything on the document and shows you all the wires. So it kind of works out what you haven't done yet. So what I'm going to do is, this Next button down here, you're going to go to my Sign Up screen. And I'll do a Push Right. I never go to double check these ones to remember which-- Push Left or Push Right, what it looks like. So it gets to here, and then I want you to be able to click the Login button. I should make this bigger, I'm not. I got to go to this screen here. And this one here is going to go back this way.

So this one's going to push left, I'm pretty sure, I'll have to test it. Let's give it a test. So I'm starting at the login screen, click on 'Login'. Pushes that way, pushes the other way. Feels backwards, doesn't it? So actually what I'll do is, this one now, it's to be Push Left, and now, that one needs to be Push Right. Let's give a test. That feels better. Awesome! So that's why you test while you're mocking up all the way through. I've got some scrolling going on, that one does need any scrolling. So let's get on to the last bit. And that is going to be my Screen.

So what I'm going to do is grab this one. Why? Because it's long. Because I know my next one needs to be long. And it's got all the Viewport sorted out. Basically I want to select everything of this. And say good bye to you. Nice! Nice and clean, back to design. Now we're going to be creating our Teacher Dashboard and our kind of app version. That's the instructor dashboard actually, 'Instructor Dashboard'. Select it. One of these. And I'm going to go off and grab my dashboard. Cool! I'm going to use it down here. Paste him in. And the nice thing about this repeatable thing, I can go, you, and just pull these guys off. And yes, got my Instructor Dashboard ready to go. Ugly version. I want to pretty it up so much.

Last thing I might do is, I'm going to do like a Settings page. So you can go through to give them a bit of indication of what the app's going to do. So I'm trying to find Strappy Lines. It's the only top left, is where all the kind of universal ones are. So I'm going to grab you guys. Copy. Clip it over. I'll put you in here. They are hard to click, I do not disagree. So when it's clicked, it's going to jump to Instructor. Actually it's just going to be Settings. Nothing exciting. And I want the people to be able to do a couple of things. Let's just do-- what can you do on this Settings page? I might draw a button, I shouldn’t, can't help myself. And in here I'll do some centered text, and this one's going to be-- you can be able to reorder these things. And repeat grid. So we're going to have some settings, you can re-order them. You can have a favorite. I think this might be breaking the rules in terms of adding too much details.

Where am I getting these from? Yes, I thought of these earlier. So that's all my settings page needs to have. I'm going to grab you, double click the edge. And actually my Viewport doesn't need to be that big. So what I'm going to do is I'm going to click on you and I'm going to make the height 667. And I'm going scrolling. I'm going to need a back button. Grab this guy. Give me a back button, copy. Over here, paste, choosing the right place, just the wrong color. I need that guy there as well, just a bit of a weird color. This will fit the rest of it. Let's rig it up. So I'm going to say, when this button is clicked, you go to here. Same with this button, and that is Push Right, and it's all correct. You are going to jump all the way over here as well. So when you sign up or log in, you end up at this page. And when you click on the settings here - you can never click on them - you go to this page, and then when you want to go back you go back to this page. Awesome! Let's give it a test.

I'll be testing on my phone, but you can't see that. I don't want to set up all the camera up again. So, we sign up. Great! You're welcome to the dashboard. It’s pushing the wrong way. Then you go to this one. We're going to have to play around with this Push Left, Push Right. Actually I want to test that again. So this one here, I click this one. And that one's wrong. The arrow should push the other way, I feel. You can leave that up there. So I'm going to say, you, my friend are going to push left. The same with you. You're going to push left. Let's give it a go. To here. That feels better. Dashboard though, that pops out, that's good. And this one needs to go the other way. Just a bit weird, I can't do it. I need to see it being actually activated to know which is pushed left and pushed right, I don't know why. So now, back that way, that way. Follow the arrows, Dan. Awesome! Lovely!

That is going to be it for this production video. It's a long one. What did we learn? Work flow. We'll call it work flow. So that is it for the video. Let's skip on to the next one. We'll get into sending out for comments. We're going to send it to our clients to check. All right, see you in the next video.

ALL ACCESS: $19.95 per Month + Cancel anytime