Modular grid in web design. Modern website design
The basis of proper website design is information. Sometimes it can be a lot. There is a difficulty in its location, the construction of structure and hierarchy. There are confusion and confusion. Especially when it comes to a dynamically developing web resource. To avoid difficulties, it is necessary to adhere to certain principles and rules that will not only facilitate the work of a web designer but also help to improve the usability of the resource. The correct modern website design cannot do without a modular grid. It is the basis and greatly simplifies the work of developers.
Proper website design – creating a modular grid
A modular grid is a specific layout of elements and blocks of a site. This is a frame that is built-in horizontal and vertical directions at the same time. The main convenience of its use is that the principles of constructing a modular grid are described when creating a web guideline. Here key laws are laid, the rhythm and the main proportions are set. Thus, once the calculated grid serves as the basis for the entire layout.
To build a grid, you need to build on two main things: content (texts, tables, illustrations, media files), the proportion and area of the medium. These two criteria are the main ones. They define a modular structure. A correctly calculated grid will allow you to fit all the blocks into the frame, in the future, there will be no situation that there is no place for any element. This is the protection of the final product, the work of the developer and designer.
Work algorithm.
The beginning of the construction is the determination of the vertical rhythm. To do this, you need to set and calculate the base line-height (leading) and the base font size (size). With a fixed media size and ready-made key content, you can immediately set the line spacing. If there is no such information, you need to determine the font size. The basic size must be taken in such a way that the bulk of the text will be typed (as a rule, 13-16 pt is used), and the leading will be 150-200% of the size. Sometimes more. So, the vertical rhythm is defined and the layout can be lined.
Got it, it’s time to invest in brand building?
Then, the number of columns and the column spacing are set. The number of columns depends on the content. The sizes of the occupied area, the ratio of types and the number of information blocks are determined, indents are laid. When working with large projects, where there are many pages and layouts, it is better to immediately increase the number of columns by 2-3 times – to create a margin of safety.
The intercolumn spacing is set so that the blocks do not overlap with each other, and there is “air” between them, which will make the visual perception of the page more pleasant. Of course, modern website design can be created without taking into account the inter-column spacing. This is also valid. The size can be equal to the size of the column or, which is more common, several times smaller than its width. It all depends on the content that will be placed on the page, its type and goals.
What is a module?
The modular grid is ready. What is a module? This is a simple proportion. Its height is several lines, and its width is the width of the column. However, it is not forbidden to build a complex structure. The module can be pulled out, stretched horizontally or vertically, you can alternate different height modules. If this is the logic and regularity that preserves the vertical rhythm.
When creating a complex multi-component project, several nested grids are often used. This can be extraneous or embedded information: online cards, payment systems, players, and so on. This is not to be afraid. It is just necessary to take into account the indentation for such blocks, to provide a clean space around them, both vertically and horizontally. Visually separate the main content – this will isolate third-party elements and add balance.
A modular grid is just a methodology. It simplifies calculations and building the right website design. It is not a law and can be changed if the inner flair of the designer and visual perception require it. It happens that optical illusions and distortions arise, because of which it is worth changing the location of certain blocks. This can be done easily.
Adaptability in Web Design
There are many subtleties of modern web design. Building a layout with placement, presentation of content depends on the visual mass of the blocks and the mass of the surrounding elements. Also, development depends on the platform on which the resource will be loaded. Undoubtedly, the use of various devices leads to a distorted display of pages. Therefore, the pixel fit of all blocks does not make sense. It is almost impossible to get the perfect picture. Therefore, the development should be approached philosophically and once again not complicate your work.
When creating a layout, you must be able to design a modular grid and navigation system, form an information structure, select specific blocks and build their hierarchy. Thanks to this information will be easily perceived visually. It will be convenient for the user to work with the resource, find the necessary elements. This is most easily achieved using the modular grid. After all, web design is the creation of a beautiful, practical and, of course, convenient system.
For Professional website designers dubai or consultation from GCC Marketing Dubai please Contact Us or call us directly on 00971567300683