Golden rules of a successful button

Original author: Pete Orme
  • Transfer
Hello dear habradrug! Today there are over a thousand ways to create a button; to understand their essence, you only need to spend a little time looking at the work on the site dribbble.com . Most of these examples are very similar to each other, but from time to time there are also such buttons, the creation of which spent a little more attention, time and effort.



Using the wonderful CSS3 options, we can create elegant and stylish buttons without much effort (considering old browsers, of course). Whether you create a button directly in CSS or use special tools to create it, you should always carefully think about how your button will look in the context of the website.


You can always download a ready-made set of buttons that some very kind person posted on the network. But why not sit and think about the fact that you can create something of your own, more original. I present to your attention 10 simple points that I always take into account when creating a button. I am not going to share ideas about what layer styles to use in Photoshop, but I will tell you about the basic principles that will help you in your projects.


1. Brand Compliance


It is important that your buttons match your context. This can mean both a smart choice of colors and graphic style, and the use of logo design when creating a button. Your logo may have a shape that you can use effectively.

Shape, color, texture, patterns and font offer a large field for creativity.

If the interface uses predominantly flat colors, then the large shiny buttons a la Apple are not the best option. If possible, use the logo design when creating the interface, use the appropriate shapes, colors and other forms of decoration.


2. Content Compliance


Remember that you need to build on not only the logo, but also on the interface as a whole. It happens that buttons can be buttons, for example, only on smartphones or web applications, but perhaps on the website they can come up with a replacement.


3. Is there enough contrast?


With so many interface designs inspired by Apple's style, buttons can get lost among the rest of the UI elements, losing their purpose. Try experimenting with colors, sizes, padding and fonts so that the buttons stand out in the interface.

Important buttons need contrast.



4. Rounded or shaped buttons?


If the interface contains too many buttons with rounded corners, perhaps you should change their shape, make them, for example, round. This will give contrast, which will attract the attention of users and call them to press a button.


5. We hide minor elements


You should always remember that secondary elements should not stand out from the entire interface. For example, menu items, controllers, or different sliders can be with the same angles (of the same radius), but with different shadows, borders, gradients, etc.




6. Stroke and border


Most buttons have something like a border or a stroke. If the button is darker than the background, then the stroke color should be darker than the button color. If on the contrary, i.e. the background is dark, then the stroke should be darker than the background. In my opinion, this rule is the most important when it comes to borders and strokes.




7. Be careful with blurry shadows.


For a long time I am guided by the Law of Shadows. This law states that any shadows work most effectively when an element is lighter than its background. If the element is darker than its background, then the shadows should be used carefully.




8. Icons to help you


The use of small icons (for example, arrows) will help the user to predict what will happen after clicking on the button.
For example, an arrow to the right may indicate that the user will move forward or leave the page altogether. Down arrow - a pop-up menu will appear.




9. Remember primary, secondary and tertiary elements


If you are creating an interface with many different functions, it is important to establish a certain visual language, defining primary, secondary and tertiary styles.
Save the strongest colors behind the primary buttons, and use the weaker ones as the buttons become less significant. Also, do not forget about reducing the button size, white space, text size and embossing level to reduce the visual weight of the buttons.

A variety of button styles can play into your hands



10. Indicate the state of the button


For some this will seem obvious, but it is advisable to always indicate the current state of the button. The user will prefer to have an idea of ​​what stage the button is currently at. This can be accomplished with CSS options such as shadows, borders, and gradients.




Conclusion


There is nothing wrong with using ready-made UI elements, because it is obvious that this saves a lot of time. It is even possible that you find the perfect item that suits you 100% (and absolutely free). Nevertheless, I believe that it is worth remembering the basic rules for creating buttons that will become the key to a successful and effective interface.

PS
With pleasure I will accept in a PM comments on the translation. Thanks!

UPD The font used in the buttons is called DIN 1451

Also popular now: