Trends and trends in web site design
It was originally planned to place a translation of an English-language article on web design trends in 2017, but after studying various sources, we decided to slightly change the concept…

Continue reading →

Improving the registration form on the site (4 useful tips)
On the Internet, the registration procedure occurs to us as often as the authorization form on the sites. You have to do the following: in all kinds of web services…

Continue reading →

How to make a favicon with your own hands?
A site without favicon, like a ship without a flag. Favicon is an integral part of the site brand, its image and identification. By the way, look at the issuance…

Continue reading →

Designer UI Cribs: Creating Buttons

Buttons are my favorite design element. In this article we will look at the different types of buttons, types of interactions and states. To save time, let’s concentrate on the “normal” buttons. Therefore, we will ignore radio buttons, tabs, checkboxes, and other similar types of buttons.

1. Action buttons
In this section, we will look at the hierarchy of buttons and the language in which they communicate. Button actions are not determined by how they look (although users should be able to understand in appearance what a button means), but rather how they are used.

1. Call to action buttons (CTA / C2A)
The call-to-action button, depending on the situation, usually encourages users to register / buy now / login, etc. Such buttons should be used where the platform wants to strongly suggest an action to beDesigner UI Cribs: Creating Buttons.

Call to action button.
For the call to action, I like to use rounded buttons, as they attract attention rather effectively.

2. Primary action
Although the call-to-action and primary action buttons may look the same, I would like to separate them. While the CTA buttons perform their function, the primary buttons should be a strong visual indicator that will help the user make the journey. These buttons should be used in situations where the user wants to “Complete”, “Start”, “Next” and so on.

Primary action button.
For buttons of this type, I use simple rectangular buttons with rounded edges.

3. Secondary action
The secondary buttons are the “Back” button next to the primary “Next” button. Or the “Cancel” button next to the “Confirm” button. Secondary buttons are an alternative to the primary action that we provide to users.

Two options for secondary action next to the primary.
For these buttons it is recommended to use the contour buttons or text links.

4. Tertiary effect
Tertiary buttons are usually used for different actions. For example, when the action is important, but may not correspond to what the user wants to do at the moment. It can be a “add friend”, “change”, “add new” or “delete” button, provided that these actions are not primary.

Tertiary buttons in different forms.
Simply put, for this you need to use less noticeable button styles.

2. Common button styles
In this section, we will look at common button styles. Style is just the aesthetics of a button, not how it should be used.

Solid button.
Contour and ghost buttons
Contour buttons are buttons with no fill. Although they are often used interchangeably, the contour buttons are usually light in color (with a dark outline and text), and the ghost buttons are in a dark color (with a light outline and text).

Contour button (left) and ghost button (right).
Rounded buttons
The rounded buttons are the buttons whose radius of the corners is rounded to the maximum.

Rounded button.
Note: The adjacent rounded buttons look awful. Every time when you place several rounded buttons next to it, a UI designer cries somewhere.

FAB (floating action button)
Floating action buttons are a thoughtful design solution, popular with Google Material Design. Although they may look like a button with an icon, in fact they are used for the primary action on the screen.

FAB button.
Text link
Text links are a very simple type of button. There are several ways to show that the label is a link. This can be a color, underline, link position, or just the text itself (for example, “Read more”).

Making text links.
When it comes to color, most sites use blue, as it is most identifiable as a link.

Button “icon with the inscription”
The popularity of buttons-icons has increased, but some buttons still need labels to correctly convey a message.

Button “icon with the inscription”
The most difficult thing about working with such buttons is to find the correct ratio of icon and font.

Option 1: the size of the icon corresponds to the height of capital letters.
Option 2: The size of the icon is much larger than the height of the line.
Warning: If the icon is only slightly larger than the height of capital letters, it will look inharmonious.

Button icon
There is no label on the icon button, only the icon is present. Thanks to this they save a lot of space in the interface. They also allow you to place other buttons and icons on a small space.

Buttons icons in different styles.
Warning: If you are developing a product for people who have problems with computers, use the button marked. Especially for buttons with more abstract content.

6 main stages of site development
I was recently told in the comments that some posts do not match the format of the blog, which is positioned as a useful resource for web designers. On the…

...

Using textures in web design
What is the easiest, correct, and sometimes the only possible way to create the illusion of the relief of an element (object) in web design (as well as in 2D…

...

DeviantArt introduced a new redesign
A year ago, we wrote that Wix bought DeviantArt - an online community for artists. As planned by Wix, the platform should become a haven of professionals. And it seems…

...

Creating beautiful RSS icons for your blog
Creating beautiful RSS icons for your blog beautiful RSS icons for the blog. For those who do not yet know RSS - a special format of blog posts that allows…

...