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.

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.