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.
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
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.