Tips for creating a logo for your website
A bit of theory: the concept of logo efficiency The main functions and capabilities of the logo have already been mentioned above. This small icon can produce a stunning result…

Continue reading →

Where does website design development begin?
From the author: Good day, dear readers of the blog. In this article I will share with you the basics of preparing for the development of website design. After spending…

Continue reading →

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…

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.

Popular web design styles
From the author: hello friends! How often do you have to visit sites that are scared to order products because their design leaves much to be desired? Imagine the situation:…

...

Popular web design software with raster and vector graphics
From the author: for the successful design and creation of sites you will definitely need special programs for web design. There have been tons of new applications lately, but which…

...

What every web designer should know and be able to not face the dirt
This category is much more multifaceted than it might seem at first glance, because it includes graphic design, navigation, logical structure development, and much more. Therefore, a website designer is…

...

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…

...