The best designs of single-page sites Landing Page
From the author: I welcome web designers of all ages and blood types. According to statistics and the opinion of top marketers in the world, the Landing Page is 2-3…

Continue reading →

The best designs of single-page sites Landing Page
From the author: I welcome web designers of all ages and blood types. According to statistics and the opinion of top marketers in the world, the Landing Page is 2-3…

Continue reading →

Web design standards: everything you need to know for beginners and pros
How do design standards increase website popularity? There is an opinion that web design standards attract users to sites, and most importantly - keep them for a long time. Why?…

Continue reading →

Buttons in web design

From the author: I love buttons. With their help, you can do many different things: move on to the next stage, accept various conditions, perform something. Buttons make the site interactive. This is why buttons are perhaps the most important components in a design system in web design.

It’s simple, the buttons mark an area so that I can click on it. In essence, it is on the buttons that we apply the basic attributes of the design language so that then it has its effect on more complex components. Below I presented 12 lessons that I learned based on working with primary (primary button), secondary (secondary button) buttons, as well as other types of buttons.

Primary buttons
No. 1. Decide on the style of the system

Buttons are the purest atomic expression of the visual style of a system. The button consists of three inextricable attributes of the so-called “big three” – color, font and iconography. Buttons also need to take into account the space: internal padding (in particular to the left and right of the inscription) and external margin (affecting other elements). Buttons can even affect attributes such as fillet (or border-radius) and elevation (or box-shadow).

Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
Conclusion: Accept the buttons as the main representation of the style of the system. Even better if you specify a button as a set of variables: color, size, space, etc.

No. 2. Define the style of words

Luckily, the buttons that say “Click Here” are a thing of the past. But questions remain open: How long should the button text be? Is it worth making signatures in the imperative mood (Save or Close)? Do I need to add an object type (Document) to the verb Save? Are there any signatures preferences for common actions? Do I need to connect the buttons somehow with the brand … or not?

Conclusion: Find online guides with a set of ready-made buttons. A list of relevant words and editorial standards can be found in manuals such as Voice and Tone. Buttons are a great example of introducing new standards.
No. 3. Invert button colors if background changes

Most buttons work well on a white background. Will the button be visible in the photo or on a darker background? Can you place the button on a light neutral background? Is the button clearly visible on any background? Can you change the color of the primary button?

Conclusion: Test the primary button on possible backgrounds and add alternative styles (white background, some other color or translucency?) To the code in case the background gets darker. When designing, create light and dark variations of buttons on possible backgrounds for greater clarity.
Number 4. One primary button per page, unless an action is repeated

Buttons call for action. We often use the primary buttons to draw attention to the most important action on the page. At least until we start clogging the page with a bunch of primary buttons (it’s good that they are all alike).

In some cases, the primary buttons are well suited: when choosing from parallel objects (as a set of media objects in the search results) or when choosing options from equal modules on the settings page.

Conclusion: Decide in which cases it is worth using only one primary button on the page, and in which more than one.
No. 5. Design and create all kinds of interactions with a button

Buttons are a primitive kind of interaction, and the interaction leads to changes. It would be incorrect if you just tell the developer “Here is the button design!” and show the button on the loaded page. The designer should show the appearance of the button in all possible states: by default, when you hover over the mouse, it is in focus (highlighting appears for example), when pressed, and even some kind of spinning wait animation or animated progress bar.

Conclusion: Supplement the live demo (just insert the button on the page) with a gallery of all possible states where the user does not need to interact with the buttons. Creating documentation is not a treasure hunt. It will be even better if you create a video, as in Material Design.
No. 6. Make change resistant buttons

The combination of signatures with the icons in the buttons enhances the value, which speeds up recognition. So, stand there! I thought buttons are signatures with a predictable area for clicking. When adding new elements, even the usual icon, your button should not crumble. Adding less predictable elements entails problems with space and alignment that you want to solve, especially when you can place a signature, icon, etc. in the button.

How to master web design and where to study as a web designer?
From the author: Good day, dear reader! In your opinion, is it possible to develop an artistic and aesthetic taste for someone who has never held a brush in his…

...

How much does a web designer earn on freelance and in studios?
No matter how interesting web design is, most people go there not because of this, but because of financial attractiveness. This direction is quite profitable after the accumulation of a…

...

Button State Design
t author: button design is a key element of any design system. The best of the buttons are simple, versatile, perhaps even a little fun. But there are many hidden…

...

Changing the site design: quick restart of your project
From the author: Hello everyone! Today we will talk about a very relevant topic - changing the design of the site. Do not understand why this is necessary? Then answer…

...