FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Create the Sign-Up Form

Hi everyone. Welcome back. In this lesson, we are going to continue building our landing page, this time focusing on filling in the form content here. We've created a great framework so now it's time to fill in the details and then also work on our submit button. So let's get started. We can see over here that we are still working in our Form Unfilled. We have all of the items for this form so if we turn it on and off, we see our background and we can see our unfilled form. This is going to be, again, so handy later on. So let's continue here. I'm actually going to zoom in slightly just so that we can see this a little bit better, since we are focusing on this area in particular. So we're gonna work from the top down here. And that means that we need to draw in our header component. So grabbing the text tool, we're gonna go ahead and do that. And this is just going to say BE IN THE KNOW. We're going to continue using our open sans semi bold font, here. But we can make this considerably larger. So selecting it and coming up here can make them, we can make this really large. Let's try 50. All right. Just so that it doesn't fill it all the way end to end, but we really want this to pop off. The other thing is, is we don't want it to compete with our logo so if it's looking about the same size, go ahead and drop it about 10 points down to 40. And then that just creates a visual hierarchy that's a little bit more pleasing to the eye. The other cool thing is our logo is all low, undercase, and so this is uppercase. So, again it creates a visual interest here. We can go ahead and leave it as the title for now. And then what I'm going to do is drag out a line. And we are going to create our form fields. Now notice here that we have a very clean and very modern look. As such, we don't really need the form field that you would be familiar with seeing. We are gonna create our own and that's totally fine. In the end, if you take this all the way to creating it into a functional page, that's all styled. So it's totally okay to do it this way. So I am going to take a line tool here. And let's go ahead and set this to a light grey for the stroke and three point is fine for now. We'll see how that goes, and then I am going to hold down Shift. Click at the end, and drag all the way across until we see that guide. And if you don't see the guide because you have an older version of Photoshop, just drag it all the way to the end. Drop that. And then you can see that in place and that is our first form field. We only need that first form field because the button that we create is going to create a line for us. But if you need to, go ahead and say form-divider. Or something like that. And then with the Selection tool, we're gonna hold down Alt+Shift. Just create a duplicate line. So this is our first field. This is our second field. And then that leaves us room for a button below. All right? So what we can do now, instead of recreating the wheel, is come back down to our form-header and duplicate that for our submit button. So holding down Alt+Shift with that layer selected, we're gonna drag that right down to the bottom line that we just created. You can see we have a little bit of space here. So with the container, go ahead and hit Ctrl+T, or Cmd+T. And then we're going to move up like that, just to close that off. All right, coming up here to the header copy, we need to move that up just to keep things nice and in order. And then we need to say submit button, something like that. And then what we can do is change the color of that by double clicking the layer. And we're gonna go for something that's a nice sort of lime-ish green but not over the top lime green. So like a darker version of that. Okay so we get something like that. And if I zoom out here, you can see that we're picking a color similar to that but it's just a hair darker than those icons. And the green really pops off of the gray, it's a nice clean look as well, so it really helps with that. If I zoom back in here, all right. So the only other thing we have left to do is fill in the fields and then label our Submit button. So grabbing the Text tool, I'm going to draw out first name, and we can't see that so let's go ahead and make that this gray color of the headline. And then we can make this a lot smaller, to about 14. I'm going to left-align that. If you can't see it, go ahead and bump it up even more to about 18. And then, we don't need to bold this. So I'm gonna use regular text for that. So that's the first name and then the next Submit field is going to be the email address. So holding down Alt+Shift again, line that up and then this is Email. Okay, so that is our unfilled version. What you would see, you would see first name and you would see email. And these are actual fields that you would click into and fill that information in. Now we're gonna go to BE IN THE KNOW. And we are gonna hold down Alt+Shift and copy that down. And we can't see that so we need to bring this all the way to the top so it's above our Submit button. And this is going to say JOIN THE LIST, all right? And I'm going to make this a little bit smaller than our header because again, that creates a nice visual interest of hierarchy between our logo, our header and then our submit button. And if I zoom out here, you can see what that looks like, and things are very easy to scan because of this. And if you imagine this on a mobile device, you would get the same sort of idea here, where It's gonna stand out very nicely and fill that screen. So nobody's gonna have to be struggling to see anything. That is the key thing to remember. So we're gonna hit a quick Cmd+S, or Ctrl+S, to save our work, and now we have our filled in form ready to go. One thing I'm going to do, just for cleanup purposes, is I am going to create another folder and call this footer. I actually want to put this content in that, so that it's separate from the form. I like it when the form and everything is all together so we can just Shift and click all of this down at the bottom. And then we can click and drag this all the way up and drop it into our footer, close these up. And then for hierarchy purposes I'm going to drop the footer in. That way, you have the footer separate from the form, all right? That just keeps things cleaner. Is it necessary? Not really, but if you're gonna send this off to a developer, you want to make it really easy for them so that's gonna help them know where the footer is, where the background is, and what our form is consistent of. In the next lesson, we are going to tweak the form so that we have the filled in version. Remember, you're prototyping here so you need to prototype all possible scenarios for this form because that's what we're gonna export out into InVision later on.

Back to the top