Once the concept and prototype are agreed upon, you can start drawing design layouts.

General principles of layout management:

• Adhere to the atomic system
• Build the vertical rhythm of the layout using the spacing system

A spatial organization system is a set of rules that determine the dimensions of interface elements and the distribution of space on the layout. Consistency in the spatial structure makes your product more recognizable and logical.

One of the classic examples of such a system is the 8px grid. In our case, it is desirable to adhere to it. This means that all distances in layouts, spaces, and dimensions of elements must be multiples of 8px with a half-step of 4px.

Why are we against odd values? Applying spatial rules with odd values, for example, with a step of 5px, can make it difficult to center elements without dividing pixels in half. So, when centering text and icons on a button with a size of 25px, there may be problems with blurring pixels.

Similarly, when adapting the interface for various mobile and desktop screens with a scaling factor of 1.5, blurring may appear due to pixel division.

When it comes to organization, it is important to mention naming, that is, the names of layers, frames, and other layout elements. There are no specific recommendations here, as this is a matter of individual convenience. Some are more convenient to use capital letters, and some like lowercase ones. It’s like variable naming styles in programming: the main thing is to adhere to a single system throughout the layout.

Good layout naming allows you to:

• Navigate the architecture of the site as a whole. For example, pages can be divided into sections or separated from each other by large spacing + signed;
• Understand by the name of the layer what it is — a section of the site, a control or a graphic detail, as well as its immediate purpose. For example, a topic tag in a review.

All images should be placed in frames (not groups) with the Clip content option enabled.