The modular grid is a special template by which the site design is built. In essence, this is a system for presenting visual information to a visitor on the basis of separate blocks called modules. A site developed using such a template is much more convenient for perception and navigation.
How the grid is applied
The modular grid is used in the design of books, business cards, trademarks, logos, etc. Its use is mandatory when creating sites. A correctly made grid harmoniously composes the environment for all elements of the resource - graphic and text. Using 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 tie together all the information about the site itself.
Types of modular grids
The most common modular grid in page design is the three base columns of the cell. Moreover, the header and footer have a width equal to their size. This standard option is usually used by amateurs when creating sites. Sometimes the width of one cell increases due to the width of another.
Creating the second version of modular grids - non-standard - is only possible for people involved in web design professionally. In this case, only the width of the columns and the distance between the individual elements are precisely determined. The modular grid in the design of various news resources and online magazines is usually developed as follows:
- A footer is created. Here should be located the name of the site, navigation menu, all kinds of video materials.
- The page is divided into three columns. In this case, two of them have the same size. The third column is divided into two parts by a vertical line. Thus, four sections are obtained (news, photo gallery, advertising space, latest informational changes on the site).
The modular grid for online stores of different specializations is created in a slightly different way. In this case, it is very important to ensure the convenience of navigation for visitors. At the same time, 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 graphic editors. It’s very convenient to create a grid in them. Let's see how this is done in the popular Photoshop editor. Creating a modular grid in Photoshop is very simple.
In order for rulers to appear along the perimeter of the image’s working window, go to the “View” main menu item and click on the “Rulers” line. In this editor, you can use a variety of elements - with divisions in centimeters, millimeters, inches or pixels. In order to make the necessary settings, go to the main menu item "Edit" (Edit). Next, select the line “Preferences” - “Units & Rulers”. After that, a window will be displayed in which you can change the appearance of the ruler. In the upper drop-down menu, select centimeters, millimeters, pixels, etc.
However, usually when working in the Photoshop editor, a slightly different, simpler method is used. To change the units of measurement, simply click on the ruler itself in the image window with the right mouse button. After that, in the menu that appears, you can perform the desired action. Usually when creating a site, a grid in pixels is used.
Photoshop Grid
The modular grid of the Photoshop program itself will become visible after you click on the main menu item "View" - "Show" (Show) - "Grid" (Grid). The pitch between the grid lines can be customized. To do this, execute the command “Editing” - “Settings” - “Guides, grids and fragments” (Guides, Grid, Slices). Here you can change not only the step between the lines, but also their color. Using this grid, quickly and accurately placing on the working field all the objects of the future site will be completely uncomplicated.
Work with cursor
The modular grid of the site is created in this way very simply. The cursor sticks to the lines during operation. This can be convenient if it is necessary to make blocks of exact, specific sizes. If this function is unnecessary for any reason, you can disable it. By default, the origin of the grid in Photoshop is located in the upper left corner of the window. If desired, it can be moved to any other place on the canvas. To do this, move the cursor to the square of the origin and just drag it while holding the mouse button. To return the reference point to place, double-click on the same square in the corner.
Among other things, there are all sorts of plugins for the Photoshop editor, which make creating a site using a modular grid even more convenient. Download them online. Using these plugins, you can create grids with the given parameters.
Grid in CorelDraw
Now let's see how to make a modular grid in the vector editor CorelDraw. Here it is created in approximately the same way as in Photoshop. Its icon is located on the top panel (eye in the grid). After clicking on it, you can make all the necessary settings. You can select the distance between the lines, change the unit of measurement, etc. Delimit the working field in the image window in CorelDraw and using guides. If necessary, they can be made visible or invisible.
The modular grid in the design of the site is a fundamental element, the development of which should be approached with maximum responsibility. After all, the convenience of its visitors depends on how well the resource is structured, and therefore the time they spend on its pages.