7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Designing Form Elements

Designing form elements is something I recommend you do during the early stages of a web project. In this lesson we’ll build a few form elements that will be used later on. Most importantly, you’re going to set global styles for these elements so they can be reused with ease.

3.2 Designing Form Elements

Hey, welcome back to Practical UI Design with Sketch. Forms are among the first elements that need to be built in a project. It's a good practice to do so. That's what you'll learn in this lesson. You're gonna build a few form elements that will be used later on throughout the project. But most importantly you're going to set global styles for these elements so they can be reused. So first things first, create a new artboard using the A tool, something like this and call it forms. Now, make sure you align it and you set it at a correct distance. So, something like that. Now I'm gonna copy a few things from here like this text and let's zoom in. Forms, and then we're gonna start with a simple input that has a placeholder. And we'll make this so that it matches our small button right here, which is actually 50 pixels. So, going back here, grab a rectangle tool and draw a rectangle that's, I don't know, 250 maybe by 50 pixels in height. Give it a three pixel radius just like the buttons. And then the fill is going to be white and the border will be a different color. CDCFD1. Okay? And make sure you remember that color because we're going to paste it here and create a new swatch. And this will be called Border. Okay. Now apart from this border, I will add another border which will act like a surround for this entire element. So borders, hit the plus sign for the color fafafa like that. It's going to be on the outside and it will have about five pixels thickness. So, if I zoom in here really close, you can see that it created a nice round for this. And this brings us to another color swatch. So in here I'm gonna fill this with fafafa and I'm gonna name it Light BG. Also name this one as Light BG. Okay. Perfect. Now I will extend the color scheme artboard to 1000. Okay? And now lets come back to our Forms. Inside, I am gonna say, This is a placeholder. And first of all, this will be input BG. This will have 16 XL font size. For the color, I'm gonna use the border color because on the text it creates this very light gray. And then select both of these, align them, and then In the center. And I'm gonna place it at 20 pixels from the left side. Okay. And select this, create a new textile and let's call this Placeholder Text. Okay? Grab the input BG and create a new shared style called Form Input. Now, group this as input placeholder. Copy it, paste it. And lets make an input that has some actual text. Now for this text, I'm gonna change the color to 171D24. Create a new texttile called Form Text and create a new swatch. So let's copy this light BG, call it Form Text, fill it with that color and make the text inside it white. Okay, perfect. All right, now this art board is a bit too big, so I'm gonna resize it to about 650. That should do it. And maybe bring this to the left by 10 pixels. Okay, next we need a text area. So I'm gonna grab this placeholder, paste it, I'm gonna leave about 20 pixels from the element above it. And I'm gonna rename this to Textarea and this to Input with text. Okay. Now the Textarea, I'm gonna change this text to Textarea. And I'm gonna make this bigger. So, 540 and maybe something like that, about 290. Just so we can see how a text area would look like. Then at the finaly bottom we're gonna copy and paste this group. And I'm gonna make style for error. So this one will be input error. Change this one as well. And the text that we're gonna use. The text color actually will be F75249. And also this, I'm gonna change its border to the same color like that. And I'm gonna create the new shared style called Form Input Error. And this one, Form Error. And then finally let's create a new swatch for it. So I'm just gonna copy this one. Form Error. Okay. And that's basically it for forms. We have the typical input and the text area and then we have a place holder style, actual text style and then a style for error. And at the same time we created the color swatches. So that's basically this for this lesson. Next time on Practical UI Design with Sketch, you'll learn how to create the Typography Styles. This is something you need to do early on. So, I'll see you in the next lesson.

Back to the top