Composition of lines in a modular grid. Modular grid. From words to deeds. What is a modular grid for?

Modular grid- this is a system of organizing objects in space, based on rows and columns of a certain, strictly specified size. Cells can contain units of content: text blocks, headings, frames, and images.

Grids can be found not only in information design, but also in architecture, interiors and urban planning. In all these areas, grids are built according to similar principles related to the desire to bring order and harmony to the drawn space.

Note one of the sketches of the development of Manhattan in 1807, which obeys a strict grid of streets running from west to east and from north to south.

Why are grids needed?

Initially, the grid was used in newspaper business in order to increase efficiency. Layout sheets made it possible to reduce the cost of maintaining full-time printers, standardizing the appearance of pages and saving the time of the "designers" themselves. Breadboards were soon replaced by more flexible modular grids.

Following the new trend, in the early 1960s, graphic designer Peter Palazzo redesigned the New York Herald Tribune. In 1966 art editor Janet Collins introduced a new layout for the London Times. Both of these transformations have shown the industry that a unified design style improves the quality of reader interaction with the publication. Newspapers and magazine editors quickly realized the need for grids and began to apply them in their practice.

As in the days of newspapers, in the digital era, properly applied grids help to keep the reader's attention, improve the quality of perception of the text and generally improve the experience of his interaction with the material. In media design today, the grid brings order and consistency to information. She is responsible for structuring the content of individual articles and the publication as a whole.

Joseph Müller-Brockmann In his book Modular Systems in Graphic Design, he writes about grids like this:

“By structuring planes and space using a modular grid, the designer is able to organize texts, photographs and graphics according to the principles of objectivity and functionality.<…>A logically organized design maintains the credibility of the information and engages the reader.”

What are the grids?

There are many types and configurations of grids: from primitive "cells", as in a school notebook, to complex structures with different distances between horizontals and verticals.

We have collected the most common and already "classic" samples, acquaintance with which will help to better understand modular design:

square grid

The simplest grid, which formed the basis of the modular system, consisted of squares and looked like a regular graphed table. It began to be used already at the end of the first quarter of the twentieth century. Typographic designers from Zurich and Basel perfected it in the post-war years, which coincided with a surge in interest in Helvetica and similar typefaces, giving rise to the "Swiss typography" school.

For example: Robert Buechler, 1914
Source: Thinking Form

Max Bill grids

The first experience with the grid in book business was the system developed by Max Bill for the book "Die Neue Architektur". In this book, published in 1940, Alfred Roth used the division of the page into nine horizontal modules. They made it possible to freely arrange illustrations and place text on them in three languages. A few years earlier, drawing on ideas from the "new typography" of the Bauhaus, Bill had used a six-module grid in his famous "Negerkunst" poster for an exhibition of South African rock art in 1931.

What typographies are silent about -

November 22, 2015 Sunday Modular grid: a smart design tool

What is a modular grid?

This is the invisible skeleton of your design - a system of horizontal and vertical (and sometimes even diagonal and arc) guides that help orient and coordinate the individual elements of the composition.

What's the use of it?

Firstly, the modular grid brings order, coherence and connection to the design of all its parts. It allows you to rationally organize any graphic space, be it a letterhead, business card, poster, book, website, interior, while maintaining the unity of style in all its elements.

And secondly, it significantly speeds up the execution of the order, because, you see, working according to a template is much easier than reinventing the wheel every time.

Man has long tried to understand the nature of beauty, "decompose" it into separate components, "believe harmony by algebra." The oldest example of the use of a modular grid is the medieval canon, which was used by book scribes when laying out book pages.

Opening of the Latin manuscript. 1555

The foundations of modern modular design were laid by the constructivists of the 1920s.

Magazine cover. Designed by El Lissitzky. 1922

Poster. Designed by Herbert Bayer. 1926

However, their abstract constructions were not immediately recognized as a method with its own system of rules and patterns. It wasn't until 1940 that the Swiss designer Max Bill first used a modular grid in book design.

Book binding. Designed by Max Bill. 1944

Poster. Designed by Max Bill. 1945

In 1961, his compatriot Josef Müller-Brockmann coined the first terms of the modular approach to design and published 28 examples of grids he had developed. It was the Swiss school of design, extremely functional and lapidary, that perfected and gave the world this tool - a modular grid.

Grid and book pages. Designed by Josef Müller-Brockmann

Poster. Designed by Josef Müller-Brockmann. 1959

Poster. Designed by Josef Müller-Brockmann. 1972

