2.4 Create the Filled-In Form
We’ve reached the stage where we need to create the filled-in version of the form.
1.Introduction4 lessons, 14:32
2.Creating a Mock-Up in Adobe Photoshop5 lessons, 39:54
3.Building the Interactive Prototype With InVision5 lessons, 46:22
4.Sharing and Gathering Design Feedback4 lessons, 26:57
5.Conclusion1 lesson, 01:41
2.4 Create the Filled-In Form
Hey everyone, welcome back. We're gonna wrap up this design here by working on the filled in version of this form. This is because we need to mock up the actual user interaction for this subscription form. And in order to do that, we need to create what that would look like in Photoshop really quickly. So there's only two main elements that we need to change in this form to mimic that interactivity. The first part is to change out these fields to have an actual test case information. So a first name and an email address. And then we are going to create a hover state for our submission form button so that we change the color of that. And we will essentially save that out in two different versions, one filling in the form and then hovering over the button, but we can do this all at once in this next stop. So again, I'm gonna zoom in here just so you can see this a little bit better. And so I'm going to just unselect everything and we are going to create our changes. So the first thing that's easiest to do is to duplicate our first name and our email address. So again, clicking on one, holding down Shift, clicking on the other one. I am just going to drag this down to create some copies. And I'm going to immediately take them out of the unfilled version just to avoid confusion. And then I'm going to create a duplicate of our Submit button and we're gonna go ahead and call this Hover. So I'm gonna say submit-button-hover, just so we know that that's going to eventually be the hover state of our email button. So we need to leave that as it is though because if we drag it out of the group, then we are gonna cover up everything else and we don't wanna do that. So the hover button's gonna stay where it is. These two fields are gonna come out just so we can easily switch between the two. So the first thing that we need to do is change this to something other than First Name and something other than Email. So what I'm going to do is I'm going to turn these off just so that we don't see the effect on top of each other. And then we could just say, first name Sarah. Okay. Email address, firstname.lastname@example.org. Okay, just to test here to see what this looks like. And then what I can do is Shift+Click both of those, hit Ctrl+G. And this is going to say Form Filled, something like that. And then what happens is that we can easily turn that off and we can easily turn these back on. Now if you really wanna see the effect of this without having to dive into this, you could take your first name and email out of that entirely and have it in another group. But it's at the top so it's easy to turn those on and off as we need to. So then the final thing that we need to do is change the button over here to a different color. So I'm gonna double click this and I'm going to go to a nice teal color. So we have grey, teal and green as our main colors, here. And you can see that when we hover over, it still looks really nice. All the colors go really well together. So we're going to do that. So this is the hover state. So ideally what would happen if you want to just mimic some user interaction before even going into your prototype app, is we can go ahead and unsee these. Hide your email and first name. Bring up your form filled and then you have your hover checked. So we filled it in and now we're hovering over. This is what this looks like. So you can kind of play with this just to see if you like that, again, before even saving anything out and doing anything more with it. It gives you a really cool effect. And then when you wanna go back to the other you just turn these off. And you can turn your layers on and off based on what you wanna see. And then you can go ahead and close this up. And then again, it's really easy to see exactly what goes where, because we've grouped everything and kept it really nice and clean. So the next step is to create the confirmation page. So this is a page completely separate from the form that's going to say thank you for joining our list. So it's that confirmation page after they hit join the list. So we're gonna create that in the next lesson.