Beginners guide to designing nice buttons for your App using Sketch

Buttons for Beginners in Sketch App!

I love buttons. I love looking at them and I love designing them. 🙂
So, today, it’s all about designing buttons in Sketch.

I’m going to show you how to design various kinds of buttons. That’s it, nothing super fancy.

We’re going to design:

Flat Buttons
Round Buttons
Gradient Buttons
Shadow Buttons

Ok friend, open Sketch and let’s get started.

Flat Buttons

These kinds of buttons are on their way out style-wise.

“They’re too flat, no one knows they’re a button!!” This is what my Rails developer-friend Andrew says because, well, he’s a developer and he’s practical like that. He has a point.

Regardless, this is a beginners tutorial and you gotta know all the buttons.

Here are the basic steps for creating a button in Sketch:

1. Create an Artboard. Press “a” and on the right you’ll see a bunch of pre-defined templates. Choose an iPhone or Android phone.
2. Draw a rectangle. Press “r” and draw a shape. Use the “size” section on the right to make it an even number, my buttons are generally 300 pixels by 60 pixels to start.
3. Put some text on it. Press “t” and type some text over the button, use the right-hand column to change it’s properties. Go with white and a size of around 24 pixels.

You now have a basic button but it’s not very nice so let’s make more of them and more awesome.

Change the button color

1. Use the color picker on the right to choose a nicer color. If you think you suck at colors no worries. Go to Dribbble.com, select “Colors” from the top menu and copy the 6 digit code (#343432) of a color you like and paste it into the field back in Sketch.

It’s already looking better, nice job. But what about when someone clicks on it? We need the user to know they clicked on it. This is where “Hover” states come in.

Let’s duplicate it and make it a darker color

1. Take the cursor and drag it over the button and the text to select both of them.
2. Press “cmd + d” to duplicate the 2 elements — the rectangle and the text.
3. Hold down the “shift” key and arrow down the new button underneath the other. Or you can simply drag it with the mouse pad.
4. Select the rectangle but this time use the color picker again but drag the color down until the button becomes noticeably darker. It doesn’t have to be super dark, just noticeable.

Round Buttons

You’ve now created a basic flat button. We’re going to now make a round button which are still pretty common.

1. Click on the Artboard name to select it. In my case this is “iPhone 7”.
2. Press “cmd + d” to duplicate the entire Artboard
3. Now, we can kill two birds with one stone. Select both rectangles and in the right hand column (this is called the Inspector), find the Radius tool and drag it all the way to 100.

That’s it, you’ve now created a round button. I’m also going to change the color of them just for something different.

Gradient Buttons

You’re probably starting to get how things work at this stage but let’s add a little complexity and make a button with a slight gradient. In Sketch, this is also super easy to do it just takes some practice.

1. Select the color picker but this time, choose the second square at the top. This is a ‘linear gradient’.
2. You can drag the color stop bar left and right to change the intensity

Create the Hover state

1. Delete the button underneath and duplicate the gradient button and move that underneath
2. To make the hover state we are simply going to rotate the gradient to be the opposite of the normal state. Simply press one of the arrow icons to rotate it.

And that’s it for gradient buttons! Play around, go nuts and see what else you can come up with.

Shadow Buttons

These buttons are all the rage at the moment. Subtle shadows are being used on many elements and components including buttons and panels.

1. As before, duplicate the last Artboard and just for something different change the Radius to around 5 to give the button a softer feel. Change the color if you like as well.
2. In the Inspector, add the default shadow by simply clicking on shadow
3. Delete the button underneath and duplicate the last button and move it down

Now, I’ll explain what each of those options do. The ‘X’ and ‘Y’ axis are very common in User Interface design. The ‘X’ axis represents the horizontal and the ‘Y’ represents the Vertical axis.

In normal human terms, putting a minus number in the X field will move the shadow left along the horizon line. Putting a positive number will move it to the right.

And the Y, a negative number will move the shadow up the vertical line and a positive number will move it down.

The Blur defines exactly that, how blurry the shadow will be and finally the Spread defines how far from the element the shadow will be.

Note:

Be careful not to go too crazy on shadows. Don’t make them too large or spread too far. When it comes to development, simpler is better — always.

What next?

There’s a lot more you can learn about Sketch that will make your workflow more efficient including making Symbols, grouping items, creating text styles but my tutorials are going to take it slooooow. They are for absolute beginners.

I’m writing a book (of course I am!) on how to design apps from Scratch. If you would like to know when it’s ready OR you would like to know about new tutorials, please sign up at my website at anokdesigner.com.