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.1 The Colour Palette and Buttons

In this chapter you’ll learn how to design a simple admin UI. We’ll start by using artboards to create a simple color scheme, and then I’ll show you how to create a few button styles.

3.1 The Colour Palette and Buttons

Hey, welcome back to Practical UI Design with Sketch. In this chapter, you'll learn how to build a simple admin user interface. And you'll start by using Artboards to create a simple color scheme. After that, you'll move on to create a few button styles. So, let's get started. I have a new document here called Admin-U1.sketch, and I'll start by renaming this page to assets. Inside, grab the artboard tool using the A key and create an artboard that's about 800 in width and 400 in height. Now inside, grab the rectangle tool and draw a rectangle that's 200 by 200. This will represent one color swatch. Remove the border, and for the fill use the following color EB 6553. It's a very nice orange color. I'll move this up. I'll call it color BG, and inside, I'm gonna put a text. I'm gonna say BTN Primary. Okay. Now, this will be Helvetica New Regular. Let's do about 20 pixels, so we can see it better, and white. Align it in the center and then select these two and align them together. Group them and call it BTN Primary. So this will be used whenever we build a new element on our page, we can always come back to this our artboard and select the color. And then copy this, paste it. And this will be Btn Default. And the color for this will be 58626E. Okay? Now I'm gonna copy this, paste it once and I'm gonna create an empty slot here and fill it with white, and empty fill it or give it a color of black. And then duplicate this. Once more. Okay and for now this is all need with the color scheme because we will add colors later on as we build more and more elements. For now let's move on to buttons. So again create a new artboard. Let's make it about 400 by I don't know, maybe 750, call it buttons. Now, for buttons, we'll gonna have two styles basically a primary button, which will be represented by this color, and a default button and for both of these, we'll have three sizes. A tiny button, a smaller button, and a larger button. So let's start with the primary buttons. I'm gonna put a text here that says Button Primary, with black. Let's align this at about 50 from the top and 50 from the left. Grab the rectangle tool and let's draw a rectangle that's about maybe a 140 by 35 pixels in height. All right, so this will be the background for my tiny button. And let's place it about 50 pixels from the text. Okay. So, with this, first of all remove this border. For fill, I'm gonna use Ctrl+C to get this color. Three pixel radius. And then for border, I would like to get a border that's pretty much the same color as the background, but only darker. So instead of picking one, like a solid color. I'm gonna pick black. And I'm gonna change its opacity to about 50%. Let's see, no that's too much. Maybe a bit less like 20% or even 15%. Yeah, 15% looks pretty good. So, black 15% and make sure it's on the inside. So now whatever color you're gonna give it, if you're going for blue, you'll always have this border, which borrows from the background color. Very cool. Okay, now, I'm gonna take this and create and new shared style called, BTN Primary. Now this will only copy the color and the border. Inside, I'm gonna put a text called tiny primary, let's do medium with this, 11 pixels, color is going to be white. Let's align it in the center and let's give it a shadow, color is gonna be black, but with like 20 pixels, or 20% opacity. X is going to be 0. Y is going to be 1. And blur is going to be 2. Like that. So a very subtle shadow. Also let's do, like, 1.2 distance between letters. And let's make it uppercase. Great, so, select these two, align them in the center, like that. And this one, I'm gonna create new textile called Btn Tiny Text. Just in case we'll need it later on. Okay, now this is the BTNBG. Group these together as BTN, tiny B for primary. Or let's just say tiny primary. Okay, like that. Now, copy this, paste it. Bring it down. About 20 pixels distance, and this will be transformed into a small button, so it should be a bit bigger than a tiny one. So let's make it about 200 by 50. And then the text, it's gonna stay small. Set no text style there because we'll create our own text style. And let's do about 16. The spacing, we're gonna put it at about 1.6, maybe 1.7. You can do it either way. Okay? And let's select these two and align them in the center. This preserves its BTN primary style, but this one we'll create a new one called BTN small text. And then select this. It's gonna be small primary. Copy it. Paste it one more time and this will be large. Let's resize this to about 250 by 75. And then the text, I'm gonna use about 19 pixels. Oops. I forgot to change this to no text style. So 19 pixels here for the character. I'm gonna go with 2, and call this large primary. Align them and create a new text style called Btn Large Text. Okay. Great. So this is the primary button. So I'm gonna get this. I'm gonna call it primary. And then I'm gonna duplicate it. And this will be BTN default. Say default here, and now the only thing that I'm gonna change here is, select all of these. No shared style. And I'm only gonna change the fill, so Ctrl+C on this one. And then, create new shared style and that will be called BTN default. Okay? And this one and these will share the same style. Okay? And that's basically it for the color scheme. At first and then the buttons. So, we have two button styles and three sizes. Now next time on Practical UI Design with Sketch, you'll build the form elements and set global styles for those elements. So I'll see you there.

Back to the top