What is a modular grid. How to make a modular grid?

Modular grid is a special template, which is used for the design of the site. In fact, this is a system for presenting visual information to the visitor on the basis of individual blocks, called modules. A site developed using such a template is much more convenient for perception and navigation.

How the grid is applied

Modular grid is used in the development of design of books, business cards, trademarks, logos, etc. It is also mandatory to use it when creating websites. Correctly made grid harmoniously composes the environment for all elements of the resource - graphic and text. With its use it is much easier to place them all on the page and create clear boundaries between them. By arranging the elements in a certain way, you can make each of them noticeable and at the same time link all the information about the site itself.

Types of modular grids

The most common modular grid in the page design is the three basic columns of the cell. In this case, the header and footer have a width equal to their sizes. This standard option is usually used by amateurs when creating sites. Sometimes the width of one cell increases due to the width of the other cell.

The creation of a second version of modular grids - non-standard - is only possible for people who are engaged in web design professionally. In this case, only the width of the columns and the distance between the individual elements are accurately determined. Modular grid in the design of various kinds of news resources and online magazines is usually developed as follows:

1. A footer is created. Here you should find the site name, navigational menu, various video materials.
2. The page is divided into three columns. Two of them have the same dimensions. The third column is divided into two parts by a vertical line. Thus, four sections are obtained (news, photo gallery, place for advertising, the latest information changes on the site).

Modular grid for online stores of different specializations is created somewhat differently. In this case, it is very important to ensure the convenience of navigation to visitors. In this case, the elements are grouped in a standard and uniform manner. For each of the objects in the grid, important information that characterizes it is highlighted.

Ruler in the editor "Photoshop"

Sites are created using raster or vector graphics editors. The grid in them is very convenient to create. Consider how it is done in the popular Photoshop editor. Creating a modular grid in Photoshop is very simple.

In order to create rulers along the perimeter of the image window, go to the main menu item "View" and click on the "Rulers" line. In this editor, you can use a wide variety of elements - with divisions in centimeters, millimeters, inches or pixels. To make the necessary adjustment, go to the main menu item "Edit" (Edit). Then select the line "Preferences" ("Units & Rulers"). After that, a window will appear in which you can change the appearance of the ruler. In the upper drop-down menu, select centimeters, millimeters, pixels, and so on.

However, usually when working in the "Photoshop" editor, use a slightly different, simpler method. To change the units of measurement, simply click on the ruler in the image window with the right mouse button. After that, in the appeared menu it will be possible to make the necessary action. Usually, when creating a site, a grid is used in pixels.

Photoshop Grid

The very modular grid of the "Photoshop" program will become visible after you go to the main menu item "View" - "Show" - "Grid" (Grid). The step between the grid lines can be adjusted. To do this, execute the command "Edit" - "Settings" - "Guides, Grids and Slices" (Guides, Grids, Slices). Here you can change not only the step between the lines, but also their color. Using this grid, quickly and accurately place on the working field all the objects of the future site will be completely uncomplicated.

Working with the cursor

Modular grid of the site is created in this way very simply. The cursor at work sticks to the lines. This can be convenient if you want to make blocks of precise, specific sizes. If this function is unnecessary for some reason, you can turn it off. By default, the origin of the grid in Photoshop is located in the upper left corner of the window. If desired, you can move it to any other place on the canvas. To do this, move the cursor to the square of the origin and simply drag it by holding the mouse button. To return the reference point to its place, double-click on the same square in the corner.

Among other things, there are various plug-ins for the "Photoshop" editor, which make creating a site using a modular grid even more convenient. Download them online. With the use of these plug-ins, you can create grids with the specified parameters.

Grid in CorelDraw

Now let's see how to make a modular grid in the vector editor CorelDraw. Here it is created about the same as in Photoshop. Its icon is located on the top panel (the eye in the grid). After clicking on it, you can perform all the necessary settings. You can select the distance between lines, change the unit of measure, etc. Separate the working field in the image window in CorelDraw and using the guides. If necessary, they can be made visible or invisible.

Modular grid in the design of the site is a fundamental element, which should be approached with maximum responsibility. After all, on how well the resource will be structured, the convenience of its visitors depends, and hence the time spent on their pages.