It must be said that Russian designers are not far behind their Western counterparts in modular design. Already in the 1960s, a group of like-minded people appeared in the Soviet Union who used the principles of strict design of printed publications (later Sergei Serov jokingly called this school "Soviet Switzerland"). The origins of the domestic modular approach to design were such recognized authorities today as Maxim Zhukov, Mikhail Anikst and Arkady Troyanker.

Book binding. Designed by Maxim Zhukov and Arkady Troyanker. 1970

Book spread. Designed by Mikhail Anikst. 1979

Dust jacket. Design by Maxim Zhukov. 1977

In just a couple of decades, unique experience has been accumulated and masterpieces of graphic design have been created. Despite this, today, like 30-40 years ago, the modular grid in our country, it seems, is still being promoted only by single enthusiasts.

Booklet cover. Designed by Evgeny Grigoriev. St. Petersburg, 2009

Here are some examples of a modular approach to design from the portfolio of our publishing house.

For the catalog of the artist Yevgeny Zhurov, a classic book format in quarto with an aspect ratio of 3 to 4 was chosen. These proportions formed the basis of the modular grid.

In order to orient the images of paintings on the spread, a horizontal line was selected, dividing the page vertically in a ratio of 1 to 3. During layout, each image was positioned so that it was also divided by this line vertically in the same ratio.

Such a technique made it possible to easily and harmoniously combine with each other any picture in terms of format - both panoramic, horizontally elongated, and tall, elongated vertically. When flipping through the catalog, the pictorial row acquires a lively, pulsating rhythm.

Needless to say, the compositions of the title page and half titles, the set of the introductory article and imprint, the position of the columns on the outer margins of the pages were also lined up taking into account this horizontal line.

We only add that the captions to the paintings, on the contrary, were deliberately made static. They are located in strictly defined places and live, as it were, separately, without distracting the viewer's attention from the images.

The appearance of our thematic calendar catalog was suggested by the material itself. This catalog is intended for the category of clients who want to order a corporate calendar. Each topic is represented by 12 images (according to the number of months in a year) and is placed on a separate spread. The brochure's modular grid is so simple, clear, and open that there is no need to include it here separately.

The design of postcards from the "Romanov Dynasty" set (Moscow Kremlin Museums), despite the pronounced asymmetric composition, was completely based on the successive division of the plane along the golden section. Combining classic, time-tested principles with modern trends can sometimes lead to interesting results.

Modular design is simply indispensable for the design of serial publications. Once built, but well thought out, the grid will greatly facilitate the work on new issues of a book, magazine, booklet, newspaper. By freely changing the text, images, color, you can easily get an easily recognizable and accurately identifiable design within the same series.

However, it must be remembered that the use of a modular grid is not a 100% guarantee of a successful design. Using the same template, you can create both a work of art and a mediocre craft. As precise, subtle and versatile as the modular grid is, it is just a tool that will remain dead without imagination and creativity.

In addition, when embarking on a modular design, it is useful for a designer to have at least a general idea of proportions, shape, color, contrast, rhythm ...

But more on that in our next articles.

Literature for self-education:
1. Laptev V. Modular grids: Design of multi-page publications. M.: RIP-holding, 2007.
2. Samara T. Creating and breaking the grid. M.: RIP-holding, 2005.
3. Hurlbert A. Grid: A modular system for the design and production of newspapers, magazines and books. M.: Book, 1984.
4. Bosshard H. R. Der typografische Raster. Zrich: Niggli, 2000.
5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme f?r Schrift. New York: Princeton Architectural Press, 2006.
6. Miller-Brockmann J. Grid systems in graphic designs. Zrich: Niggli, 1981.

What is a modular grid.

A modular grid is a system for constructing visual information based on blocks - modules.

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-9", renderTo: "yandex_rtb_R-A-269783-9", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");

Module.

The basis of the modular grid is the module. The module comes from the Latin word modulus - "small measure". The module can be any measure of length, area or volume taken as a unit of the modular grid.

From the history.

Roman architect, Vitruvius, in the 1st century BC wrote about the importance of proportions in the construction of the whole.

Is it worth talking about the age of the modular grid? She is literally as old as the world. We can see a proportional modular division in ancient Greek architecture, when the radius or diameter of the column was taken as the basis, and temples and structures were erected on the basis of this division, some of which have survived to this day.

What is a modular grid for?

The modular grid allows you to logically structure information, thereby facilitating its perception. A properly built grid makes it easy to cope with the layout of both multi-page publications and small one-page advertising layouts.

As a rule, a clear and collected layout leaves a correct, positive impression. A clear and complete compositional presentation of information, aesthetically more logical than chaotic. Using a modular grid allows you to focus entirely on information.

Building a modular grid.

