If you want to start designing or improve UI skills you are in the right place!

When we see a design, we judge the whole picture — is this a good one or not? So, what defines that something “looks neat”? The answer is — focus on details. Once you are a master in details, try to merge and forge them into a whole project. Designing has specific guidelines and structure. You have a lot of rules and definitions, which are the baseline for creating a beautiful design.

One of the most important thing in the design is the button. So, here we are to break it down into pieces!

What is a button?

According to Wikipedia:

“In computing, the term button (sometimes known as a command button or push button) refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.”

Ok, it’s quite a boring definition, so let’s try the practice!

Button is a thing which informs us that we can do some action. What action is it exactly? It depends — it might be e.g. go to another page, reload some information or like a photo.

User should have a possibility to predict action before pushing the button. For example — when someone clicks an outlined heart, and it becomes full of pink, it means that the user likes the photo.

Seems difficult? O course it doesn’t! If you are still interested, follow our 5 short steps to dive into buttons’ details.

1st — Main Types

We can divide the standard types of buttons into 3 main categories, which we can find on web pages and apps.

Contained button — has (mainly) a strong background colour,

Outlined button — has only the stroke around the text,

Text button — has no border and no background, however, we can add some underline, arrow or bolded the text. It’s a popular example of a button in tables where we lack space.

[1] Contained button [2] Outlined button [3] Text buttons

2nd — Hierarchy

Action “let’s talk” is definitely more important than “show more”.

The most important button shall be the most visible one. This is why we collect together different types of buttons to indicate the hierarchy to the user. However, we shouldn’t make more than 3 types of buttons for one landing page or screen, and more than 10 types for a larger site or app.

3rd — States

We can distinguish 4 basic states:

Enabled — the button is active and clickable,

Disabled — the button is inactive and have no reaction after press,

Hovered — the button with a cursor on it,

Pressed — the button while it’s pressed.

4th — Anatomy

Why do most of the buttons look simple and neat at the same time? Because we use a simple grid to design them.

Example of some button sizes.

The most popular heights of buttons are: 32 px, 34px and 36px. The top space between text and border should be the same as a “safe space” around the button.

The popular text sizes in buttons are:

10px — in tables or in the lower hierarchy,

— in tables or in the lower hierarchy, 14 / 16px — standard size of the button,

— standard size of the button, 18 / 24 px — quite huge, to distinguish something.

5th — Design

Now we are at this moment, in which we search for some distinction for our design. Try exercises with gradients, shadows, typography and style and show your buttons in the different (special) way!

Try it by yourself!

The task for you — design the login page of the sports mobile app.

Types of buttons:

Sign in,

Already have an account? Sign up,

Forgot your password?

Will each one of the above buttons look the same? Which one is more important than another? Let’s think about it, and do it by yourself! When you finish, look at the example below.

.

.

.

.

.

I hope I helped you to make some small step in this huge design world. I keep my fingers crossed for you! If you have some question and thoughts — please contact me.