FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Create the Confirmation Page

Adding to our prototype, let’s now design the confirmation page which appears after hitting the submit button from the subscription form.

2.5 Create the Confirmation Page

Hi everyone. In this lesson, we're going to wrap up the entire design for our landing page by creating a confirmation page. This is an extra step just so that we can add in some final user interaction here. Ideally, we have the user landing on this page, entering in their first name, entering their email, hitting join the list, and then having a confirmation pop up, that's the final step. We're not gonna mimic what happens in their email because we're not designing that. But we do have control over the confirmation page that they see after joining. We don't want it to just fall off and they get the email. We want to have that immediate confirmation without them ever leaving the application. Okay? So that's what we're gonna mockup. So how do we do that? Well, first of all you'll notice one change. I drug the logo out of this. What used to be over here in this group, I took and dragged it out of the form so that it's by itself. The reason being is that when I hit this now, just that form goes away and everything else stays in place. We really want this effect now to create the confirmation page because what we're gonna do is take this group that we have here that says Form Unfilled. Not the filled in version that you don't see right now, but the unfilled version and we're just going to click, drag that down to this, create an immediate copy of it. Now we're going to make some changes. The reason we're doing this is because we want the same general format to take place. We don't want to take the user experience away from the general format that we have here with the colors and the layout. If we completely change the confirmation page, it's gonna be distracting and they're gonna think that they went somewhere else. We don't want that to happen. So we're gonna change as little as possible to create the confirmation. And that's why we just take a copy of what we've already done. So again I'm gonna zoom in here because we're just gonna focus on the center section for content. One thing we need to right away though is change this to confirmation page. Something like that, so that it's very easy to see. I'm gonna go ahead and drag this above. Make sure that you don't see a full rectangle, it's gonna drop it inside the other folder. But if you drag it to the top where you just see the one line, it'll place it above the other one. And so we want this at the very top just for organization flow. If I open this up, there are some things we can immediately get rid of, just to avoid having them in here and some confusion. We can get rid of email, first name, join the list. We can get rid of our hover button. We can get rid of our dividers. So I am just Shift-clicking all of them and dragging them to the trash. So we can have something like this. So now we just have our header and then a great place for our confirmation message, all right? So we can change this to thanks for joining. All right, and you can leave this lowercase if you want to. But if you wanna stick with the theme that we've already started, you can come over here and caps it. All right, thanks for joining. Now, when you actually get into the interactive part of this, meaning that you're creating this full on with code, we may wanna put in a tag here to say thanks for joining, first name. So we'd say thanks for joining, Sarah. But this is just a mock up, so for now, we're just gonna say thanks for joining, because that area is going to be differently filled in. All right, and so we have that and then the only other step is to create our confirmation message, so we can draw out a text box here and we don't want it to be white because we're not going to see it so I'm going to grab that dark text. You've successfully joined the acme, don't worry we're gonna change this, we're just typing it out. Joined the acme co email list. We send out weekly updates and goodies. All right, so we need to obviously change the formatting of this. So it's not going to be all caps, first of all, it does not need to be 40 points so let's go ahead and maybe cut that in half. And then we can format this to a separate line. We can add a little bit of line spacing here, just so it's a little cleaner. So let's go with like 36, yeah. All right. All right, so you've successfully joined the Acme co email list. We send out weekly updates and goodies. Stay up to date with our latest news and events online at All right? And is going to be in a link, so let's go ahead and grab a teal color again. Kind of to mimic the button that we have so our links are going to be that color, so you can mock that up, all right? So is highlighted and that shows that, that is a link. This calls for like a cool photo or something here just to dress this up, so we're going to go back to our assets here. And grab this photo, drag and drop that in and then we need to resize this. What I'm gonna do here is create like a cool banner effect to fill this in. So I'm actually going to fill this in here all the way to the end, and then we're going to move that up and then I'm going to rasterize this layer. This is going to be a destructive format to do this. If you want to do this in a non-destructive format, just go and hit layer mask and then you can sort of X out certain elements here by filling it with black. See? We actually though need to make sure that our feather now from what we did earlier is back to zero before we do that. So let's try selecting that again. So, again, I'm just selecting this with the layer mask and you can hit Cmd or Ctrl+Delete+Backspace and it removes that little elements from our image. This is a non-destructive way to do that. So that if you ever needed to change anything, you could bring it back. So you can see here that I'm actually cropping this in. And I'm gonna bring the opacity down a little bit just so I can see where that line is that we need to crop down to. So we can select straight to that line and then there we go. So then if we just again Ctrl or Cmd+Backspace+Delete, this gives us something like this. And then you can bring this all the way back up to 100% if you want to. So it just drops in an image and you've done it in a nondestructive way, meaning that we can adjust that layer mask if we want to later on, and crop that a little bit differently if we want to. So that just sort of gives us something cool. For our overall format here. Now what I can do, because we end with white is actually with this form container right here that I just deleted and then you saw the item underneath it. But I'm gonna add a drop shadow effect. This is just going to kinda create a nicer separation. Again, we're gonna bring this down. Let me set that to Linear Burn. And then let's pick up the color from there, even if it's not that different. We want something like that. And then let's scale it so we get that. Now if it's a little too much again, and go ahead and drop that opacity down. And so we get that. And then turn it on and off. It's just a slight boost to that. And I actually like that, so I'm gonna right-click Copy Layer Style, all right? And then we're gonna close up the confirmation page here. And then I'm going to go to the unfilled form and go down to our Original Container and add that drop shadow as well. That way, it's in both places. And to see the effect, we can turn off the confirmation page and you can see the effect on the page. So let's zoom out here so we can see the full effect of what we just did. This is what it looks like when the form is not filled in, just straight when we land on the page. If we turn off these and turn that on, this is what it looks like when the form is filled in. This is what it looks like when we hover over the submit button with our mouse. If we turn off both of these and turn on the Confirmation Page, this is what we see after we've successfully submitted our request to join the email list. So all in all, we have a nice step here. Again, we've mocked this up right in Photoshop, we get a good sense of what's going on. But now it's time to take this a step further and really create some interactivity for other people besides just ourselves, so we can see this in action. Before we do that though, we need to prep our file for InVision, and design file sync specifically for InVision. We're gonna do that in the next lesson.

Back to the top