The module can be 2 square meters, 3 by 3 millimeters, or 12 by 12 pixels. It all depends on the measurement system in which we use it.

Web design mostly uses 12, 16 or 24 px modules. Some recommend taking the line spacing as a basis, which, in principle, is also logical.

Modular grids can be completely different. The most primitive will be a grid consisting of identical squares lined up close.

More complex modular grids use large quantity elements. For example, we take the module X as a basis and get a grid with a step of 3X horizontally and 4X vertically. At the same time, both vertical and horizontal blocks are separated from each other by the X module.

It is not difficult to guess which option you liked, I personally like the first one, the one on the left. It has a more explicit and clear structure. It will be found more interesting and correct by most of the people. Despite the fact that the information is the same, it is presented in different ways, and therefore the impressions after what they see remain completely different.

Modular grid in the identity.

The use of a modular grid in the identity has long been the standard. Modular construction is used from the development of business cards and ends with the development of billboards. The use of the same modular grid in different advertising products creates a sense of integrity and unity for the entire brand.

Typographic grid in magazines and newspapers

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-10", renderTo: "yandex_rtb_R-A-269783-10", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");

The typographic grid is more of a variation of the modular grid due to the specifics of typography.

Magazines simply cannot do without a grid. A clear and concise structure attracts the eye and makes it easier to read large amounts of information.

A modular grid is not mandatory and its use is also a matter of personal preference and taste. You can use it in different ways.

In Figure 5, you see a great example of the use of a modular grid and the deliberate violation of its boundaries, which in turn looks quite interesting and noticeably enlivens the entire spread.

Newspaper editors were among the first to appreciate all the delights of modular layout, and for a long time the look of the newspaper has changed little. We can take a century old newspaper in our hands and compare it with the modern one, I think that the general features have not changed much.

Building a modular grid incorelDraw.

There are several options for using grid in corel.

The first is using a standard grid. It is marked with an icon numbered 1. By clicking on this icon we activate the grid. You can also bind to this grid or customize it as you wish.

The second way is to build a grid using guides. We can make the guides visible or invisible with the icon number 2.

An example of a modular grid based on guides in a corel in Figure 4.

Here the module is 5 millimeters in size. With it, we built a more complex grid.

You can come up with your own way, the main thing is that it helps you organize information.

Using the modular grid inAdobephotoshop.

Similarly, the grid is built in Photoshop. But here the designers went further and now you can download various plugins for building a modular grid with the specified parameters. This greatly facilitates and simplifies the creation of concise design layouts.

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-11", renderTo: "yandex_rtb_R-A-269783-11", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");

Conclusions.

The modular grid is used everywhere. Its significance is great, and the possibilities cannot be underestimated.

Although you can get away with simple alignment in many projects, this tool should be considered a must-have in your arsenal if you want to make quality designs.

Let's talk about how best to arrange design elements on the page.

One of the common mistakes novice designers make is to over-saturate a composition with all sorts of elements and place them too close to each other.

They are trying to fit too much information into a small space. Remember that free space is your good friend. It makes it easier for the audience to read your material. Properly used space makes your project look sleeker and easier to read.

The basic composition strategy of your design should start with markup.. If you do not want your work to look chaotic, then you need to organize all the visual information. Here comes to our aid modular grid or, to put it another way, markup for arranging elements on a page. In web design, the role of a modular grid is performed by a table.

Here are some examples of modular grids.
Notice how varied and unique they can be.

In order to demonstrate the need for a modular grid, here I present three versions of the same work.
The first two options are with a clearly developed modular grid, and the last one is without.

Example 1

Example 2

Example 3

Look closely at these examples and, as they say, feel the difference. Where design elements are arranged in accordance with the modular grid, there is an order and meaning to the composition. But in the last version without a modular grid, the elements are arranged randomly and, accordingly, violate the principles of alignment, unity and correspondence.

The composition of the first two images uses a traditional modular grid. In the first image, the lines are located horizontal and vertical at equal intervals.

The difference of the second option is only that the lines are located obliquely. All elements of the composition are tied to these slanted lines.

But in the last example in general there is no modular grid. The intervals between the graphic elements are completely random and therefore there is no sense of unity in the composition.

My aam advice: always use a modular grid to build a beautiful and competent composition (well, of course, if you do not do art in its purest form, where, as you know, there are no rules)!

I look forward to your question: Do you, Bob, build a modular grid every time before you start working. And are you lazy?

To be honest, not always, although I try. But at the initial stages of my design activity, I did not neglect this important rule and conscientiously built a modular grid. As you gain experience, you will learn to work with an imaginary grid without having to draw it on the page, and any deviation from the intended markup will be noticeable to your eye.

