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, devs 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.
1. 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.
2. Feedback
Interfaces are not static: we follow links, click buttons, filter products, write search queries, submit forms, and can do many other things. And for each of them, the interface reacts to show what is happening.
For example, if we click the “download” button, a loading indicator will appear on it, notifying us that the data is being loaded. If the indicator didn’t appear, it would look like something was stuck or the button click didn’t work.
After loading, the data appears on the page. If a failure occurs and the data is not loaded, the user will see an error message: in this case, you cannot turn the loading indicator or return the button to the default state without messages.
This is how feedback from the interface works: using symbols, indicators, and sometimes just text, it displays what we have just done. And while the designer should be the first to worry about feedback, what often happens is that layouts only present end states: for example, before the request, and after its successful execution, skipping all intermediate stages.
No loading indicators
Indicators can be divided into loaders and skeletons. Loaders display during the loading of something and can be shown in 2 places: on the element that initiated the loading and in the area where the user expects data. In addition, the loader can display the loading process as a percentage or only graphically.
Skeletons show the outline of the interface where we expect to receive data. Of course, they need to be well thought out, so take them on only if you are confident in your abilities.
How to fix it? → if there are no loading states in the design, then create a spinner that spins indefinitely: this may not be the best solution, but it is simple. Look for options on CSS animations: there are many of them, and choosing the right one will be easy.
No download or upload error messages
Not always work with the interface goes according to plan, and such situations also need to be taken into account. Sometimes the negative scenarios are not considered in the mockups, and there are no rendered states for error handling.
How to fix it? → add text with a message about failed upload and maybe a suitable icon. A good solution would be to add a button to the message that triggers a reload of the data.
Not enough states for validation
Data validation when filling in fields is an important part of user interaction with the interface. And here you need to be careful: how good and timely tips can help, just as bad and inappropriate ones can spoil the user experience.
If there are few states for validation, do not invent additional checks. Instead, limit yourself to padding states for invalid padding.
How to fix it? → for other states, you can leave browser validation to the maximum: browsers check forms and even know how to write parameters if the entered value does not match. So you can get by with styling errors.
Be sure to add description text: the user needs to know what exactly went wrong.
3. Technical pages
It also happens that there are no pages in the design. Usually, these are technical pages. The most interesting thing happens with the 404 page: the designer either uses it to show all the creative potential or vice versa, forgets about it. A similar fate occurred with password recovery pages, empty search responses, or applied filters when nothing was found.
How to fix it? → For pages like 404, take the most basic page of the site meant for straightforward text content, like a company block, news item, or article. Type in the text you want, and you’re done.
It’s easier with search and filter: you already have a designed page. Think about what actions would be useful to the user in this situation. Add them as links or buttons next to the text.
4. Systematic layout
Consistency means the multiplicity of element sizes and indents, the identical behavior of similar components, and a well-thought-out number of fonts.
Different margins of identical elements
Often in the design, there are different indents between identical interface elements. For example, between product cards in a catalog. Do not set these different indents in the mockup – this is a clear layout error.
How to fix it? → try to calculate the average. Perhaps it would be better not to look average, but a little more or less: feel free to take it. You can go even further and make the indents on the site more logical. This can be done if a pixel-perfect layout is not required.
Of course, you don’t need to follow the vertical rhythm, but making multiple indents will be more convenient in work and will give the site a visual structure. Use indents that are multiples of a certain number. This number is often 4 (for very small indents 2, and for large ones, on the contrary, 8).
It will be necessary to turn the indents from the mockup into the nearest value, a multiple of 4: 5 => 4, 7 => 8, 10 => 12.
Too many sizes of similar elements
Some designs contain almost the same elements, but each one is somewhat different from the rest. For example, there may be ten buttons, while for ten buttons, there will be eight options for their sizes, some of them different from each other and some different by several pixels.
How to fix it? → group these elements. Combine similar options into one average one. Usually, you can select up to 3-4 element sizes in design.
Too many font sizes
The situation is similar with fonts. The text should not exceed two font sizes, excluding headings and other unique elements.
How to fix it? → with fonts, you should be as careful as possible. Try not to overdo it with abbreviations. Act only if there are a lot of sizes or individual text is out of the general style. Be careful with the choice of sizes that will remain. It is better to round up – so the readability of the text will not worsen.
5. Usability and Accessibility
It would seem that designers prepare design; how can there be problems with usability? But sometimes layouts are prepared by inexperienced beginners and sometimes by experienced designers who have never encountered web development before.
Here we will focus on the accessibility for users and not screen readers.
Insufficient contrast
A simple but important test is for color contrast. This is easy to do through the developer tools. The difference is evaluated according to the WCAG standard (although it is not ideal, and more advanced alternatives are already appearing). It will help you assess how easy to read a text for people with visual impairments or owners of inexpensive monitors and those who use the site in bright sunlight.
How to fix it? → choose more contrasting colors using developer tools.
Text is difficult to read
Pay attention to font sizes and line height. The font size should not be less than 16 pixels for the text to be readable. The line height should tend towards a ratio of 1.5 for texts and 1.3 for headings.
How to fix it? → if it is possible to increase the font size without harming the design, do it.
- The line height can be set in relative units: line-height: 1.5;
- So the line height will change along with the font size.
The area of the elements is inconvenient for interaction
Please pay attention to the size of the elements and the distance between them. We will not go into deep research, but if you, as a developer, are uncomfortable getting into some elements, then it will be even more difficult for a user with motor impairments.
How to fix it? → For touch interfaces, it is recommended not to make interactive elements smaller than 40×40 pixels. Smaller for desktop, but don’t get carried away: if this is not a link inside the text, then it would be nice to keep the minimum size at least 32 by 32 pixels.
It also works well with using multiple sizes: they will bring order and lead you to elements that are familiar in size.
6. Technical Problems
Sometimes there are purely technical problems in mockups. Although, I will not analyze the shortcomings, such as the lack of use of components or auto layouts, let’s look at the most basic ones.
Icons are not optimized
All icons must be placed in the same frames. This is done so that they are visually comparable and stand up the same when applied. Also, the icons should be created as a single vector object, not separate elements.
How to fix it? → you will have to learn how to work with the vector inside Figma. It makes sense to fit the icons to the same size, create frames for export and merge the vector elements through flattening. When manipulating the icons, make sure you don’t accidentally distort them.
Graphics in different layers
Layouts may contain collages of several photos or photos with additional graphics. Figma will export them as separate files if they are on different layers.
How to fix it? → it’s better to merge images into one frame. So, in addition to creating a single file, if necessary, you can crop the image. Sometimes it is convenient to take out the graphics separately and export them as a group at once, without repeating the export settings for each image separately.
7. Incomplete design
Sometimes there is no logic in the design. Here it will be difficult to give simple advice that can solve the problem. It would be better to come to the designer and solve this problem. Not necessarily to the author of the mockup, but it makes sense to give the design finalization to a specialist: although a good front-end developer has an idea about UI, this does not mean that he should not do his job.
But sometimes there are no other options.
Lack of adaptivity
There are designs with only a desktop version without mobile and others. Or, there are no extreme or intermediate states. In any case, you will have to think about how the site behaves at different screen sizes.
How to fix it? → try not to complicate your life. Choose solutions that are easier to implement and work more reliably. Use other similar solutions as an example. For instance, if you have already made a mobile menu on another site, repeat the trick you know.
Overflow issues
Overflow can work poorly for two reasons: poor development and poor design. Coping with the first is our direct responsibility, but it will be more difficult with the second.
How to fix it? → if you can’t do without overflow, and the design does not provide it, then you will have to apply not the best solution. For list-type elements, you can add a scroll inside the component or an overflow button that will show the rest of the content. Sometimes all sorts of sliders and carousels can help out.
These Development Courses will help you to be thorough at the front-end development part.