Designing a form for your website

In this video we’re going to look at how to style a form.

So forms are essentially just a group of rectangles. In this case we’re going to use the rectangle tool, and build a fill of white.

Now the big thing to check with strokes is that by default they’re set to points, which is more of a printing term. What we want to do is 1 pixel, ok, or 2 pixels or 3 pixels. You can just type it in there over the top of whatever is in there, ok. I’m going to draw up my rectangle, now I’m going to turn on my guides to make sure that they’re within everything, ok, so I’m going to have it going from this outer guide, all the way across to about the middle. I’m going to turn my guides off, and take a look and see what I think of the edges here. So you can see here it’s kind of got a dark grey edge with a white centre. Do I like it? Yea, it’s alright, so I’m going add some text to it. I’m going to grab the type tool, now rememberI’m not going to click inside this, because it’s going to turn this rectangle into a box, so it’s not really what I want. What I want to do is click off down here, and this one is going to be my name. ok. I’ll select it all, and I’m going to make it Roboto, and I’m going to make it Robot light. I’ll make it a kind of dark grey colour here . I’ll go back to my move tool.

What size should he be? He’s a bit big, so I’m going to turn it down to 20, ok, and just have it sitting in about there. Now grids back on - I’m going to select both the name and the rectangle. Actually this is going to be my form name in lower case - form name ok, and I want to select both of these, and I’m going to hold down my alt key and my option key, and hold and drag it down. I’m going to give myself 3 of those, ok and this one is going to be name, this one is going to be email, email, and this one here is going to be phone number. I’m going to get then all to line up on the left hand side, so I’m going to have name, sorry, phone, email, and name selected and I’m going to go back to my move tool, and then I can use this one here, which is going to align left edges. They should all line up. Great. I’m going to do one in the box ok.

I’m going to the rectangle tool to make sure everything is still set. I’m going to go back to my full colour of white, I’ll grab a box and it’s going to start up here, and it’s going to go down to the bottom of my phone box and I’m going to grab one of these guys, maybe phone, actually no, I’ll grab name because he’s lined up. I’ll hold down my alt key, and drag him across, hold down shift, he’s behind where I need him to be, so I’m going to drag him up, and drag him back across a little bit. Actually I’m going to change this first, I’m going to call this one message, get my move tool, and move him along so he lines up there. I'm going to try and name everything, so I’ve got this box, which is form email, this one here is form phone, and this one here is called form message.

Next I’m going to add a submit button, so my submit button is just going to be another little rectangle, ok. In this case down here it’s going to cross 3 of them, ok.

I’m going to give it full colour - I’m going to use the colour dark purple. I’m going to grab my type tool. Click once down here , I’m going to call this one submit and I’m going to make it Roboto, but I’ll make this one Roboto slab bold. Actually what did we use up here? This one here, - I’m going to grab my type tool , and click in here to check. So grab my type tool, click inside This one was Roboto slab 24, ok, so I’m going to do the same with this one.

I’ll grab my type tool, click inside Roboto slab bold 24, and I’ll make it the colour of white. Get my move tool, drag it up, - it’s behind it - no it’s in the right position. Great.

Turn my guides off , close that up. Great. There’s our little contact box. I’ve put them all inside their own little contact group, ok so remember using our trick. Auto select on, drag a box across all of them, and then move them all inside the contact box, and there they all are.

Alright, that’s how to mock up a form in photoshop.