Rubber web design. What and where are we going to stretch?
When developing a website, the webmaster, first of all, should be based on the project goals. If it is important for the customer that the web page can be adjusted…

Continue reading →

Web design lessons from scratch. The basics of good design
From the author: I welcome you, dear reader. Starting your path as a web designer, you are sure to meet in great numbers various seminars, courses, guides, books and web…

Continue reading →

Web Design 2016: Chrome attacks!
Personally, I remember in 2016 design and UX that Chrome applications have become a full-fledged version of web design. I wrote in 2016 about three of them. Web Design 2016:…

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.

Landing design: how to make a capture page
What is a landing page? The concept of landing page, as, in principle, the design of the landing, came to us relatively recently, according to the official version from the…

...

Landing Page Website Design
From the author: I welcome all readers of my blog who are interested in creating a website design from scratch or promoting their own business on the Internet. Although even…

...

Creating a website design in Photoshope: getting to know the editor and its features
From the author: good afternoon, friends! Today we have a difficult and very voluminous topic in turn - creating a website design in Photoshope. In general, all that concerns the…

...

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…

...