A modular grid is a special pattern that is used to build a website design. In fact, this is a system for presenting visual information to the visitor based on separate blocks called modules. A site designed using this template is much more readable and easier to navigate.
How the grid is used
Modular grid is used in the design of books, business cards, trademarks, logos, etc. It is also necessary to use it when creating websites. A properly 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 tie together all the information about the site itself.
Types of modular grids
The most common modular grid in page design is the three basic cell columns. In this case, the header and footer have a width equal to their size. This standard optionusually used by amateurs when creating websites. Sometimes this increases the width of one cell at the expense of the width of another.
Creating the second variant of modular grids - non-standard - can only be done by people who are professionally engaged in web design. In this case, only the width of the columns and the distance between individual elements are precisely defined. A modular grid in the design of various kinds of news resources and online magazines is usually developed as follows:
- The footer is being created. The site name, navigation menu, various video materials should be located here.
- The page is divided into three columns. However, two of them are 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 information changes on the site).
A modular grid for online stores of various specializations is created somewhat differently. In this case, it is very important to provide ease of navigation for visitors. At the same time, the elements are grouped in a standard and uniform way. For each of the objects in the grid, important information is highlighted that characterizes it.
The ruler in the Photoshop editor
Websites are created using raster or vector graphic editors. It is very convenient to create a grid in them. Consider 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 working image window, go to the mainmenu "View" (View) and click on the line "Rulers" (Rulers). In this editor, you can use a variety of elements - with divisions in centimeters, millimeters, inches or pixels. In order to perform the necessary settings, you should go to the main menu item “Editing” (Edit). Next, select the line "Settings" (Preferences) - "Units &Rulers" (Units & Rulers). After that, a window will appear in which you can change the appearance of the ruler. In the top drop-down menu, choose centimeters, millimeters, pixels, etc.
However, usually when working in the Photoshop editor, they use a slightly different, simpler way. 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. Typically, when creating a site, a pixel grid is used.
Photoshop Grid
The Photoshop grid itself will become visible after you go to the main menu item "View" - "Show" (Show) - "Grid" (Grid). The spacing between grid lines can be adjusted. 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, it will be absolutely easy to quickly and accurately place all the objects of the future site on the working field.
Working with the cursor
A modular site grid is created in this way very simply. The cursor sticks to the lines while working. This can be convenient if you need to make blocks of precise, specific sizes. If for some reason this feature is not needed, it can be turned off. By default, the grid origin 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 over the square of the origin and simply drag it while holding down 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 plugins for the Photoshop editor that allow you to 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 CorelDraw vector editor. Here it is created in much 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 lines, change the unit of measure, etc. Delimit the working field in the image window in CorelDraw and using guides. They can be made visible or invisible if necessary.
A modular grid in website design is a fundamental element, the development of which should be approached withmaximum responsibility. After all, the convenience of its visitors, and hence the time they spend on its pages, depends on how well the resource is structured.