Nevertheless, in the course of work, if necessary, it is possible to break the structure of the modular grid. After all, we are, after all, not mathematicians. This disruption sometimes lends lightness and freedom of expression to the work. We just need to remember that this freedom should not destroy the overall structure of the composition.

So what are the benefits of a modular grid?

1. Modular grid helps us to follow one of the basic principles of design - the principle of alignment. Individual elements may not be attached to anything, but it is desirable that the elements in the group be aligned with each other, and the group of elements with respect to other groups.

2. Modular grid helps maintain even spacing between elements.

3. The modular grid helps to rationally use free space, which makes it easier to read the text and perceive the entire composition.

Now an example from practice.

Imagine your client is asking you to make a 50 page brochure. You are doing all the work good design. The pages of the brochure have a beautiful modular grid, a lot of free space and are easy and pleasant to read.

But the customer, not understanding such aesthetics, sees only an unfilled free space and, not wanting to pay for blank paper, asks to cram another 10 pages into it. How then to be?

Try to explain to the customer that pages filled with dense content are unattractive and difficult to read, and the audience is unlikely to want to spend time reading them.

If the customer does not understand this, then invite him to show both options to his friends and ask their opinions. If nothing could reason with him, then, alas, you have no choice but to satisfy his desire. By the way, I already discussed a similar situation in my article ""

In conclusion, I will give you advice.

Don't overload your design! Free space and margins on the page are important and necessary for visual perception. Remember that the purpose of good design is to quickly convey the necessary information, so design should not hinder, but help the assimilation of this information.

If the page is overloaded with information and there is no clear division of elements into groups, it will be difficult for the viewer to concentrate on the main thing and, most likely, he will not have the desire to understand all this confusion.

On the contrary, when the design is based on a small number of elements that have a clear structure of the composition, the viewer will be easy and comfortable, and he will quickly learn the necessary information.

"The grid is a help system, but it is not a guarantee, but only has a number of possible applications, and each designer himself can find a solution that suits his individual style. But you have to learn how to use the grid. It is an art that takes practice."

— Joseph Müller-Brockmann

In fact, the very use of the grid is related to one of the oldest and most basic principles of design - alignment. Our brain wants to simplify and make things more understandable. That's why we try to bring order to things that seem chaotic.

Naturally, the faster we organize everything correctly, the faster our brain will be able to determine the model and move on. The grids are so ordered that they require almost no interpretation on our part. .

Consider the two page layouts shown in the figure below:

Although both of these images are just a few rectangles, the set at the top seems fundamentally better than the one at the bottom. We can instantly recognize the pattern, accept it, and move on. The image below, on the other hand, causes visual discomfort, as it has no clear pattern, order, or purpose and looks like a random collection of shapes.

It should be noted that disorganization can also be beautiful. . In nature, for example, there are no clear lines. Grids look cold and rigid, but remember that they are a very efficient and effective method of not letting your imagination get bogged down in structures.

Take a look at some of the most popular sites with top notch designs. Most likely they used a grid. Grids allow you to stabilize the structure of a web page and provide a logical template for the designer to create a site.

Using a grid doesn't mean your design will be boring. A good designer should know and be able to apply the basic rules for using a grid, but that doesn't mean he can't break the rules.

Simply put, a grid is the division of a layout into vertical and/or horizontal guides including margins, space, and a number of columns in order to lay the foundation for organizing content.

Grids are traditionally used in print, but are also commonly used in web design. The grid is just a tool that helps in the design.

When starting to learn new skills in a particular area, you must first follow the recommendations. Learning the fundamentals ensures that you can apply the principles effectively. That is, first - theory, and then - practice.

It is worth noting that there are two ways to create a template grid:

Method #1: Create your own grid

There are many different ways to create your own mesh, but in the end, you are free to choose the one that suits you best.

You can split an empty document mathematically, creating an even or odd number of columns to work with. Your network can be complex or simple, you can use the rule of thirds or the golden ratio, whichever you prefer.

Perhaps the following articles will help you with this:

How You Make A Grid (book in English language in .pdf format)

Here are some examples of meshes created in Photoshop using guides ( View > New Guide):

Plugins for creating grids in Photoshop

5. Grid System Generator - generator of such popular grids as 960.gs, Golden Grid, 1Kb Grid, Simple Grid / set the desired parameters and click "GENERATE".

Grids for Responsive/Responsive Websites

Responsive web design is very popular today. Its main principle is the use of a rubber mesh. You can read more about them, but I would like to supplement this collection a little and add a few more resources.

1. - adaptive grid generator

2. Fluid grid calculator - a service that allows you to create a rubber grid. Enter the parameters and get the finished code.