States

Each interactive element of the site (buttons, links, input fields, etc.) gives feedback during an interaction. For example, when the user hovers over the button, it reacts to it: changes color or displays a shadow so that the user understands that he can interact with it.

No base states

These are the most apparent interactions: hover and click. Sometimes, states can be completely absent in the mockups, or only individual elements may have states.

How to fix it? → if several elements do not have styles, then repeat the logic that is already in the mockup. For example, color change, element parameters, smoothness – all of it can be copied.

Without guidelines, you will have to come up with states independently. Don’t make things difficult for yourself: use simple tricks like changing colors or adding transparency.

No specific conditions

More often, it’s not the basic states that are missing in mockups, but more specific ones, such as focus or inactivity. These states are related to the peculiarities of the web interface, and designers may forget about them or not even know about them.

How to fix it? → if there is no focus for a particular element, but there is for others, repeat this focus.

Focus is different from other states: it is analogous to a cursor, not highlighting an element. Therefore, it should be recognizable on all site elements and look the same on a button, link, checkbox, etc.

If the design has no focus state, then use the standard browser focus. Make it closer to the browser if it doesn’t work by default (as in custom checkboxes).

It is easier with inactive elements: they are usually paler and do not respond to hover and clicks. Set them to transparency or choose a pale color.

There are also rarer options, such as a field in readable mode or a visited link: you can’t describe everything, but this is often not necessary. Try to understand how the logic of the element differs and how to propose it visually: color, brightness, or even an additional icon.

There are ideal processes and tools in a parallel universe that allow you to create design layouts without a single flaw or omission. It must be a beautiful universe. But until scientists invent ways to travel between worlds, developers will have to deal with layouts that have flaws. 

A designer can forget something, not double-check the project according to the checklist, not think about rare scenarios, make mistakes, or simply not know something. And there are cases when devs don’t have the opportunity to contact the designer for clarification. Hence, we have brought solutions to most of the commonly faced problems by a front-end developer.