Web design basics. Analysis of the main blocks on the site
From the author: I greet you, dear reader! In this article, I propose to consider the basics of web design, or rather, the main blocks of the site. External beauty…

Continue reading →

10 web design trends that may appear in 2016
From the author: in this article we will consider 10 trends in web design that may appear in 2016. Design trends may not change for several years (and in some…

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 →

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 complexities in these fun controls and switching … complexities that are easy to overlook when we focus on the same old default and hover states.

Button State Design

In truth, mouse effects are probably the least important for design. By taking into account the more functional states at an early stage, you can reduce the risk of possible costly redesigns as your template library evolves. Here are the basic conditions that you should pay attention to at an early stage, approximately in order of importance.

1. Default
Not surprisingly, the standard display of a button is really important. If you make it too catchy or too inconspicuous, you will see that without additional modifier classes or alternative styles, you cannot move on.

Button State Design
Web design. Fast start

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

Learn more
It is also important to create buttons based on context. One of the common mistakes is to choose a button style that does not differ enough from the input fields, which can lead to the form becoming incomprehensible.

Button State Design

It is also important to choose colors with adequate contrast for most users. I use the Contrast app to test my projects for WCAG 2.0 compliance:

Button State Design

2. Focus
The most important condition you should consider is: focus. Without it, navigation through the keyboard or other devices with direct input is almost impossible. The good news is that browsers already include a default solution for it, usually a dashed outline or a blue glow:

Button State Design

These outlines can sometimes seem incompatible with the visual styles of the project, so they often turn off … and many users remain in the dark. So, let’s all raise our hand and repeat after me: “I solemnly swear never to turn off browser focus styles without including a reasonably thought-out replacement.”

Excellent! From this point of view, here’s what you need to keep in mind when developing a custom focus style:

In a group of buttons, highlighting the input focus should be easily distinguishable.

It should not rely entirely on color changes that may be difficult to see for some users.

Ideally, it should be flexible enough to work with many button styles without frequent overrides.

Button State Design
Web design. Fast start

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

Learn more
3. Disclosure / Switching / Selection
Although this may seem like a distant prospect in the early days of system development, it is very likely that at some point you will need buttons that act as switches: open and hide menus, switch to favorites / bookmarks, switch tabs, etc. Given this feature early on, avoid potential conflicts with other button states.

The design of the disclosure buttons may vary depending on the project. You might even need more than one. Important considerations are for on states. and off different from each other, and so that both are combined with focus styles.

Button State Design

4. Disabled buttons
Like focus and disclosure states, disabled buttons should be easily identifiable. But unlike previous states, they should not differ much from the default state. The disconnected state should look muffled, less bright.

One of the most popular ways to disable buttons is to reduce their opacity. This works well for buttons with the same default style, but less when the disabled button has more saturated colors than the adjacent active one. The combination of opacity and saturation reduction can play a trick:

Button State Design

5. State guidance and active
Yes, I know that many do not want to postpone the development of these states to the very end. But there are at least two really compelling arguments in favor of this:

These conditions will apply only to some users and input methods. Not everyone uses a mouse, not everyone uses their fingers.

In this way, we can take these states into account when designing them so that they differ from everything else.

The combination of colors in web design as an effective marketing tool
From the author: the web designer has in his arsenal many tools for interacting with users using color. The combination of colors in web design is an effective marketing tool,…

...

Typography in web design: basics and rules of use
From the author: I welcome you, friends! We continue to analyze the intricacies of professional web design, and today a very relevant topic is web typography. Unfortunately, many developers do…

...

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…

...

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…

...